Tutoriel Une galerie d'images simple avec jQuery

Bonjour,

Je vous préviens, je n'y connais absolument rien en js... Je souhaiterais savoir comment on fait pour changer la place du viewer.

En effet j'ai créé un tableau avec dans la première colonne toutes les miniatures et je souhaiterais mettre le viewer dans la seconde colonne.

Voici mon code actuel:

<table>
<tr>
<td width="130">
<!--CAROUSEL VERTICAL-->
<div style="width: 130px; height:330px; overflow: scroll; border: 0px #999999 solid; background-color: #f4f4f4;">
<table>

<?php
echo "<ul id=\"thumbs\">";
echo"<li>
<a href=\"../photo_defo/$photo\">
<img src=\"../photo_defo/$photo\" width=\"100\" border=\"0\">
</a>
</li>";
if (is_dir("album/$id_v $marque $modele")) {
$dossiercourant=opendir("album/$id_v $marque $modele");
while ($file = readdir($dossiercourant)) {
if ($file != "." && $file != "..") {
echo"
<li>
<a href=\"album/$id_v $marque $modele/$file\">
<img src=\"album/$id_v $marque $modele/$file\" width=\"100\" border=\"0\">
</a>
</li>";
}}}echo "</ul>";
?>

</table></div>

</td>
<td width="500">
<img src="../photo_defo/<?php echo "$photo";?>" border="0" width="500"/>
</td>
<td width="254">[/code]

Puis autre chose dans d'autres colonnes...

Pour l'instant dans la colonne où je souhaite mettre le viewer, j'ai mis une photo par défaut:
<img src="../photo_defo/<?php echo "$photo";?>" border="0"



Et mon code .js:
jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "images/loader.gif"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title");
elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
},
loader = $(document.createElement("img")).attr({
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
});

highlight(firstThumbLink);

$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
.append(
$(document.createElement("img")).attr({
alt: "",
src: firstThumbLink.attr("href")
})
)
);

var imgViewer = $("#"+settings.imgViewerId),
bigPic = imgViewer.children("img");

thumbLinks
.click(function(e){
e.preventDefault();
var $this = $(this),
target = $this.attr("href");
if (bigPic.attr("src") == target) return;
highlight($this);
imgViewer.html(loader);
bigPic
.load(function(){
imgViewer.html($(this).fadeIn(250));
})
.attr("src",target);
});

});

Si j'ai bien compris il faudrait changer le after (en rouge) qui signifie que le viewer va être aprés les miniatures.
Mais je ne vois pas par quoi remplacer pour mettre à côté ou si c'est possible mettre carément dans une autre colonne. mais bon a côté ça serai déjà pas mal...
Modifié par boubeuch1 (05 May 2010 - 15:38)

Bonjour,

Tu peux positionner ton viewer grâce au css.
Ne touche surtout pas au code javascript, le "after" dit simplement qu'il créé l'élément viewer à la suite de tes miniatures mais ne permet pas de dire où il se place.

Il suffit d'ajouter l'id #viewer dans le tableau ou sera créé ta photo en grand format :

<p id="viewer">
<img src="../photo_defo/<?php echo "$photo";?>" border="0" width="500"/>	
</p>

J'ai mis ton image par defaut dans une balise "p" car le ton code javascript précise bien qu'il créé une balise "p". Donc c'est pour que tu puisses le placer sans problème.
ensuite dans ton code css, tu peux placer ton viewer comme tu veux:

#viewer{
position: absolute;
top:150px;
left:500px;}

N'oublie pas d'enlever ton image par défaut avant de tester ta galerie.
voilà, j'espère que j'ai pu t'aider.

Merci beaucoup pour ton aide ça fonctionne. Faut juste que je bidouille un peu la position et c'est parfait merci...

Bonjour boubeuch1,

Merci de relire les règles du forum et de baliser correctement le code que tu présentes à la communauté (dans un soucis de meilleur lisibilité) et d'ajouter le tag [résolu] dans le titre de ton sujet puisque celui-ci semble avoir trouvé une heureuse issue

(Régle 13 puis 5)

Cdt,
Sylvain

J'attaque le style graphique banzaiiii !!!

Merci pour cette bonne recette de cuisine Benjamin D.C.
Modifié par nik0 (22 May 2010 - 18:25)