jQuery Image Show - Website X5 Hilfe - Die Helpsite

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

jQuery Image Show

Scripte > Bildergalerien


Eine Bildergallerie als Slide-Show mit jQuery. (UTF-8)

Hier eine Bildergallery mit jQuery. Beim Klick auf das Bild öffnet sich eine zuvor eingestellte Seite ider ein Link zum vergrößertem Bild. Die Gallerie stoppt sobald die Maus auf dem Image liegt.
Die Größe der Gallerie kann selbst bestimmt und weiter ausgebaut werden. Dazu muss der HTML-Code nur entsprechend ergänzt werden.
In der Zip-Datei befindet ein Verzeichnis "jq_image-show", das so übernommen werden kann und auf den Server kopiert wird. Die Anpassung der Einträge erfolgen dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Nur erfahrene Nutzer sollten Änderungen an den CSS-Definitionen vornehmen.
Achtung: Die Ausrichtung der Zelle des Objekts muss auf "Oben" und "Links" eingestellt werden.


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="jq_image-show/slide_style.css" />
<script src="jq_image-show/jquery.min.js"></script>
<script src="jq_image-show/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
 var startSlide = 1;
// Get slide number if it exists
 if (window.location.hash) {
 startSlide = window.location.hash.replace('#','');
 }
// Initialize Slides
 $('#slides').slides({
  preload: true,
  preloadImage: 'jq_image-show/img/loading.gif',
  generatePagination: true,
  play: 5000,
  pause: 2500,
  hoverPause: true,
  effect: 'fade',
  crossfade: true,
  slideSpeed: 350,
  fadeSpeed: 500,
// Get the starting slide
 start: startSlide,
 animationComplete: function(current){
// Set the slide number as a hash
 window.location.hash = '#' + current;
 }
 });
});
</script>



Code für das HTML-Objekt:


<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">

<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_01.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
  
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_02.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>

<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_03.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>

<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_04.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_05.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_06.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_07.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_08.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_09.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_10.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_11.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_12.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>

 

<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_13.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_14.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
 
<div class="slide">
   <div style="position:absolute; left:0px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_image-show/img/bruecken_15.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>  
</div>

<a href="#" class="prev">
 <img src="jq_image-show/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next">
 <img src="template/jq_image-show/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
 </div>
</div>
</div>


Code der CSS-Datei (slide_style.css):


#container {
 width:450px;
 padding:0;
 margin:0 auto;
 position:relative;
 z-index:0;
}

#frame {
 position:absolute;
 z-index:0;
 width:450px;
 height:341px;
 top:-1px;
 left:-25px;
}

#example {
 width:450px;
 height:350px;
 position:relative;
}

/*
 Slideshow style
*/

#slides {
 position:absolute;
 top:-1px;
 left:0;
 z-index:100;
}

.slides_container {
 width:450px;
 height:330px;
 overflow:hidden;
 position:relative;
 display:none;
}

#slides .slide {
 padding:20px;
 width:450px;
 height:230px;
 display:block;
}

/*
 Next/prev buttons
*/
#slides .next,#slides .prev {
 position:absolute;
 top:127px;
 left:-27px;
 width:24px;
 height:43px;
 display:block;
 z-index:101;
}

#slides .next {
 left:453px;
}

/*
 Pagination
*/

.pagination {
 margin:0px auto 0;
 width:250px;
}

.pagination li {
 float:left;
 margin:0 1px;
 list-style:none;
}

.pagination li a {
 display:block;
 width:12px;
 height:0;
 padding-top:12px;
 background-image:url(img/pagination.png);
 background-position:0 0;
 float:left;
 overflow:hidden;
}

.pagination li.current a {
 background-position:0 -12px;
}


Feedbacks zu ""

Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 188 Heute
» 301 Gestern
» 755 Woche
» 8761 Monat
» 112273 Jahr
» 440029 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt