En pratique :


  1. 1.Télécharger le dossier zippé sur le site de FancyZoom.

  2. 2.dézippez-le

  3. 3.Renommez-le en «FancyZoom» sans guillemets (svp) tout simplement.

  4. 4.Mettez ce dossier FancyZoom : 

  5. FTP : dans le dossier racine de votre FTP (dossier web, www ou Public_html  dans la plupart des cas) via un client FTP (cyberduck, transmit, FileZilla etc.)

  6. MobileMe : dans le dossier  Sites ( iDisk > Web >Sites)

  7. Dans la plupart des cas, que ce soit le dossier racine de votre FTP ou le dossier Sites de MobileMe vous devez trouver une page index.html et le dossier NomdeSite de votre site iWeb.

  8. 5.Devinez grâce à un peu de logique les adresses absolues des fichiers :

  9. FancyZoom.js

  10. FancyZoomHTML.js

  11. et du dossier zoom

Si vous avez respectez ce que j’ai écrit voici ce que ça peut donner  si votre site est sur  un FTP avec un nom de domaine, MobileMe, Orange ou Free :

Site avec un nom de domaine :

  1. http://www.votrenomdevotredomaine.com/FancyZoom/js-global/FancyZoom.js

  2. http://www.votrenomdevotredomaine.com/FancyZoom/js-global/FancyZoomHTML.js

  3. http:///www.votrenomdevotredomaine.com/FancyZoom/images-global/zoom/

MobileMe :

  1. http://web.me.com/votrepseudo/FancyZoom/js-global/FancyZoom.js

  2. http://web.me.com/votrepseudo/FancyZoom/js-global/FancyZoomHTML.js

  3. http://web.me.com/votrepseudo/FancyZoom/images-global/zoom/

Orange :

  1. http://pagesperso-orange.fr/votrepseudo/FancyZoom/js-global/FancyZoom.js

  2. http://pagesperso-orange.fr/votrepseudo/FancyZoom/js-global/FancyZoomHTML.js

  3. http://pagesperso-orange.fr/votrepseudo/FancyZoom/images-global/zoom/

free :

  1. http://votrepseudo.free.fr/FancyZoom/js-global/FancyZoom.js

  2. http://votrepseudo.free.fr/FancyZoom/js-global/FancyZoomHTML.js

  3. http://votrepseudo.free.fr/FancyZoom/images-global/zoom/


  1. 6.éditer le fichier FancyZoom.js avec un éditeur de texte adapté pour le code ( cad surtout pas TextEdit , préférer Smultron, textWrangler, TextMate etc. )
    remplacer la ligne 44 :

  2. var zoomImagesURI   = '/images-global/zoom/'; // Location of the zoom and shadow images

  3. par

  4. var zoomImagesURI   = 'http://ladresse_absolue_de_votre_fichier_zoom/'; // Location of the zoom and shadow images

  5. Remplacer l’adresse (orange), oubliez pas de garder le «/» après zoom.


  6. Par défaut, FancyZoom affiche des légendes sous les photos. Dans iWeb, ces légendes sont particulièrement moches, du type

  7.     nom_de_la_page_iweb_files/nom_de_limage.jpg (beuuurk !)

  8. Pour les désactiver, remplacer true (vrai) par false (faux) dans la ligne 37

  9.     var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTML


    A noter, les numéros de lignes indiqués ci-dessus peuvent changer dans votre version de FancyZoom.


  1. 7.ouvrez iWeb. Sur toutes les pages qui devront afficher cet effet dans un fragment HTML, collez le code suivant :

  2. <script language="JavaScript" type="text/javascript">

  3. <!--


  4. // today


  5. var bodyLoad = parent.document.getElementsByTagName("body")[0];

  6. load = bodyLoad.getAttribute("onLoad");

  7. bodyLoad.setAttribute("onLoad", load + "setupZoom();");


  8. var headID = parent.document.getElementsByTagName("head")[0];

  9. var newScript = parent.document.createElement('script');

  10. newScript.type = 'text/javascript';

  11. newScript.src = 'http://ladresse_absolue_de_votre_fichier_FancyZoom.js';

  12. headID.appendChild(newScript);


  13. var headID = parent.document.getElementsByTagName("head")[0];

  14. var newScript = parent.document.createElement('script');

  15. newScript.type = 'text/javascript';

  16. newScript.src = 'http://ladresse_absolue_de_votre_fichier_ FancyZoomHTML.js';

  17. headID.appendChild(newScript);


  18. //-->

  19. </script>

  20. remplacer les adresses en orange sur le script ci-dessus.

  21. 8.Réduisez la taille de votre fragment HTML au minimu et placez le dans la zone d’entête.



  1. 9.sélectionnez une image de votre page et via l’inspecteur de lien, faites un lien vers une image de votre Finder :
    inspecteur > inspecteur de lien > Onglet lien > Cocher «activer comme lien» > dans le menu «Lier vers : » choisir «un fichier» > choisir une image dans votre Finder.



  1. 10. Publier


Exemple :




 


Source :

Wyodor (en anglais). Merci à lui.

 

Commentaires   |   Accueil     Archives     Précédent     Suivant    Forum     Mon Twitter     Débuter sur Mac