Une gallerie de photo avec zoom

Ça peut être compliqué parfois de faire des choix lorsque l’on veut présenter des photos pour illustrer un produit. J’ai ma galerie c’est bien, mais comment l’utilisateur peut voir le détail ? En cliquant dessus pour afficher une lightbox ? Oui mais dans ce cas, comment, comment voir les détails de la photo sans masquer la page ? La réponse est : zoomons.

Il y a quelque temps, j’ai mixé l’utilisation de Zoom avec celle de galleriffic pour obtenir les diapos photo des fiches occasions de http://motodepotvalence.fr/. Du coup, je partage 🙂

Prérequis

Pour y arriver, il faut :

Structure HTML

Dans mon exemple, j’ai la structure HTML suivante : 

<div id="gallery" class="gallery">
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow clearfix"></div>
	</div><!--/ .slideshow-container-->
	<div id="thumbs" class="clearfix">
		<ul class="thumbs list-image clearfix">
			<li>
				<a class="thumb" name="leaf" href="/images/occasions/big/6886-IMGP5353.JPG" title="Title 0">
					<img src="/images/occasions/tiny/6886-IMGP5353.JPG" title="6886-IMGP5353.JPG" alt="6886-IMGP5353.JPG" id="" class="" />
				</a>
			</li>
			<li>
				<a class="thumb" name="leaf" href="/images/occasions/big/1281-IMGP5354.JPG" title="Title 0">
					<img src="/images/occasions/tiny/1281-IMGP5354.JPG" title="1281-IMGP5354.JPG" alt="1281-IMGP5354.JPG" id="" class="" />
				</a>
			</li>
			<li>
				<a class="thumb" name="leaf" href="/images/occasions/big/7773-IMGP5356.JPG" title="Title 0">
					<img src="/images/occasions/tiny/7773-IMGP5356.JPG" title="7773-IMGP5356.JPG" alt="7773-IMGP5356.JPG" id="" class="" />
				</a>
			</li>
		</ul><!--/ .thumbs-->
	</div><!--/ #thumbs-->
</div><!--/ #gallery-->

L’idée, c’est d’avoir d’abord mon slideshow-container qui va contenir l’image principale, puis les thumbs en dessous, à savoir les miniatures.

Point de vue CSS, on applique la CSS par défaut de galleriffic, aux ajustements de tailles près…

Côté javascript

Galleriffic

De ce côté là, les choses sont également assez simples puisque l’on va utiliser l’implémentation standard de galleriffic :

var gallery = $('#thumbs').galleriffic({
		imageContainerSel:         '#slideshow',
		//D'autres options
	},
	onPageTransitionOut: function() {
		//Code exécuté lors d'une transition
	}
	onPageTransitionIn: function() {
		//Code exécuté lors d'une transition
	}
});

Il va comprendre tout seul qu’il faut mettre dans le container (défini par imageContainerSel) la cible des images miniatures (défini par $(‘#thumbs’).galleriffic).

Zoom

Bon, maintenant c’est bien ça fonctionne. Seulement on ne peut pas encore zoomer sur les photos.
Pour le faire, on va utiliser également le code par défaut :

$(document).ready(function(){
  $('a.photo').zoom({
    url: 'photo-big.jpg', //chemin de la photo haute déf
    callback: function(){
      $(this).colorbox({href: this.src});
    }
  });
});

Oui mais comment ? Ma galerie est générée au chargement de la page, et le code javascript est dans un fichier à part. Du coup, je ne sais pas à l’avance quelle photos vont être utilisées et je ne peux pas le définir au moment de charger ma page.

Mixer Galleriffic et Zoom

MAIS ! Vous aurez noté que dans la structure HTML j’ai rangé mes images dans différents dossiers. En fait, en développant le backoffice avec Yii j’ai fait en sorte de générer pour une image uploadée différentes tailles, chacune rangée avec le même nom mais dans des répertoires différents. Respectivement :

  • tiny (la miniature)
  • big (s’affiche dans la page)
  • original (l’image originale)

Pour exploiter cette information, on va utiliser la propriété onPageTransitionIn de Galleriffic.
Comment ? En appliquant zoom à ce moment là :

onPageTransitionIn: function() {
	this.fadeTo('fast', 1.0);
	$('.slideshow-container').zoom({
	   url: $('.slideshow-container img').attr('src').replace('/big/','/originals/'),
	   callback : function(){
		   this.clearQueue();
	   }
	});
}

Vous l’aurez compris, on va juste jouer su les noms de répertoire. C’est pour ça qu’il était importan, lors de la génération des différentes tailles d’images, de garder la même nomenclature.

A ce moment-là, ce que Zoom va faire c’est placer en arrière plan de l’image affichée dans le container, l’image originale. Puis, au survol de la souris, il va afficher et déplacer l’originale en fonction de la position du curseur au sein du container.

Du coup il suffit ensuite de rappeler zoom() au click sur les miniatures pour changer l’image originale à l’aide de $(‘.thumb’).click().

Le code complet :

if($('#thumbs').length){
	var gallery = $('#thumbs').galleriffic({
		//Autres options
		imageContainerSel:         '#slideshow',
		//Autres options
		onPageTransitionOut:       function(callback) {
			this.fadeTo('fast', 0.0, callback);
		},
		onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
				$('.slideshow-container').zoom({
				   url: $('.slideshow-container img').attr('src').replace('/big/','/originals/'),
				   callback : function(){
					   this.clearQueue();
				   }
				});
		   }
	});
}
$('.thumb').click(function(){
   $('.slideshow-container').zoom({
	   url: $(this).find('img').attr('src').replace('/tiny/','/originals/'),
	   callback : function(){
		   this.clearQueue();
	   }
   });
});

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *