Police: A+  A-  A

Magnifique Script à effet de Zoom : Fancy Zoom

Par niss • 2 mar, 2008 • Catégorie: Customisations

On continu sur la lancée des scripts à tomber par terre qui vont bien pour customiser vos thèmes adorés de la plus jolie des manière, et cette fois ci, il s’agit de Fancy Zoom, développé par Cabel.name.

Ce plugin a pour effet de réaliser un zoom avec effet Lightbox (mais quel effet!) sur toutes les liens pointant vers des images présents sur votre site. C’est à dire, les liens qui ont la forme suivante :

  1. < a href="image.jpg">< img src="image-thumbnail.jpg" />< /a>

Pour ce faire, il vous suffit d’ajouter ce morceau dans votre header.php : (en remplacement de votre balise <body….> : onload=”setupZoom()”

  1. < […] onload="setupZoom()">

Si vous ne souhaitez pas pas qu’une image bénéficie de cet effet, alors dans votre balise href ajoutez juste : rel=”nozoom”

Ce script fonctionne avec tous les types d’images et il fonctionne également pour tu un hyperlien texte pointant sur une image. Pour bénéficier de la légende qui va bien en dessous de l’image, ajoutez juste un tag “title” dans votre href.

Veuillez télécharger le fichier suivant : FancyZoom 1.1.zip
Puis n’oubliez pas de déclarer les deux scripts suivants dans votre header.php, avant la balise /head :

  1. < script src="/js-global/FancyZoom.js" type="text/javascript">< /script >
  2. < script src="/js-global/FancyZoomHTML.js" type="text/javascript">< /script>

Pour une démo, rendez-vous par là ;)

Ce script est offert gracieusement par son auteur, uniquement pour les sites à but non commercial. Si vous avez un site commercial, il vous en coûtera 39$ pour acquérir la licence pour un site.

Partagez cette page:

Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.
  • blogmarks
  • Blogasty
  • Wikio
  • MisterWong Fr
  • BlogMemes Fr
  • Linkertop
  • Fuzz
  • Digg
  • del.icio.us
  • Technorati
  • Tapemoi
  • Netvouz
  • DZone
  • ThisNext
  • Wists

Articles Relatifs

Marqué comme: ,

niss est le Webmaster de (niss.fr)
Email à cet auteur | Tous les Articles par niss

