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 > Bildergallerien


Eine schöne Bilder-Slide-Show mit jQuery. (UTF-8)

Hier eine horizontale Bildergallery als Slide Show mit Verlinkung. Beim Klick auf die Beschreibung oder dem Bild öffnet sich ein neues Fenster mit vergrößertem Bild. Dieses Slide basiert auf drei Imagedateien je Aufruf, die entsprechend gestaltet werden können. Somit kann man die Größe der Gallerie selbst bestimmen und weiter ausbauen.
Hier sind 2 Varianten zur Einbindung erläutert. Der Einfachheit halber,  empfiehlt sich die Variante 2 zum Einbau.
In der Zip-Datei befindet sich ein Verzeichnis "
jq_slide-gallery", das so übernommen werden kann. Die Anpassung des Menüs erfolgt dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Nur erfahrene Nutzer sollten Textänderungen an den CSS-Definitionen vornehmen, da viele Funktionen über die Datei "jquery.js" namensgleich gesteuert werden.

Hund 1 Hund 1 Hund 1
Hund 2 Hund 2 Hund 2
Bär Bär Bär
Hirsch Hirsch Hirsch
Papagei Papagei Papagei
Schwan Schwan Schwan
Pferd Pferd Pferd


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="jq_slide-gallery/slide_style.css" />
<script type="text/javascript" src="jq_slide-gallery/slide.js"></script>
<script type="text/javascript" src="jq_slide-gallery/jquery.js"></script>



Variante 1


Code für das HTML-Objekt:

<div id="slide">
<div id="slideboundary">
<div class="slidediv slidecurrent">
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_k.jpg" width="500" height="300" class="slideimg" alt="Hund 1" border="0"/></a>
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_v.gif" width="50" height="300" class="slide_v" alt="Hund 1" border="0"/></a>
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_h.gif" width="500" height="50" class="slide_h" alt="Hund 1" border="0"/></a>
</div>
 
<div class="slidediv">
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_k.jpg" width="500" height="300" class="slideimg" alt="Hund 2" border="0"/></a>
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_v.gif" width="50" height="300" class="slide_v" alt="Hund 2" border="0"/></a>
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_h.gif" width="500" height="50" class="slide_h" alt="Hund 2" border="0"/></a>
</div>

<div class="slidediv">
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_k.jpg" width="500" height="300" class="slideimg" alt="B&auml;r" border="0"/></a>
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_v.gif" width="50" height="300" class="slide_v" alt="B&auml;r" border="0"/></a>
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_h.gif" width="500" height="50" class="slide_h" alt="B&auml;r" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_k.jpg" width="500" height="300" class="slideimg" alt="Hirsch" border="0"/></a>
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_v.gif" width="50" height="300" class="slide_v" alt="Hirsch" border="0"/></a>
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_h.gif" width="500" height="50" class="slide_h" alt="Hirsch" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_k.jpg" width="500" height="300" class="slideimg" alt="Papagei" border="0"/></a>
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_v.gif" width="50" height="300" class="slide_v" alt="Papagei" border="0"/></a>
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_h.gif" width="500" height="50" class="slide_h" alt="Papagei" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_k.jpg" width="500" height="300" class="slideimg" alt="Schwan" border="0"/></a>
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_v.gif" width="50" height="300" class="slide_v" alt="Schwan" border="0"/></a>
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_h.gif" width="500" height="50" class="slide_h" alt="Schwan" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_k.jpg" width="500" height="300" class="slideimg" alt="Pferd" border="0"/></a>
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_v.gif" width="50" height="300" class="slide_v" alt="Pferd" border="0"/></a>
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_h.gif" width="500" height="50" class="slide_h" alt="Pferd" border="0"/></a>
</div>
 </div>
</div>



Variante 2

Code für das HTML-Objekt:


<? include "jq_slide-gallery/index.html"; ?>


Code der CSS-Datei (slide_style.css):


BODY {
margin: 0px;
padding: 0px;
}

#slide
{
width: 100px;
height: 300px;
background-color: #A3A5A2;
}

#slideboundary
{
width: 950px;
height: 300px;
overflow: hidden;
position: relative;
}

#slideboundary .slidediv
{
display: block;
position: absolute;
width: 500px;
height: 300px;
top: 0;
left: 0;
background-color: #A3A5A2;
border-left: 2px solid #ffffff;
border-top: none;
border-bottom: none;
border-right: none;
}

#slideboundary .slide_v
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 300px;
margin: 0;
padding: 0;
}

#slideboundary .slide_h
{
display: block;
position: absolute;
top: 250px;
left: 0;
width: 500px;
height: 50px;
margin: 0;
padding: 0;
}

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.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 44 Heute
» 568 Gestern
» 2432 Woche
» 6383 Monat
» 76204 Jahr
» 322782 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt