Comment agrandir une image cliquable avec JQUERY (Animation Flash swf)



♦ Agrandissement d'une image ou photo avec jquery

(faites les dernières mises à jours sur votre ordinateur pour que flash player fonctionne correctement)

Voici un exemple de 3 photos et texte cliquables. Le fait de cliquer sur un de ces éléments va agrandir et placer au premier plan une image dans la partie centrale de votre page web avec des boutons de navigation.



Gallerie d'images avec zoom pour la plus grande (LinuxTux)


(Cliquez sur les photos et le texte ci-dessous pour la démonstration)



Voici le code html et javascript pour cette animation JQUERY:

Il vous sera facile de modifier le fichier html et de l'adapter à votre convenance avec un éditeur comme Notepad++.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agrandissement d'image avec Pirobox et jquery - Flash swf - Webinfotuto.free.fr</title>
<link href="css_pirobox/style_5/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery_1.5-jquery_ui.min.js"></script>
<script type="text/javascript" src="js/pirobox_extended_feb_2011.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.piroBox_ext({
	piro_speed :700,
	bg_alpha : 0.5,
	piro_scroll : true,
	piro_drag :false,
	piro_nav_pos: 'bottom'
});
});
</script>
</head>


<body>
<div style="float left; padding-left: 20px; display:block;">
<h2><a>Gallerie d'images avec zoom pour les plus grandes</a></h2>
<a href="img/windowsG.jpg" rel="gallery" class="pirobox_gall" title="Windows"><img src="img/windowsp.jpg"  /></a><br>
<a href="img/linuxtuxG.jpg" rel="gallery"  class="pirobox_gall" title="LinuxTux"><img src="img/linuxtuxp.jpg"  /></a><br>
<a href="img/clonezillaG.jpg" rel="gallery"  class="pirobox_gall" title="Clonezilla"><img src="img/clonezillap.jpg"  /></a><br><br>
</div>

<div style="float left; padding-left: 20px; display:block;">
<h2> <a style="text-decoration: none; color:#48484A;" href="img/windowsG.jpg" title="Windows" rel="gallery" class="pirobox_gall1"> <span style="font-size: 23px; color:#48484A;">Image Windows</span></a></h2>
<h2> <a style="text-decoration: none; color:#48484A;" href="img/linuxtuxG.jpg" title="LinuxTux" rel="gallery" class="pirobox_gall1"> <span class="span_f_c">Image Linux Tux</span></a></h2>
<h2> <a style="text-decoration: none; color:#48484A;" href="img/clonezillaG.jpg" title="Clonezilla" rel="gallery" class="pirobox_gall1"> <span class="span_f_c">Image Clonezilla</span></a></h2>
</div>

</body>
</html>

Utilisez des images au format JPG de préférence.
Il vous faut aussi télécharger le zip contenant les fichiers swf, js, et html à copier dans le même répertoire que votre page html.





0487894