41 Responses »

  1. Superbe et ca marche avec le slide ?? ;-)

  2. Je sais pas, faudrait tester :D

  3. pourquoi ça ne marche pas chez moi? j’ai ajouté dans le header de mon thème:

    juste avant
    et
    à ma place de

    j’ai envoyé le contenu du zip par ftp sur le root de mon site
    il y a un dossier mac dans ce zip
    j’ai aussi essayé de ne mettre que ce que contient FancyZoom 1.1
    mais rien à faire ça ne va pas, exemple d’une de mes images:

    où est mon erreur? faut il pointer vers 2 images pour que ça fonctionne? une miniature et l’autre?
    merci pour votre aide :-)

  4. As tu crée un répertoire /js-global/ dans lequel tu as collé les 2 js? As tu déclaré ensuite ces 2 js dans ton header?
    D’autre part, je le répète, il faut que le href pointe sur une image, comme indiqué dans l’article… Si tu fais pointer une image vers une page, ça ne marchera pas. Enfin oui, il faut que que ton image sur laquelle on clique soit une miniature (ou un redimensionnement) de l’image vers laquelle pointera le href… Enfin d’après ce que j’ai compris et ce que j’ai pu tester… Ou alors que ce soit un lien texte sur lequel on clique et qui pointera sur une image.

  5. merci pour ton aide, mais rien à faire ça ne fonctionne pas
    je pige pas pourquoi …
    dans l’image, j’ai bien mis le href vers la même image en la redimensionnant …
    dans la fin de mon header il y a:
    *?php wp_head(); ?**

    *script src=”/js-global/FancyZoom.js” type=”text/javascript”> < par * **)
    et j’ai envoyé les 2 js ds js-global

  6. voici la fin de mon header

    ¤
    *script src=”/js-global/FancyZoom.js” type=”text/javascript”> < par * **)
    et j’ai envoyé les 2 js ds js-global

  7. pfff j’arrive pas à insérer ce texte … pourtant je ne suis pas tout à fait un débutant …

  8. Tu as 2 scripts à déclarer, dans header.php, juste avant

    </head>

    Les 2 lignes à déclarer sont celles ci :

    <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
    <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

    Puis après, il faut que ta ligne :

    <body […] >

    par

    <body id="fancyzoom" […] onload="setupZoom()">

    Si tu as fait tout ça, il n’y a pas de raison que ça ne fonctionne pas. Ou alors c’est que tu as une incompatibilité avec un plugin ou un truc du style…

  9. Essaye plutôt ça pour les 2 scripts :

    <script src="<?php bloginfo('template_url'); ?>/js-global/FancyZoom.js" type="text/javascript">
    <script src="<?php bloginfo('template_url'); ?>/js-global/FancyZoomHTML.js" type="text/javascript">
  10. Salut Steph,

    j’avais installé ce plugin quand j’ai changé mon thème, mais le soucis c’est qu’il désactive mon système d’onglets sur la sidebar : http://img369.imageshack.us/img369/2118/twixxer036ui0.png
    (image parce que je désactive le truc pour avoir mes onglets en attendant ^^)

    J’ai beau chercher et tester ça ne fonctionne pas. J’ai l’impression que dés qu’il y a un ID dans la balise body ça plante. Une idée? moi j’ai épuisé les miennes :)

  11. Yep monsieur, je crois que je viens de te trouver une solution :p

    En fait, tu vire le onload=”setupZoom()” de la balise body et à la place, tu le mettras à l’intérieur de tes balises images directement. Ce qui fait que tes balises a/img devront ressembler à ça :

    <a href="http://127.0.0.1/wp-content/uploads/2008/04/ai.jpg" ><img src="http://127.0.0.1/wp-content/uploads/2008/04/ai-150x150.jpg" onload="setupZoom()" /></a>

    Bon, j’ai laissé exprès les url complètes de mes tests en local, mais j’imagine que tu as compris le principe… En fait on appelle le script SetupZoom() que lorsqu’on en a effectivement besoin. Testé en local, ça fonctionne ;)

  12. J’y avais pensé aussi, le soucis c’est comme je te dis, rien ne semble possible dans la balise body, donc même le id=”fancyzoom” seul fait que mon module à onglets ne fonctionne plus ;) Bizarre hein ?

    En tous cas merci d’avoir fait des tests :)

  13. Mais tu n’as pas besoin d’utiliser id=fancyzoom… N’utilise pas le plugin fait par Wpelements, utilise le pack que j’ai mis dans l’article ainsi que le tuto

  14. Je viens de réessayer, toujours pareil ^^

    Pourtant je suis bien la procédure, j’insére les 2 lignes dans le header, j’ai vérifier les chemins d’accès aux dossiers, et j’applique le onload dans l’image … mais que dalle :)

  15. Tu pourrais me coller le code exact que tu as inséré dans le header.php?
    Et puis une chose que je voudrais vérifier : colle nous le code où tu as mis onload=setupzoom.

    Tu as bien viré le ID et le onload dans la balise body?
    Tu as bien desactivé le plugin de wpelements?

    Enfin, dernière chose, utilises tu un plugin de gestion d’images ou de galeries? Si oui, lequel?

  16. vraiment pas mal ce script !
    je cherche a le mettre sur un site pour un photographe mais je n’arrive pas a le faire fonctionner, je voulais savoir si il doit se placer sur une page en .html ou une page en .php

  17. […] des images. Puis, lors d’une de mes visites sur le blog de Niss, j’ai découvert l’effet Fancy Zoom qui est une magnifique autre manière d’afficher des photos. Cet après-midi, alors que […]

  18. salut,

    Moi j’ai un petit probleme. Quand une image se trouve à cote d’une video, et que je l’agrandi, l’image passe en dessous de la video et donc en fait, ne se voit plus. Bon c’est sur c’est pas enorme comme probleme mais cela peut etre genant. Auriza vous une solution ?

    Merci d’avance.

  19. Salut,

    Je te remercis déjà pour ton blog, il m’a rendu grandement service.
    J’utilise ton themes WP Premium et j’ai mit fancy zoom, ca fonctionne tres bien sauf que des lors les onglets de recherche archives categories en haut a droite ne marche plus…

    en enlevant dans la balise onload=”setupZoom()” ca refonctionne, j’ai essaye plus trucs, mais rien, as-tu une idée ? si je trouves de mon coté je fais parts.

    a++
    nico

  20. Bonjour,
    j’ai installé ce super script qui marche très bien, merci pour les infos
    j’ai juste un soucis dans Safari je n’affiche pas l’image closebox, un point d’interrogation à la place et dans Firefox les 4 coins sont marqués de rectangles étranges
    une idée pour régler ça ?

    merci

  21. bonsoir,

    j ai moi aussi un prbleme avec ce plugin
    j’ai decompressé le fichier telechargé, et mis le reperetoire avec les deux sous repertoire dans le repertoire plugin de wordpress

    j ai modifié comme indiqué le contenu de head et la ligne body

    ca ne marche pas, surtout je suis tres surpris de ne pas retrouver le plugin dans la liste des extensions et donc de ne pas pouvoir l’activer comme c’est le cas d habitude

    ou ai je fait une erreur ?

    merci par avance

    pascal

  22. la fancyzoom marche bien mais si je mets un player dailymotion par exemple les images s’ouvrent mais passent en dessous du player
    comment faire ?

  23. Bonjour,

    Les scripts fancy Zoom ne fonctionnent pas sur ma page.
    En fait, j’ai essayé de voir d’où provient cela. Je pense qu’il y a une incompatibilité lors de la présence de la libraire mooTools !
    Quelqu’un peut confirmer, et comment résoudre le problème.

    Merci par avance.

  24. personne n’a de réponse à mon problèmes ? =(

  25. Bonjour
    Comme Mic, le n’arrive pas à faire affiche le closebox.
    Quel lien faut-il entrer?Peut-on le mettre à droite plutôt qua gauche?
    Merci de votre aide

  26. Ce script a quand-même un petit bug: c’est l’adressage des répertoires où se trouvent les scripts.

    Au lieu de

    il faut écrire:

    Bien entendu il fait de la même manière avoir:

    var zoomImagesURI = ‘./images-global/zoom/’; // Location of the zoom and shadow images

    dans le fichier FancyZoom.js

    avec le “.” avant le “/”.

    Certaines machines n’arrivent pas à localiser le répertoire si l’on oublie le poit

  27. Bonjour à tous,
    Je viens de télécharger fancyzoom et je voulais savoir si quelqu’un pouvait me guider pas à pas pour l’utiliser.
    Est-ce que ma page doit être en php ?
    Enfin bref, je n’y comprends rien et pourtant ca à l’air simple. Donc s’il vous plait aidez-moi.
    Garance.

  28. en test je vais essayé avec.merci bcp ;) ;)

  29. Chez moi ça marche non plus ! :(

    Je crois que dans les balises “<a hre=’ ‘” il faut maitre qq chose d’autre… si on métra lien vers un image il va ouvrir l’image !

  30. Bonjour !!! =)
    juste une petite question, est-ce que quelqu’un saurait comment faire cet effet:
    http://www.yollgraphiks.com/portfolio_print.php?page=portfolio_print
    (yacht)

    En gros, comment avoir plusieurs images dans une même fenetre d’agrandissement, avec des flèches de navigation ?

    merci ^^

  31. Génial, mais ne fonctionne pas en local.
    Avec IE8, l’ombre portée, le closebox et le zoom-spin n’apparaissent pas mais ce n’est pas bien gênant.

  32. Bonjour,
    Je trouve ce script génial et je l’utilise sur mon site.
    Il fonctionne avec Ie8 avec les réserves énoncées et avec Firefox de la même façon.

    Mais de temps en temps je rencontre le problème suivant, avec Firefox; lorsque plusieurs vignettes, associées à des images en grand format, sont présentes sur la même page, il se produit un effet mémoire…
    Je m’explique; la seconde image agrandie reste au format de la précédente, ce qui est très gênant. On se retrouve ainsi avec une image toute déformée. Si la première image était au format portrait, la seconde qui est au format paysage se retrouve déformée en portrait.
    J’ai le problème avec cette page, uniquement avec Firefox qui est mon navigateur par défaut:
    http://www.meslibellules.fr/voyages/cambodge/brachyth_contam/brachyth_contam.php

    Je n’y connais rien script, mais apparemment de temps en temps la dimension de la box ne se réinitialise pas avant d’afficher une autre image…
    Et ceci pour une page que je viens de faire (c’est arrivé d’autres fois) alors que les autres pages qui fonctionne avec le même script fonctionnent parfaitement.

    Si quelqu’un a une idée…

  33. (-
    J’ai trouvé la solution… que je ne comprends absolument pas.
    Il faut que les photos ne soient pas dans le même dossier que la page web qui les appelle.
    C’est tout.

  34. je n’y comprends rien et pourtant ca à l’air simple. Donc s’il vous plait aidez-moi.

  35. ?? :D Bonjour

    le script est sympa, par contre, marche -t-il sur une page Html dans un ou faut-il un code css?
    merci d’avance

    =+ =+ =+ oo :xa:

  36. Bonjour,

    Le script fonctionne chez moi mais malheureusement les petites icônes dans les coins de l’image après zoom ne s’affichent pas.
    J’ai essayé de changer le chemin d’accès dans le script FancyZoomHTML sans succès.
    J’ai essayé de changer de place le dossier ou son stockées les icônes, et ca ne marche pas non plus…
    Pourtant je l’ai mis à beaucoup d’endroit différents dans l’arborescence de mon site mais les icônes ne s’affichent jamais…
    Je l’ai également renommé puisque dans le script le dossier appelé est “/images/…” et rien non plus.

    Avez vous eu ce problème?

  37. Bonjour , je voudrais bien installer fancy zoom ,mais je suis nul, Pourriez vius me faire parvenir un tuto détaoillé, je n’ai pas de php.

    Merci de votre au=ide

  38. Si la première image était au format portrait je n’y nike air jordan comprends rien et pourtant ca à l’air simple indiqué le contenu de head et la ligne body

  39. si quelqu’un pouvait m’aider. J’essaye, mais rien ne marche. Comment mettre les scripts dans un fichier js-global.html
    etc……
    Si une personne se penche sur mon cas je l’en remercie par avance.

  40. J’ai essayé de changer de place le dossier ou son stockées les icônes surtout je suis tres surpris de ne pas retrouver le Timberland pas cher plugin dans la liste des extensions

  41. Enfin d’après ce que j’ai compris et ce que j’ai pu tester… http://www.stjeanbaptiste-ajaccio.fr Ou alors que ce soit un lien texte sur lequel on clique et qui pointera sur une image.

Laisser un Commentaire

Pour insérer du Code: Encadrez votre morceau de code par le caractère "¤" (Alt Gr+$) (ex: ¤Le Code¤ ) - Puis laisser une ligne blanche avant et après le bloc ¤Le Code¤.

;) :o )) -(( (- :( :(( =+ :(: :) :p &) :idee: oo ç) :xa: ?? :grr: :!!!: ;( :D