Problème de Slideshow

Fermé
Noxiious - 24 mai 2013 à 17:53
Bonjour,

J'ai un petit problème avec le slideshow de mon site. Celui ci ne m'affiche que la première image, ne fais aucun défilement et n'affiche pas la légende.

Voici la partie du slideshow dans mon HTML:

<div id="site_content">	

      <div class="slideshow">
	    <ul class="slideshow">
          <li class="show"><img width="900" height="250" src="images/home_3.jpg" alt="Développement web" /></li>
		  <li><img width="900" height="250" src="images/home_1.jpg" alt="Relation" /></li>
          <li><img width="900" height="250" src="images/home_2.jpg" alt="Community Management" /></li>
		  
        </ul> 
	  </div>


Le .js

$(document).ready(function() {    
  
  // execute the slideShow, set 4 seconds (4000) for each image
  slideShow(4000);

});

function slideShow(speed) {

  // append an 'li' item to the 'ul' list for displaying the caption
  $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');

  // set the opacity of all images to 0
  $('ul.slideshow li').css({opacity: 0.0});
  
  // get the first image and display it
  $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
  
  // get the caption of the first image from the 'rel' attribute and display it
  $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
    
  // display the caption
  $('#slideshow-caption').css({opacity: 0.6, bottom:0});
  
  // call the gallery function to run the slideshow  
  var timer = setInterval('gallery()',speed);
  
  // pause the slideshow on mouse over
  $('ul.slideshow').hover(
    function () {
      clearInterval(timer); 
    },  
    function () {
      timer = setInterval('gallery()',speed);     
    }
  );  
}

function gallery() {

  //if no images have the show class, grab the first image
  var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

  // trying to avoid speed issue
  if(current.queue('fx').length == 0) {

    // get the next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
      
    // get the next image caption
    var desc = next.find('img').attr('alt');  
  
    // set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
    
    // hide the caption first, and then set and display the caption
    $('#slideshow-caption').slideToggle(300, function () { 
      $('#slideshow-caption p').html(desc); 
      $('#slideshow-caption').slideToggle(500); 
    });   
  
    // hide the current image
    current.animate({opacity: 0.0}, 1000).removeClass('show');

  }
}


Et le CSS

.slideshow
{  width: 900px;
  height: 250px;
  margin-left: 20px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;}  
  
/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 900px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 20px 0 0 0;}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;}
 
ul.slideshow li.show {
  z-index: 500;}
 
ul img {
  border: none;}
 
#slideshow-caption {
  width: 900px;
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 10px 25px 10px 25px; 
  background: transparent url(../images/transparent.png) repeat;  
  z-index: 1000;}
 
#slideshow-caption p {
  padding: 0;
  font: normal 130% arial, sans-serif;
  color: black;
  text-shadow: 1px 1px #000;}
 
 #fblikepop{
	background-color:#fff;
	display:none;
	position:fixed;
	top:200px;
	_position:absolute; /* hack for IE 6*/
	width:450px;
	border:10px solid #5f5f5f;
	z-index:4000;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius:7px;
	margin:0pt;
	padding:0pt;
	color:#333333;
	text-align:left;
	font-family:arial,sans-serif;
	font-size:13px;
}

#fblikepop body{
	background:#fff none repeat scroll 0%;
	line-height:1;
	margin:0pt;
	height:100%;
}

.fbflush{
	cursor: pointer;
	font-size:11px !important;
	color:#FFF !important;
	text-decoration:none !important;
	border:0 !important;
}

#fblikebg{
	display:none;
	position:fixed;
	_position:absolute; /* hack for IE 6*/
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000000; 
	z-index:3000;
}

#fblikepop #closeable{
	float:right;
	margin:7px 15px 0 0;
}

#fblikepop h1{ 
	background:#6D84B4 none repeat scroll 0 0;
	border-top:1px solid #3B5998;
	border-left:1px solid #3B5998;
	border-right:1px solid #3B5998;
	color:#FFFFFF !important;
	font-size:14px !important;
	font-weight:normal !important;
	padding:5px !important;
	margin:0 !important;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

#fblikepop #actionHolder{
	height:70px;
	overflow:hidden;
}

#fblikepop #buttonArea{
	background:#F2F2F2;
	border-top:1px solid #CCCCCC;
	padding:10px;
	min-height:50px;
}

#fblikepop #buttonArea a{
	color:#999999 !important;
	text-decoration:none !important;
	border:0 !important;
	font-size:10px !important;
}

#fblikepop #buttonArea a:hover{
	color:#333 !important;
	text-decoration:none !important;
	border:0 !important;
}

#fblikepop #popupMessage{
	font-size:12px !important;
	font-weight:normal !important;
	line-height:22px;
	padding:8px;
	background:#fff !important;
}

#fblikepop #counter-display{
	float:right;
	font-size:11px !important;
	font-weight:normal !important;
	margin:5px 0 0 0;
	text-align:right;
	line-height:16px;
}



Et voilà un screen du résultat -> http://hpics.li/6de9ecf


Merci d'avance pour votre aide !
A voir également: