jQuery Slide Gallery - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

jQuery Slide Gallery

Scripte > Bildergalerien
Eine schöne Bilder-Slide-Show mit jQuery

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.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html".
Achtung: Bei Einbindung per <?php include...?> muss die ausführende Datei die Dateiendung .php aufweisen.



Download Button
Downloads:
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj63_0/style.css" />
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj63_0/jquery.js"></script>
<script src="wsX5Obj/Obj63_0/slide.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj63_0/include.html"; ?>

alternative Einbindung:
<div align="center">
<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&auml;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&auml;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&auml;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>
</div>
Code Datei "style.css"
#Obj63_boundary { width: 800px; height: 300px; overflow: hidden; position: relative; }
#Obj63_boundary .Obj63_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;
}
#Obj63_boundary .Obj63_v {
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 300px;
margin: 0;
padding: 0;
}
#Obj63_boundary .Obj63_h {
display: block;
position: absolute;
top: 250px;
left: 0;
width: 500px;
height: 50px;
margin: 0;
padding: 0;
}
.Obj63_img { border-top: 2px solid #fff; border-bottom: none; }
Feedbacks zu ""
2 Kommentare
Durchschnittliche Bewertung: 125.0/5
Admin-Antwort
2018-11-13 07:47:39
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.
Wolfgang
2018-11-13 07:46:07
Hallo Mario, erst mal vorab! Eine Supertolle Seite. Frage zu den Slides, muss ich die einzelnen Bilder und Trenner selbst erstellen und beschriften? Grüße Wolfgang
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 3 Online
» 158 Heute
» 445 Gestern
» 1280 Woche
» 6683 Monat
» 6683 Jahr
» 477351 Gesamt
Record: 1396 (02.01.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt