jQuery Slide Gallery
Hier eine horizontale Bildergallery als Slide-Show mit Verlinkung. Beim Klick auf die Beschreibung oder dem Bild öffnet sich ein neues Fenster mit großem Bild. Dieses Slide basiert auf drei Imagedateien je Aufruf, die entsprechend gestaltet werden können. Somit kann man die Größe des Menüs selbst bestimmen und weiter ausbauen. Die im Ordner "img" enthaltenen Bilder sind als Vorlage zur Gestaltung bestimmt. Mit ein wenig Geschick und Erfahrung im Umgang mit Bildbearbeitung, kann das eigene Menü perfekt gestaltet werden. Nur erfahrene Nutzer sollten Änderungen an den CSS-Definitionen vornehmen, da viele Funktionen über die Datei "slide.js" namensgleich gesteuert werden. Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen.
<div id="Obj63_boundary">
<div class="Obj63_div Obj63_current">
<a href="wsX5Obj/Obj63_0/img/hund1_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund1_k.jpg" width="500" height="300" class="Obj63_img" alt="Hund 1"/></a><a href="wsX5Obj/Obj63_0/img/hund1_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund1_v.gif" width="50" height="300" class="Obj63_v" alt="Hund 1"/></a><a href="wsX5Obj/Obj63_0/img/hund1_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund1_h.gif" width="500" height="50" class="Obj63_h" alt="Hund 1"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/hund2_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund2_k.jpg" width="500" height="300" class="Obj63_img" alt="Hund 2"/></a><a href="wsX5Obj/Obj63_0/img/hund2_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund2_v.gif" width="50" height="300" class="Obj63_v" alt="Hund 2"/></a><a href="wsX5Obj/Obj63_0/img/hund2_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hund2_h.gif" width="500" height="50" class="Obj63_h" alt="Hund 2"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/baer_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/baer_k.jpg" width="500" height="300" class="Obj63_img" alt="Bär"/></a><a href="wsX5Obj/Obj63_0/img/baer_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/baer_v.gif" width="50" height="300" class="Obj63_v" alt="Bär"/></a><a href="wsX5Obj/Obj63_0/img/baer_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/baer_h.gif" width="500" height="50" class="Obj63_h" alt="Bär"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/hirsch_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hirsch_k.jpg" width="500" height="300" class="Obj63_img" alt="Hirsch"/></a><a href="wsX5Obj/Obj63_0/img/hirsch_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hirsch_v.gif" width="50" height="300" class="Obj63_v" alt="Hirsch"/></a><a href="wsX5Obj/Obj63_0/img/hirsch_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/hirsch_h.gif" width="500" height="50" class="Obj63_h" alt="Hirsch"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/papagei_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/papagei_k.jpg" width="500" height="300" class="Obj63_img" alt="Papagei"/></a><a href="wsX5Obj/Obj63_0/img/papagei_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/papagei_v.gif" width="50" height="300" class="Obj63_v" alt="Papagei"/></a><a href="wsX5Obj/Obj63_0/img/papagei_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/papagei_h.gif" width="500" height="50" class="Obj63_h" alt="Papagei"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/schwan_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/schwan_k.jpg" width="500" height="300" class="Obj63_img" alt="Schwan"/></a><a href="wsX5Obj/Obj63_0/img/schwan_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/schwan_v.gif" width="50" height="300" class="Obj63_v" alt="Schwan"/></a><a href="wsX5Obj/Obj63_0/img/schwan_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/schwan_h.gif" width="500" height="50" class="Obj63_h" alt="Schwan"/></a>
</div><div class="Obj63_div">
<a href="wsX5Obj/Obj63_0/img/pferd_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/pferd_k.jpg" width="500" height="300" class="Obj63_img" alt="Pferd"/></a><a href="wsX5Obj/Obj63_0/img/pferd_g.jpg" target="_blank"><img src="wsX5Obj/Obj63_0/img/pferd_v.gif" width="50" height="300" class="Obj63_v" alt="Pferd"/></a><a href="wsX5Obj/Obj63_0/img/pferd_g.jpg" target="_blank">
<img src="wsX5Obj/Obj63_0/img/pferd_h.gif" width="500" height="50" class="Obj63_h" alt="Pferd"/></a>
</div>
</div>
display: block;position: absolute;width: 500px;height: 300px;top: 0;left: 0;background-color: #A3A5A2;border-left: 1px solid #fff;border-top: none;border-bottom: none;border-right: 1px solid #fff;}
display: block;position: absolute;top: 0;left: 0;width: 50px;height: 300px;margin: 0;padding: 0;}
display: block;position: absolute;top: 250px;left: 0;width: 500px;height: 50px;margin: 0;padding: 0;}
erst mal vorab! Eine Supertolle Seite.
Frage zu den Slides, muss ich die einzelnen Bilder und Trenner selbst erstellen und beschriften?
Grüße Wolfgang
Antwort: Ja Wolfgang, es gibt zu jedem Abschnitt 3 Images. 1x das Bild selbst, 1x Text als Images horizontal und 1x vertikal.
Schau Dir die beiliegende Imges an.
Wer mit Grafikprogrammen einigermaßen umgehen kann, ist das sicherlich kein Problem.
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Dirk Schwarz
20.01.2016, 09:32+0 -0