Lorsque je vous ai présenté les lightbox-like dans mon billet sur ClearBox et ShadowBox, j'ai omis de vous parler du TripTracker slideshow. Voici donc le troisième script, à mon avis intéressant, pour l'affichage de vos images. Je lui fait un billet particulier car il est particulier. A la fois plus simple et plus compliqué !

Pour commencer, un petit exemple : En cliquant sur le lien suivant, vous aurez une idée du rendu...

En dehors de la beauté du choupinou Jesse Metcalfe, vous aurez constaté un effet lightbox et des boutons de navigations : Première image, image précédente, Play, image suivante, dernière image, envoi du lien de l'image par mail, lien de l'image, fermeture !

C'est plus compliqué par rapport à ClearBox et ShadowBox, dans le sens où il ne suffit pas de rajouter un rel="lightbox" dans le lien d'une image pour générer l'effet. Pour le slideshow Jesse Metcalfe que je vous ai présenté, il a fallu coder ceci :

<script type="text/javascript"
	src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!--
  var viewer = new PhotoViewer();
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/1.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/2.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/3.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/4.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/5.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/6.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/7.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/8.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/9.jpg');
//--></script>
<a href="javascript:void(viewer.show(0))">Slideshow Jesse Metcalfe</a>

Par contre, il y a un autre moyen de générer des slideshows rapidement et simplement avec TripTracker slideshow, c'est d'utiliser un bookmarklet. Attention, on ne définit pas les images miniatures/maxi à inclure, le script prend tous les liens qui ont pour cible une image dans un même "album". Cette technique n'est donc pas utilisable dans un billet isolé car sinon, en page d'accueil, toutes les images vont se retrouver dans l'album. C'est par contre très intéressant dans les galeries d'images. Il suffit alors de rajouter ce lien :

<a href="javascript:s=document.createElement('script');s.src='http://slideshow.triptracker.net/slide-bookmark.js';s.type='text/javascript';void(document.getElementsByTagName('head')[0].appendChild(s));">nom de votre lien</a>

Mieux... en bookmarkant ce lien dans vos favoris, lorsque vous visitez une galerie et que le webmaster n'a pas inclus de slideshow, il suffit de cliquer dans votre favoris/marque page et le script va construire un album sur la galerie d'images.

Du coup, j'ai aussi inclus ce script dans mes galeries ! En cliquant sur une miniatures, vous aurez le slideshow par la clearbox, en cliquant sur le lien situé au centre avant et après les miniatures, c'est le TripTracker slideshow qui se déclanche.

Sous DotClear 1 et avec le plugin Gallery, il suffit d'ouvrir le fichier /share/gallery/themes/default/galleryGal.php et à l'endroit où vous souhaitez voir apparaitre le lien, de rajouter ceci :

<div class="ttss">
<a href="javascript:s=document.createElement('script');s.src='http://slideshow.triptracker.net/slide-bookmark.js';s.type='text/javascript';void(document.getElementsByTagName('head')[0].appendChild(s));">TripTracker Slideshow</a>
</div>

puis d'éventuellement mettre une règle pour la classe ttss dans votre feuille de style afin de personnaliser la présentation.

C'est pas génial ?

Le script est gratuit mais il existe une version payante pour ceux souhaitant une version "unbranded".

Source originale/ Original post on : Un loup blessé par/by 1loup