jQuery Slide Gallery - Website X5 Hilfe - Die Helpsite

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.

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;
}