Débuter sur iWeb : l'effet FancyZoom

Effet FancyZoom

11 mars 10

FancyZoom permet d’afficher de façon simple et élégante une image au centre de votre navigateur. Il existe d’autres méthodes pour ajouter FancyZoom sur des pages générées par iWeb mais celle décrite ici a pour principal avantage de ne pas devoir éditer avec un éditeur de texte vos pages iWeb publiées. En contrepartie, elle impose à votre visiteur de complètement charger la page pour bénéficier de cet effet et a le mauvais goût d’afficher des légendes pourries sous les images (merci iWeb!). je dois l’astuce décrite ci-dessous à wyodor.net. Je l’ai un peu adaptée en imposant simplement des adresses absolues pour que cette méthode soit fonctionnelle pour tous les modèles de pages (bienvenue, fiche personnelle, blog, podcast, etc.) et pour le maximum d’utilisateurs d’iWeb (j’espère pour tous). Vous pourrez trouver un exemple au bas de cette page.

1.Télécharger le dossier zippé sur le site de FancyZoom.
2.dézippez-le
3.Renommez-le en «FancyZoom» sans guillemets (svp) tout simplement.
4.Mettez ce dossier FancyZoom :
‣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.)
‣MobileMe : dans le dossier Sites ( iDisk > Web >Sites)
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.
5.Devinez grâce à un peu de logique les adresses absolues des fichiers :
‣FancyZoom.js
‣FancyZoomHTML.js
‣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 :

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

MobileMe :

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

Orange :

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

free :

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

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 :
var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
par
var zoomImagesURI = 'http://ladresse_absolue_de_votre_fichier_zoom/'; // Location of the zoom and shadow images
Remplacer l’adresse (orange), oubliez pas de garder le «/» après zoom.
Par défaut, FancyZoom affiche des légendes sous les photos. Dans iWeb, ces légendes sont particulièrement moches, du type
nom_de_la_page_iweb_files/nom_de_limage.jpg (beuuurk !)
Pour les désactiver, remplacer true (vrai) par false (faux) dans la ligne 37
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.

7.ouvrez iWeb. Sur toutes les pages qui devront afficher cet effet dans un fragment HTML, collez le code suivant :
<script language="JavaScript" type="text/javascript">
<!--
// today
var bodyLoad = parent.document.getElementsByTagName("body")[0];
load = bodyLoad.getAttribute("onLoad");
bodyLoad.setAttribute("onLoad", load + "setupZoom();");
var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://ladresse_absolue_de_votre_fichier_FancyZoom.js';
headID.appendChild(newScript);
var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://ladresse_absolue_de_votre_fichier_ FancyZoomHTML.js';
headID.appendChild(newScript);
//-->
</script>
remplacer les adresses en orange sur le script ci-dessus.
8.Réduisez la taille de votre fragment HTML au minimu et placez le dans la zone d’entête.

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.