11548 sujets

JavaScript, DOM et API Web HTML5

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:


  $("#"+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)
Salut,

Ça fait exactement ce que tu veux, mais trop tard...

J'imgine que l'appelle des script ce fait comme ça
appelle jquery
appelle jqzomm
le code si-dessus

Dans ce cas quand le plugin JQzoom est appelé il va chercher toutes les class avec jqzoom (et il n'y en a aucunes). Puis après tu modifies le dom pour ajouter des jqzoom, mais c'est trop tard, le plugin ayant déjà fini son travail.

Donc soit il faut relancer JQzoom (mais faut voir dans le code du plugin), soit changer l'ordre d'appel :
appelle jquery
le code si-dessus
appelle jqzomm