Bilder einblenden lassen

tokyopunk

Hi ihr,

gibt es eine Möglichkeit die Bilder in seinem Blog nicht einfach nur anzuzeigen, sondern mittels CSS oder JavaScript schön und weich einzublenden, sobald sie geladen sind?

Grüße, Marcel

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SuMu

Ich glaube, für den IE gibt es solche Filter ...

tokyopunk

Ja aber es gibt doch zu allem immer irgendwelche CSS- oder Javascript-Codes, gibt es das denn nicht dafür? Dürfte doch keine so große technische Herausforderung sein, oder?

Ich such mal ein bisschen im Netz, wer jetzt schon was weiß immer her damit ;)

Alphawolf

Mit jQuery lässt sich sowas wunderbar machen. Allerdings musst du da an die Performance denken. Wenn JEDES Bild eingeblendet werden soll, also auch etwaige Grafiken bei Listenpunkten etc., kann das bei älteren Rechnern bei jedem Seitenaufruf zum Kollaps führen.

tokyopunk

Kann man es so einstellen, dass der Code dann nur bei bestimmten Divs, also z.B. im Content und in der Sidebar greift, die anderen aber sofort angezeigt werden?

Ein weiteres jetzt spezifisches Problem ist, dass bei auf meiner Seite bereits die JD.Gallery läuft, was wohl zu gewissen Problemen führen kann, wenn ich mich Recht erinnere, nicht wahr?

Edit: Ok ihr Leutchen, also ich versuch grad mein Glück mit Onload image fades without Flash | clagnut/sandbox, mal schauen ob das so läuft wie ich mir das vorstelle.

tokyopunk

Also Leute, ich verzweifel gerade,

mit dem folgenden Code greift das Script nur auf dem Bild, das die id "thephoto" hat:

Code

<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");


function initImage() {
	imageId = 'thephoto';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

Alles anzeigen

Wie bekomme ich's denn hin, dass der Code in den Klassen "contentarea" und "sidebar" greift?

marX

JavaScript an sich kennt keine Klassen, nur Elemente und IDs. Was geht: alle Bilder im Element mit der ID "sidebar" (z.B.) zurückliefern zu lassen:

Code

count_images = document.getElementById("sidebar").images.length;
for(i = 0; i < count_images; i++) {
  // do something with document.get_ElementById("sidebar").images[i] ...
}

Mal noch ein Link dazu:
SELFHTML: JavaScript / Objektreferenz / images

Willst du mit Javascript an Klassen, dann kannst du über die Attributnamen gehen, oder ein JS-Framework (wie das genannte JQuery) verwenden, dass eine getElementsByClassname()-Funktion kennt.

Alphawolf

Wie gesagt, der obige Code mit jQuery:

HTML

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery(".contentarea img, .sidebar img").css("display","none");
	jQuery(".contentarea img, .sidebar img").fadeIn(1000)
});
</script>

Um einiges überschaubarer, oder? :)

Und das Beste. WordPress hat jQuery sogar schon mit drin. Du musst nur in deinem Theme hin verlinken:

HTML

<script type='text/javascript' src='http://www.deinblog.de/wp-includes/js/jquery/jquery.js'></script>

Damit werden alle Bilder, die sich innerhalb der DIVs mit den Klassen .contentarea und .sidebar befinden, eingeblendet. Der Wert 1000 steht für Milisekunden, also eine Sekunde. Kannst du anpassen wie gewünscht. ;)

sms

Alphawolf, das ist genial :-D Ich habe statt der beiden Klassen für <body> eine ID vergeben, das klappt auch super, die Seite blendet ganz nett ein. Nun möchte ich gern das Skript um folgende Funktion erweitern: wenn ich auf einen Link klicke, soll die aktuelle Seite erst ausfaden und dann die neue wieder einfaden. Hast Du dazu eine Idee? Meine Kenntnisse sind in Sachen JS, bzw. jQuery doch sehr begrenzt.

Danke schon mal und auch vielen Dank für diesen wertvollen Tipp!

Beste Grüße,

Stefan

Alphawolf

sms, das wird so leicht nicht gehen, da in deinem Fall bei einem Linkklick die Seite neu geladen wird, da ja auf eine andere gesprungen wird. Das heißt, der Browser "verlässt" die eine Seite, und öffnet dann die neue. Wenn du die Inhalte per AJAX laden würdest (ohne Neuladen der Seite), wäre das besser machbar.

sms

Danke für die schnelle Antwort, Alphawolf :-D

Habe gestern nach viel Googeln etwas zum Thema gefunden, was auch schon fast funktioniert:

Code

<script type="text/javascript">


$(function() {


    // Einfaden der Seite
    $('body').css("display","none");
    $('body').fadeIn(500);


    // Ausfaden der Seite bei Klick
    $('a').click(function() {
        $(document.body).fadeOut();
        setTimeout("nav('"+this.href+"')",500);
        return false;
    });


});


function nav(href) {
    location.href=href;
}


</script>

Alles anzeigen

Nun blendet sie Seite wunderbar ein und aus, wenn ich auf einen Link klicke, allerdings 'flasht' es kurz weiß auf, bevor die neue Seite geladen wird. Hast Du vielleicht eine Idee dazu?

Ajax finde ich auch ganz nett, weiß aber nicht, wie ich das so einbinden kann, dass die Inhalte auch von Usern angewählt werden können, die kein JS aktiviert haben (soll's ja leider auch geben).

Danke schon mal :-D

Alphawolf

Das meinte ich... da der Übergang nicht fließend ist, da ja die neue Seite erst geöffnet und geladen werden muss, wird es nicht wie "aus einem Guss" aussehen. Wie sieht denn der aufblitzende "Flash" aus? Hast du ein Online-Beispiel?

sms

Es soll ja keine Überblendung zwischen den Seiten erfolgen. Lediglich die alte Seite ausfaden, dann soll die neue geladen, und sobald der Ladevorgang abgeschlossen ist, die neue eingefadet werden.

Habe jetzt - glaube ich zumindest - eine Lösung gefunden. Und zwar habe ich fadeOut 500ms gegeben und Timeout 400ms - jetzt blitzt erstmal nichts mehr. Aber wie das wohl online ist... Ich mach' mal was fertig, vielleicht gibt es ja noch eine professionellere Lösung als mein Rumgewurschtel ;)

Code

// Ausfaden der Seite bei Klick auf einen Link
    $('a').click(function() {
        $(document.body).fadeOut(500);
        setTimeout("nav('"+this.href+"')",400);
        return false;
    });

Danke für Deine Hilfe :-D

sms

So, habe mal was online gestellt. Soll mal ein WP-Blog werden, auch wenn es momentan noch nicht so aussieht...

Das mit dem Timeout hat auch nicht so wirklich geklappt - manchmal blitzt es und manchmal nicht.

Test

Momentan klappt nur der Wechsel zwischen 'Home' und 'Portfolio'. Ach so, sind die gleichen Seiten, nicht wundern...

Das muss doch irgendwie zu schaffen sein :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder einblenden lassen

Jetzt mitmachen!