fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

Faire une galerie photo avec JQquey, dynamique, simple, paramétrable et 'SEO Friendly' en quelques clics.

Ici, une photo de base et quelques variations réalisées dans Photoshop et présentées à l'aide de ce plugin bien efficace.

La question est récurente dans les forums. Quelques explications, surtout présentations sont mises dans le blog. Vous allez donc pouvoir visualiser ici quelque exemple concret de la réalisation et de la personnalisation d'une petite galerie d'images dynamique et assez sympathique.

Un exemple illustré avec le code source du fonctionnement de cette galerie, ainsi que les liens pour télécharger gratuitement le script d'origine que vous pourrez aussi personnaliser...

Tous les éléments de la galerie sont contenus dans une seule et simple DIV (#gallery)
Une seule ligne de titre, par image. (IMPORTANT: reprise de l'attribut "title" de l'image qui apparait à l'écran, pas de celle de "alt" qui est renseignée cependant pour les moteurs)
Préparez correctement vos images, entrez quelques lignes de code et vous obtiendrez une galerie photos dynamique et totalement paramètrable, qui de plus sera "SEO Friendly" puisque plus qu'optimisée pour les moteurs et d'une très bonne vitesse d'affichage.
Vous pouvez en voir la démonstration ci-dessous réalisée à partir de quelques variations sur les images faites dans Photoshop.

Vous avez besoin d'appeler 2 scripts en Javascript pour la fourner tourner : jquery.gallerax-0.2.js et jquery-1.4.2.min.js, ceci dans la partie 'head' de votre page:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.gallerax-0.2.js"></script>


On appelle également une feuille se style CSS ( <link rel="stylesheet" type="text/css" href="example1.css" /> ) pour donner et gérer le look de la galerie

Le code source, de cette page, dans la partie 'body' à personnaliser selon vos images :

<p><div style="padding:10pt; border:thin solid black; width:100%;">
<div id="gallery">
<img class="output" src="images/photo-couleurs.jpg" alt="" />
<span class="caption">Cascades du Saut du Loup, Photo couleur</span>
<ul class="thumbnails">
<li><img class="active" src="images/photo-couleurs.jpg" title="Photo couleur et fond d'&eacute;cran" alt="Photo couleur et fond d'&eacute;cran" width="100" height="67" /></li>
<li><img src="images/photo-negatif-couleur.jpg" title="Photo négatif couleur" alt="Photo négatif couleur" width="100" height="67"/></li>
<li><img src="images/photo-noir-et-blanc.jpg" title="Photo noir et blanc" alt="Photo noir et blanc" width="100" height="67"/></li>
<li><img src="images/photo-negatif-noir-et-blanc.jpg" title="Photo négatif noir et blanc" alt="Photo négatif noir et blanc" width="100" height="67"/></li>
<li><img src="images/photo-polaroid.jpg" title="Photo effet polaroid" alt="Photo effet polaroid" width="100" height="67"/></li>
<li><img src="images/photo-sepia.jpg" title="Photo effet sépia" alt="Photo effet sépia" width="100" height="67"/></li>
<li><img src="images/photo-camera-infra-rouge.jpg" title="Photo caméra infrarouge" alt="Photo caméra infrarouge" width="100" height="67"/></li>
<li><img src="images/photo-pop-art.jpg" title="Photo Pop Art" alt="Photo Pop Art" width="100" height="67"/></li>
</ul>
<br class="clear" />
</div>
<script type="text/javascript">

$('#gallery').gallerax({
outputSelector: '.output', // Output selector
thumbnailsSelector: '.thumbnails li img', // Thumbnails selector
captionSelector: '.caption' // Caption selector
});

</script>

</p>
</div>
<p>


Vous ne voyez ici qu'une seule "variante" de ce script, mais il peut être totalement personnalisable selon vos désirs. Il vous suffit de télécharger la source directement sur le site d'origine. Dans la page que vous découvrirez, choisissez "gallerax" pour obtenir le bon zip.

 

Ils existent des foules de scripts pour réaliser une galerie photos, celui-ci est surtout parmis les plus rapides.

Prenez le temps de tester ces curseurs, essayez par exemple de surligner une ligne de cette poésie prise sur le Net ... Vous verrez de suite les propriétés de chaque curseur personnel.

Si cela vous plait, pas de problème, vous pouvez toujours commenter ou demander de l'aide, mais n'en abusez pas ! En allant sur le post récapitulatif sur le blog . @ bientôt :-)