Forum : Problèmes avec un slideshow

Bonsoir,

J'ai installé un système de slideshow en jQuery sur mon portfolio en construction pour pouvoir classer mes images joliment.
Je n'ai pas eu le choix de l'adapter (en plus du CSS/HTML), malgré mes faibles connaissances en JS.

Le code source de mon portfolio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
<title>Portfolio | Lyress</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <link rel="icon" type="image/png" href="http://s3.noelshack.com/old/up/favico-2ec206ba20.png" />
<link rel="stylesheet" href="http://up.sur-la-toile.com/iQUE" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".pane-list li").click(function(){
        window.location=$;(this).find("a").attr("href");return false;
    });
}); //close doc ready

$;(document).ready(function(){

    $;(".accordion p:not(:first)").hide();
$(".accordion p:not(:last)").hide();
    $(".accordion li").click(function(){
        $(this).next("p").slideToggle("prompt")
        .siblings("p:visible").slideUp("prompt");
        $(this).toggleClass("active");
        $(this).siblings("li").removeClass("active");
    });
});
</script>
<style type="text/css">

/** 
 * Slideshow style rules.
 */
#slideshow {
    margin:0 auto;
width: 600px;
height: 375px;
    position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
width: 600px;
height: 375px;
  overflow: auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
margin-left: 30px;
width: 560px;
height: 375px;
}
/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#navDiapo{
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    right:25px;
    bottom:10px;
    cursor:pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(http://www.snoupix.com/demo/slider-jquery/img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(http://www.snoupix.com/demo/slider-jquery/img/control_right.jpg) no-repeat 0 0;
}
/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
.slide img {
}
/*TTTTTTTTTTTTTTTTTTTTTTTTTTTTT*/
            body{ background-position:left -250px;}
            .subhead{ margin-top:20px; }
             span { width: 100px; height: 100px; overflow: auto; }

             /*[fmt]0020-000A-3*/
/*#zoombox iframe, #zoombox image*/
#INVALID-RULE{ border:none;}
#zoombox .mask{ background-color:#000000; position:fixed; width:100%; z-index:90; height:100%; top:0; left:0;}
#zoombox .container{ position:absolute; z-index:100;}
#zoombox .relative{ position:relative;}
#zoombox .prev{ position:absolute; top:0; left:0; width:50%; height:100%; cursor:pointer; /*+opacity:0;*/ filter:alpha(opacity=0); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-opacity:0; opacity:0;}
#zoombox .prev:hover{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
#zoombox .next{ position:absolute; top:0; right:0; width:50%; height:100%; /*+opacity:0;*/ filter:alpha(opacity=0); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-opacity:0; opacity:0;}
#zoombox .close, #zoombox .next, #zoombox .prev{ cursor:pointer;}
#zoombox .next:hover{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
#zoombox .gallery{ position:absolute; bottom:0; left:0; right:0; text-align:center; /*+opacity:85%;*/ filter:alpha(opacity=85); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85); -moz-opacity:0.85; opacity:0.85; cursor:pointer; width:auto; background-color:#050505;}
#zoombox .gallery img{ height:50px; padding:5px; /*+opacity:50%;*/ filter:alpha(opacity=50); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity:0.5; opacity:0.5;}
#zoombox .gallery img:hover, #zoombox .gallery img.current{ /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1;}
#zoombox_loader{ background:url(img/loader.png) no-repeat left top; position:absolute; height:40px; width:40px; cursor:pointer; top:50%; left:50%; margin:-20px 0 0 -20px; overflow:hidden; z-index:110;}
/ **Zoombox Theme** /
.zoombox .container{ background:#000000; color:#666; /*+box-shadow:0px 0px 10px #000000;*/ -moz-box-shadow:0px 0px 10px #000000; -webkit-box-shadow:0px 0px 10px #000000; -o-box-shadow:0px 0px 10px #000000; box-shadow:0px 0px 10px #000000;}
.zoombox .content{}
.zoombox .title{ color:#FFFFFF; /*+placement:anchor-top-left -1px -22px;*/ position:absolute; left:-1px; top:-22px; /*+text-shadow:1px 1px #000000;*/ -moz-text-shadow:1px 1px #000000; -webkit-text-shadow:1px 1px #000000; -o-text-shadow:1px 1px #000000; text-shadow:1px 1px #000000;}
.zoombox .close{ background:url(img/close.png) no-repeat; width:30px; height:30px; /*+placement:anchor-top-right -15px -15px;*/ position:absolute; right:-15px; top:-15px;}
#zoombox.zoombox .next{ background:url(img/next.png) no-repeat right center;}
#zoombox.zoombox .prev{ background:url(img/prev.png) no-repeat left center;}
/ **Lightbox Theme** /
.lightbox .container{ background:#FFFFFF; margin-left:-30px; padding:10px 10px 37px; color:#666;}
.lightbox .close{ background:url(img/lightclose.gif) no-repeat left top; width:66px; height:22px; top:auto; /*+placement:anchor-bottom-right 12px 6px;*/ position:absolute; right:12px; bottom:6px;}
.lightbox .title{ text-align:left;}
.lightbox .next{ background:url(img/lightnext.gif) no-repeat right 50px;}
.lightbox .multimedia .next, .lightbox .multimedia .prev{ display:none;}
.lightbox .prev{ background:url(img/lightprev.gif) no-repeat left 50px;}
#zoombox.lightbox .gallery{ left:10px !important; right:10px; bottom:36px;}
/ **Pretty Photo Theme** /
.prettyphoto .container{ border:10px solid #0B0A0A; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; background:#FFFFFF; padding:10px 10px 37px; margin-left:-20px; color:#797979;}
.prettyphoto .title{ text-align:left;}
.prettyphoto .close{ background:url(img/ppsprite.png); width:27px; height:24px; top:auto; /*+placement:anchor-bottom-right 6px 8px;*/ position:absolute; right:6px; bottom:8px;}
.prettyphoto .next{ background:url(img/ppnext.png) no-repeat right center;}
.prettyphoto .prev{ background:url(img/ppprev.png) no-repeat left center;}
.prettyphoto .multimedia .next, .prettyphoto .multimedia .prev{ display:none;}
#zoombox.prettyphoto .gallery{ left:10px !important; right:10px; bottom:36px;}
/ **Dark Pretty Photo Theme** /
.darkprettyphoto .container{ /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; background:#0C0C0C; padding:10px 10px 37px; margin-left:-30px; color:#828282;}
.darkprettyphoto .title{ /*[empty]position:;*/ text-align:left;}
.darkprettyphoto .close{ background:url(img/ppsprite.png); width:27px; height:24px; top:auto; /*+placement:anchor-bottom-right 2px 6px;*/ position:absolute; right:2px; bottom:6px;}
.darkprettyphoto .next{ background:url(img/ppnext.png) no-repeat right center;}
.darkprettyphoto .prev{ background:url(img/ppprev.png) no-repeat left center;}
.darkprettyphoto .multimedia .next, .darkprettyphoto .multimedia .prev{ display:none;}
#zoombox.darkprettyphoto .gallery{ left:10px !important; right:10px; bottom:36px;}
/ **Simple Theme** /
.simple .container{ background:#000;}
.simple .title{ color:#FFFFFF; /*+placement:anchor-top-left -1px -22px;*/ position:absolute; left:-1px; top:-22px; /*+text-shadow:1px 1px #000000;*/ -moz-text-shadow:1px 1px #000000; -webkit-text-shadow:1px 1px #000000; -o-text-shadow:1px 1px #000000; text-shadow:1px 1px #000000;}
#zoombox.simple .next{ background:url(img/simplenav.png) no-repeat -20px center; /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1; right:-20px; width:20px;}
#zoombox.simple .next:hover{ background-position-x:left;}
#zoombox.simple .prev{ background:url(img/simplenav.png) no-repeat -40px center; /*+opacity:100%;*/ filter:alpha(opacity=100); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity:1; opacity:1; left:-20px; width:20px;}
#zoombox.simple .prev:hover{ background-position-x:-60px;}
.simple .prev{ background:url(img/ppprev.png) no-repeat left center;}
.simple .close{ background:url(img/simpleclose.png) no-repeat; width:30px; height:30px; position:absolute; top:0; right:-10px;}
.portfolio img {
padding: 4px;
padding-top: 2px;
padding-bottom: 2px;
}
.portfolio {
margin-top: -8px;
margin-left: -8px;
width: 530px;
height: 375px;
/*background: black;*/
text-align: center;
padding-top: 6px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px
}
.portfolio img {
opacity: 0.7;
}
.portfolio img:hover {
opacity: 1;
}
        </style>
<style>
body {
   margin: auto;
background: url("http://d21.e-loader.net/GYYrlMKfX7.png");
}
p {
margin: 0px;
padding: 0Px;
}
#logo {
height: 170px;
background: url('http://d26.e-loader.net/8efjOR1ega.png') center no-repeat;
}
.iframe {
/*margin-left: 283px;*/
}
.contenu {
width: 826px;
height: 384px;
margin: auto;
}
</style>

</head>
    <body><div id="logo"></div>
<div class="contenu">

<div id="slideshow">
    <div id="slidesContainer">  
      <div class="slide">
<div class="iframe">
<div class="portfolio">
<div class="grid_6 omega">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>

<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
</div></div></div>
      </div>

      <div class="slide">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
      </div>

      <div class="slide">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
      </div>

    </div>
  </div>
</div>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://up.sur-la-toile.com/iQUr"></script>
        <script type="text/javascript">
            //<![CDATA[
            $(function(){
                $('a.zoombox').zoombox();
            });
            //]]>
        </script>
<script type="text/javascript">
$(document).ready(function(){
    //Configuration
          var retour = true;
          var tempsTransition = 1000;
          var affichePlayPause = true;
          var lectureAutomatique = false;
            var tempsAttente = 6000;

          var icones = new Array();
                icones'play'] = 'img/play_slider.png';
                icones'pause'] = 'img/pause_slider.png';    

          var currentPosition = 0;
          var slideWidth = 585;
          var slides = $('.slide');
          var numberOfSlides = slides.length;
          var interval;
          var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Attribue #slideInner à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){

    // Determine la nouvelle position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    if(currentPosition == numberOfSlides && retour == false ){
        currentPosition--;
        pause();
    }

    // Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });
  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
        $('#rightControl').hide();
    } else {
        $('#rightControl').show();
    }
    if(position == numberOfSlides && retour == true){
        currentPosition = 0;
         $('#leftControl').hide();
    }
  }
  function suivant(){
    $('#rightControl').click();
    }
  function start() {
    lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
    lectureEnCours = false;
   clearInterval(interval);
  }

 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}

});
</script>
  </body>
</html>

Voici les parties concernées:

Le HTML:

<div id="slideshow">
    <div id="slidesContainer">  
      <div class="slide">
<div class="iframe">
<div class="portfolio">
<div class="grid_6 omega">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>

<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
</div></div></div>
      </div>

      <div class="slide">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
      </div>

      <div class="slide">
<a class="zoombox zgallery1" href="http://d22.e-loader.net/RBY0mkiRwN.png">
<img src="http://i48.servimg.com/u/f48/15/58/41/48/13129010.png" class="bordered" alt="" />
</a>
      </div>

    </div>
  </div>

Le CSS:

#slideshow {
    margin:0 auto;
width: 600px;
height: 375px;
    position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
width: 600px;
height: 375px;
  overflow: auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
margin-left: 30px;
width: 560px;
height: 375px;
}
/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#navDiapo{
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    right:25px;
    bottom:10px;
    cursor:pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(http://www.snoupix.com/demo/slider-jquery/img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(http://www.snoupix.com/demo/slider-jquery/img/control_right.jpg) no-repeat 0 0;
}
/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

Et le JS:

$(document).ready(function(){
    //Configuration
          var retour = true;
          var tempsTransition = 1000;
          var affichePlayPause = true;
          var lectureAutomatique = false;
            var tempsAttente = 6000;

          var icones = new Array();
                icones'play'] = 'img/play_slider.png';
                icones'pause'] = 'img/pause_slider.png';    

          var currentPosition = 0;
          var slideWidth = 585;
          var slides = $('.slide');
          var numberOfSlides = slides.length;
          var interval;
          var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Attribue #slideInner à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){

    // Determine la nouvelle position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    if(currentPosition == numberOfSlides && retour == false ){
        currentPosition--;
        pause();
    }

    // Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });
  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
        $('#rightControl').hide();
    } else {
        $('#rightControl').show();
    }
    if(position == numberOfSlides && retour == true){
        currentPosition = 0;
         $('#leftControl').hide();
    }
  }
  function suivant(){
    $('#rightControl').click();
    }
  function start() {
    lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
    lectureEnCours = false;
   clearInterval(interval);
  }

 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true){
    $('#slidesContainer').prepend('<img id="navDiapo" src="" alt="" />');
    if(lectureAutomatique == true){
        $('#navDiapo').attr('src',icones'pause']);
    }else{
        $('#navDiapo').attr('src',icones'play']);   
    }
    $('#navDiapo').bind('click', function(){
        if(lectureEnCours == true){
            $(this).attr('src',icones'play']);
            pause();
        }else{
            $(this).attr('src',icones'pause']);
            start();
        }
    });
}

});

Voici mes deux problèmes:
1) le slideshow défile très bien, mais au dernier slider, le contenu (qui est une image) ne s'affiche pas. Par-exemple j'ai 3 sliders, les deux premiers aparaissent, mais quant au dernier celui-ci disparaît. Si je rajoute deux autres sliders, tous apparaîtront sauf le dernier encore,
2) quand je défile mon slideshow, la flèche droite marche très bien mais pas la gauche.

Le site est en question est le suivant: http://lyress.frbb.net/h27-portfolioe

Je vous remercie sincèrement pour votre dévouement,
Lyress.

Problèmes avec un slideshow

6 réponses