Bonjour!
J'ai récemment lu et appliqué le tutoriel sur la création d'une galerie d'image simple par Benjamin D.C. ( http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html ) et je me suis dis que ce serait sympa de le combiner avec JQzoom (disponible ici: http://www.mind-projects.it/projects/jqzoom/ )
Donc pour rappel le fonctionnement de la galerie réside dans la création d'un élément p dans lequel on insère la balise img, le code js qui effectue cette action est celui-ci:
Ainsi le xhtml fictif qui est créé ressemble à cela (si je ne me trompe pas):
Or pour un fonctionnement avec JQzoom il faudrait un xhtml ressemblant à ceci:
Donc à mon avis il faut modifier le code javascript précédent, voilà où j'en suis:
Or cela ne fonctionne pas (et la galerie ne fonctionne plus par la même occasion). Je ne suis pas sûr de ma syntaxe, même si il est possible de créé un élément a avec un attribut class, j'ai juste essayé de m'inspirer de l'existant pour ajouter quelques balises car je ne connais pas le langage javascript.
Donc auriez-vous des idées/indications pour rendre ce script fonctionnel?
Merci d'avance!
Modifié par @TiK (13 Jul 2009 - 14:14)
J'ai récemment lu et appliqué le tutoriel sur la création d'une galerie d'image simple par Benjamin D.C. ( http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html ) et je me suis dis que ce serait sympa de le combiner avec JQzoom (disponible ici: http://www.mind-projects.it/projects/jqzoom/ )
Donc pour rappel le fonctionnement de la galerie réside dans la création d'un élément p dans lequel on insère la balise img, le code js qui effectue cette action est celui-ci:
$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
.append(
$(document.createElement("img")).attr({
alt: "",
src: firstThumbLink.attr("href")
})
)
);
Ainsi le xhtml fictif qui est créé ressemble à cela (si je ne me trompe pas):
<p id="viewer"><img alt="" src="chemin vers l'image en gros"/></p>
Or pour un fonctionnement avec JQzoom il faudrait un xhtml ressemblant à ceci:
<p id="viewer">
<a href="chemin vers une image encore plus grosse" class="jqzoom">
<img alt="" src="chemin vers l'image en gros"/>
</a>
</p>
Donc à mon avis il faut modifier le code javascript précédent, voilà où j'en suis:
$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
.append(
$(document.createElement("a"))
.attr({
href: "chemin image très grosse",
class: "jqzoom"
})
.append(
$(document.createElement("img")).attr({
alt: "",
src: firstThumbLink.attr("href")
})
)
)
);
Or cela ne fonctionne pas (et la galerie ne fonctionne plus par la même occasion). Je ne suis pas sûr de ma syntaxe, même si il est possible de créé un élément a avec un attribut class, j'ai juste essayé de m'inspirer de l'existant pour ajouter quelques balises car je ne connais pas le langage javascript.
Donc auriez-vous des idées/indications pour rendre ce script fonctionnel?
Merci d'avance!
Modifié par @TiK (13 Jul 2009 - 14:14)