• Home
• »»
• Javascript
• »»
• Scrollende Bildergalerie

 
Scrollen auf Klick |  Selbst scrollend (Quelle) |  Selbst scrollend (quer) (Quelle) |  Selbst scrollend mit Fading (IE)

Hier habe ich mal das Scrollscript eingesetzt, um eine kleine Bildergalerie zum scrollen zu bewegen. Außerdem wird hier noch das Script zum Ändern eines Bildes eingesetzt.
Allerdings werden beim Klick auf ein Bild noch einige andere Parameter übergeben, die im normalen Bildwechselscript nicht nötig sind.
Erst mal der Quelltext eines solchen verlinkten Bildes:

<a href="javascript:wechsel('bild.jpg',400,300), bewegen(80)">
<img src="vorschau/bild.jpg" width="120" height="90" border="0" alt="Bild 1"></a>

Anders als beim Bildwechselscript übergebe ich hier nicht den Bildnamen. Da es sich sowieso immer um das gleiche Zielbild (großes Bild = "grossbild") handelt, genügt die Festlegung dieses Ziels im Wechselscript.
In der Klammer der Funktion "wechsel" stehen aber noch die Breite und die Höhe des zu ladenden Bildes mit drin (400,300). So kann die Größe des neuen Bildes mit übergeben werden. Das ist ganz praktisch für den Fall, daß die Bilder unterschiedliche Größen haben. Leider interpretiert der Opera 6 diese Befehle noch nicht.
Mit dem Link wird auch gleichzeitig noch eine zweite Funktion aufgerufen. Dazu aber später.

Hier erst mal das Script, daß aus dem Iframe heraus die Bilder auf der Hauptseite wechselt.
Quelltext:

function wechsel(uri,w,h) {
 parent.document.images.grossbild.src = uri;
 parent.document.images.grossbild.width = w;
 parent.document.images.grossbild.height = h;
}

Mit "parent" werden die Funktionen im Elternfenster ausgeführt.
"uri" ist der Pfad zum großen Bild, das geladen werden soll, "w" und "h" stellen die Bildgröße ein.
Jetzt zur Funktion, die den Frame scrollen läßt. Ich habe an den Anfang und an das Ende des Iframes das gleiche Bild gesetzt, damit der Eindruck entstehen soll, als ob man "im Kreis" scrollt.
Erst mal der Quelltext der Funktion:

function bewegen(h) {
 if(h < 480) {
  self.scroll(0,h);
 } else
 if(h == 480) {
  self.scroll(0,0);
 } else
 if(h > 480) {
  self.scroll(0,480);
 }
}

Mit der Funktion "scroll(x,y)" bewegt man eine Seite nach links/rechts(x) oder oben/unten(y). Hier bleibt also die erste Zahl immer Null, da sich die Sache nur vertikal bewegen soll. Die Abstände, um die sich die Seite weiterbewegen soll, sind von der Größe der Vorschaubilder plus einem möglichen Abstand zwischen den Bildern abhängig.
Folgender Link bewegt also den Iframe an die Stelle "0 von links" und "h=80 von oben". Das nächste Bild übergibt als Zahl "h" dann die vorhergehende Zahl plus der eigenen Vorschaubildgröße plus einen möglichen Abstand zwischen den Bildern.

<a href="javascript:wechsel('bild.jpg',400,300), bewegen(80)">
<img src="vorschau/bild.jpg" width="120" height="90" border="0" alt="Bild 1"></a>

Noch eine Erklärung der verschiedenen "if"-Abfragen:

if(h < 480) {
 self.scroll(0,h);
 }

Solange die übergebene Zahl "h" kleiner als die letzte per Link übergebene Zahl (bei mir 480), soll an die Stelle gescrollt werden, die per Link übergeben wird.

if(h == 480) {
 self.scroll(0,0);
 }

Wenn die Zahl gleich der letzten Zahl ist, die übergeben werden kann, dann wieder an den Ausgangspunkt (0) scrollen. So entsteht der "Kreiseffekt".

if(h > 480) {
 self.scroll(0,480);
 }

Wenn die übergebene Zahl größer ist, als die eigentlich maximal mögliche, soll an das untere Ende des Iframes gescrollt werden. Das wird benötigt, um bei Klicken auf das oberste Bild zum untersten Bild zu springen, daß aber genauso aussieht -> der umgekehrte "Kreiseffekt".
Dazu wird einfach bei Klick auf das oberste Bild eine Zahl übergeben, die größer als die letzte Zahl ist, die die Bilder abwärts scrollen läßt.

Na mal sehen, wer das versteht ;-). Ich habe das Script zufriedenstellend mit IExplorer 5.5, Netscape 6 und Mozilla 1.3/1.7 getestet. Solange die großen Bilder alle die gleiche Größe haben, also eine neue Bildgröße nicht eingestellt werden muß, funktioniert die Sache auch mit Opera 6.

Eine Erklärung der anderen beiden Varianten würde hier den Rahmen sprengen. Man kann sich aber den Quelltext der entsprechenden Iframes ansehen oder auch Fragen im Forum stellen ;-)