jQuery Image Show - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

jQuery Image Show

Scripte > Bildergallerien


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

jQuery

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

es gibt insgesamt 0 Kommentar(e)



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

© 2009 - 2018




  Besucher Statistik
 » 18 Online
 » 136 Heute
 » 872 Woche
 » 5202 Monat
 » 24989 Jahr
 » 271567 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü