CODE SCRIPT SLIDER
plus d'infos: http://nivo.dev7studios.com/#usage


<script src="http://lab.tomosfactory.fr/includes/jquery/jquery-1.4.4.min.js"></script>
<script src="http://tomostheque.tomosfactory.fr/lab/jquery/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery.noConflict(); 

jQuery(window).load(function() {
    jQuery('#slider').nivoSlider({
        effect:'fade', 
        animSpeed:500, 
        pauseTime:3000,
        startSlide:0, 
        directionNav:false, 
        directionNavHide:false, 
        controlNav:true, 
        keyboardNav:true, 
        pauseOnHover:true, 
        manualAdvance:false 
       
    });
});
</script>

  
CSS pour contenus HTML


.nivo-caption {
  position:absolute;
  right:0px;
  bottom:150px;
  color:#5D8EB5;
  opacity:0.8;
  float:right; z-index:89;
  width:200px;
  font-family: Helvetica;
  font-size: 30px;
  }

.nivo-caption a {
  color:#5D8EB5;
  text-decoration:underline;
  }

.nivo-caption p {
  padding:5px; margin:0;
  }

.nivo-html-caption {
  display:none;
  }
CSS pour contenus IMAGE

#slider {
  position:relative;
  width:805px;
  height:378px;
  background:url(images/loading.gif) no-repeat 50% 50%;
  }
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  }
#slider a {
  border:0;
  display:block;
  }

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:60;
  display:none;
  }

/* The slices in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:50;
  height:100%;
  } 
CSS pour pastilles de NAVIGATION

.nivo-controlNav {
  position:absolute;
  right:0px;
  top:375px;
  margin-right:3px;
}
.nivo-controlNav a {
  cursor:pointer;
  position:relative;
  display:block;
  width:22px;
  height:22px;
  background:url(http://tomostheque.
tomosfactory.fr/userfiles/image/Ressources_Images/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float: left;
  }
.nivo-controlNav a.active {
  background-position:0 -22px;
  font-weight:bold;
  }
.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(images/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}
HTML du SLIDER

<div id="slider">
<div><img width="535" height="361" title="#htmlcaption1" alt="" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6398_tomos-image_montagne1.png" />
<div id="htmlcaption1" class="nivo-html-caption">Retrouvez les bienfaits de la <a href="#">montagne</a></div>
</div>
<div><img width="539" height="361" title="#htmlcaption2" alt="" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6400_tomos-image_sport.png" />
<div id="htmlcaption2" class="nivo-html-caption">Gr&acirc;ce &agrave; nos conseils et &agrave; des machines <a href="#"> perfectionn&eacute;es </a></div>
</div>
<div><img width="537" height="361" title="#htmlcaption3" alt="" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6401_tomos-image_yoga.png" />
<div id="htmlcaption3" class="nivo-html-caption">Optimisez vos performances <a href="#"> sportives... </a></div>
</div>
<div><img width="537" height="361" title="#htmlcaption4" alt="" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6399_tomos-image_montagne1.png" />
<div id="htmlcaption4" class="nivo-html-caption">...ou simplement votre <a href="#"> bien-&ecirc;tre </a></div>
</div>
</div>


Retrouvez les bienfaits de la montagne
Grâce à nos conseils et à des machines perfectionnées
Optimisez vos performances sportives...
...ou simplement votre bien-être
Tomos > Slider
From jQuery Nivo Slider v2.3 / * http://nivo.dev7studios.com / ** Copyright 2010, Gilbert Pellegrom

Agence Web