ICI header("Location: http://www.mytesting.fr ");

CREER UN DIAPORAMA AVEC UN CODE HTML.

par André Marini 10 Décembre 2014, 08:00 Images

CREER UN DIAPORAMA AVEC UN CODE HTML.

La plupart des sites possèdent cette fonction qui consiste à présenter des images que l'on peut agrandir et faire défiler.

Préparer une collection de photos et les garder.

Réduire ces photos en miniature en les renommant autrement pour que l'appareil ne les remplace pas.

Puis appliquer ce code en copiant les URL des images et, en-dessous, les URL des miniatures puis valider.

 

CODE

<script type="text/javascript">
$(document).ready(function() {
$('a[rel=diaporama_group]').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<a rel="diaporama_group" href="image-exemple1.jpg" title="titre">
<img alt="diapo-exemple" src="image-mini-exemple1.jpg" /></a>
<a rel="diaporama_group" href="image-exemple2.jpg" title="titre">
<img alt="diapo-exemple" src="image-mini-exemple2.jpg" /></a>
<a rel="diaporama_group" href="image-exemple3.jpg" title="titre">
<img alt="diapo-exemple" src="image-mini-exemple3.jpg" /></a>
<a rel="diaporama_group" href="image-exemple4.jpg" title="titre">
<img alt="diapo-exemple" src="image-mini-exemple4.jpg" /></a>

 

RESULTAT

diapo-exemple diapo-exemple diapo-exemple diapo-exemple

 

Cliquer sur la première image puis, pour faire défiler, cliquer sur la flèche qui apparait, à gauche pour avancer, à droite pour reculer.

commentaires

Haut de page