jQuery Slide Gallery - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

jQuery Slide Gallery

Scripte > Bildergallerien


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

jQuery

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

es gibt insgesamt 2 Kommentar(e)


  1. Dirk Schwarz schreibt am 20.01.2016, 10.32 Uhr

    Die Slideshow gefällt mir ganz gut. Nur eine Frage, ist diese auch Responsiv?

  2. Wolfgang schreibt am 06.01.2012, 14.05 Uhr

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


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 2 Online
 » 3 Heute
 » 1053 Woche
 » 3754 Monat
 » 61269 Jahr
 » 237569 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü