Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» JavaScript et DOM
» Combinaison Galerie photo ( tutorial sur alsacreations) et JQzoom
Auteur
@TiK
# 13 Jul 2009 - 14:09:25
Citer
7 Posts
 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)
"From each according to his ability, to each according to his need."
http://www.crea2clic.net 
^
newverbal
# 15 Feb 2010 - 11:16:27
Citer
4 Posts
 personne ?
arff.. je suis super intéressé par ta question...
^
jo_link_noir
# 15 Feb 2010 - 14:27:38
Citer
187 Posts
 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

doc jquery, doc php (astuce : mettre php.net/ suivie du nom de classe ou fonction -> php.net/isset)
msn 
^
Prévenir un modérateur
Répondre au sujet
Aller à
Powered by Phedio v3.8.6 beta in 10.3 ms © dew