[Résolu]

[Coolsinus]

Bonsoir,
Je serai bref, j'ai fais un site sur iWeb pour une presentation lundi, et je peux faire tout ce que je veux a l'exception d'une chose : je voudrais avoir une image petite en apparence et pouvoir en cliquant dessus qu'elle s'agrandisse, et en re-cliquant qu'elle reprenne son apparence de base.

Est-ce possible ?
Si oui, ai-je besoin d'une implementation HTML ?
Si re-oui , pouvez-vous me fournir un bout de code qui marche.

C'est urgent, c'est pour lundi !

Merci d'avance a tous !!

[koeklin]

Bonjour,

1) ça? Effet lightbox-like
http://www.wyodor.net/_Demo/Fancy/Fancy2.html
Explication ici en anglais :
http://www.wyodor.net/blog/archives/...entry_308.html

2) ça? Zoom sur image là l'effet est au survol de la souris, il est sans doute adaptable au click de souris
http://www.jejavascript.net/imag_zoom.php
http://www.jejavascript.net/imag_zoom2.php

3) ou ça? Diaporamas
http://iweb.debutersurmac.com/diapo/one.html
http://iweb.debutersurmac.com/diapo/two.html
etc.

[Coolsinus]

Envoyé par koeklin

Bonjour,

1) ça? Effet lightbox-like
http://www.wyodor.net/_Demo/Fancy/Fancy2.html
Explication ici en anglais :
http://www.wyodor.net/blog/archives/...entry_308.html

C'est exactement ce qu'il me faut, par contre ça m'a l'air un peu compliqué, surtout la partie qui dit que l'on doit implementer le dossier FancyZoom 1.1 dans les "racines" du serveurs...
Donc il faut que je l'upload dans mon compte MobileMe ?

Autrement après mettre le code et tout cela ne devrait pas trop poser de problemes.

Merci pour avoir pris le temps de chercher

[koeklin]

Finder > barre de menu > Aller > iDisk > Mon iDisk
iDisk > Web > Sites
dans ce dossier Sites se trouvent déjà
un fichier index.html
un dossier au nom de votre site

Glissez donc le dossier FancyZoom dans ce dossier Sites les fichiers javascript auront auront comme URL

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

etc.

Sur MobileMe vous ne pouvez utilisez le code de Wyodor tel qu'il écrit
sauf si vous avez un nom de domaine correctement configuré

Si vous avez une adresse en web.com/votre_pseudo et non en www.votrenomdedomaine.com

<script language="JavaScript" type="text/javascript">
<!--

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://web.me.com/votre_pseudo/FancyZoom/js-global/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://web.me.com/votre_pseudo/FancyZoom/js-global/FancyZoomHTML.js';
headID.appendChild(newScript);

// -->
</script>

remplacez votre_pseudo dans le code ci-dessus

[Coolsinus]

Merci beaucoup j'essaye de ce pas !

[koeklin]

faites gaffe, j'ai beaucoup édité mon message précédent

[Coolsinus]

Ah oui merci. Mais ca ne marche pas, j'ai suivi les instructions :

J'ai ajoute :

../FancyZoom

avant

/images

dans le fichier FancyZoom.js

Puis justement, je ne voyais pas ce qu'il fallait recopier dans le code a mettre dans le HTML Widget, et j'allais poster quelque chose ici, et j'ai vu ce que tu as ecrit, je l'ai remplace le code precedant par le tien en mettant mon pseudo. J'ai mis les photos qu'il y a sur le site dans le dossier

/images-global/zoom

J'ai sauvegarde dans iWeb, j'ai uploader le site, et... CA NE MARCHE PAS ! Et je vais m'arracher les cheveux !

Le widget HTML avec le code dedans est sur une des pages au-dessus d'une photo, et voila ce qu'il y a dedans (mon pseudo est coolsinus):

<script language="JavaScript" type="text/javascript">
<!--

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://web.me.com/coolsinus/FancyZoom/js-global/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://web.me.com/coolsinus/FancyZoom/js-global/FancyZoomHTML.js';
headID.appendChild(newScript);

// -->
</script>

Le site est a l'adresse http://web.me.com/coolsinus/www.explosion.com

Car il n'y a pas www.explosion.com apres coolsinus dans :

newScript.src = 'http://web.me.com/coolsinus/FancyZoom/js-global/FancyZoom.js';

et

newScript.src = 'http://web.me.com/coolsinus/FancyZoom/js-global/FancyZoomHTML.js';

Est ce que cela peut etre la cause du pourquoi ca ne marche pas ?

Dans mon fichier Fancyzoom.js j'ai ajoute la ligne dont l'auteur du tuto parle :

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

Mais je ne l'ai mis que dans le fichier FancyZoom.js et non dans FancyZoomHTML.js

Voila, c'est beaucoup a verifier mais j'espere qu'on pourra faire marcher cela !
Merci une fois de plus

[Coolsinus]

Ah et qu'est ce qu'une adresse absolue ? (http://iweb.debutersurmac.com/siteiw...FancyZoom.html)

J'essaye de faire avec ce site la (c'est le votre?) mais je bloque sur les adresses absolues..

[koeklin]

Remplacez les chemins des fichiers par leur URLs, par ex.

var zoomImagesURI = 'http://web.me.com/coolsinus/FancyZoom/images-global/zoom/'; // Location of the zoom and shadow images

[Coolsinus]

Et comment on connait leur URLs j'ai du mal avec ca..

Ca marche !!! L'effet marche, enfin c'est la meme image qui se decale avec l'effet elle ne s'agrandie pas vraiment, mais il faut juste que je trouve une image plus grande a mettre en lien je crois, bref j'ai galere pendant des heures avec ton aide, merci beaucoup !!!

Voici a quoi ca ressemble (ca ne marche que sur la page que je vous ecris maintenant) : http://web.me.com/coolsinus/www.expl.../Contexte.html



EDIT : Eh bien... ca ne marche plus, j'ai donne l'adresse d'une autre image plus grande pour qu'elle soit remplacee et.. ca ne marche plus.. oh j'en ai marre

EDIT 2: Non en faite ca marche bien mais seulement sur Firefox !
Bref merci beaucoup beaucoup pour ton aide et tes reponses rapides !

[koeklin]

Les URLs sur MobileMe c'est simple :
L'URL du dossier Sites (iDisk/Web/Sites) c'est http://web.me.com/pseudoMobileMe

Admettons que vous mettiez dans ce dossier Sites un sous-dossier nommé "documents" dans lequel on trouve un fichier nommé "doc1.pdf"
On obtient pour ce fichier l'arborescence suivante
iDisk/Web/Sites/documents/doc1.pdf

l'URL de ce fichier doc1.pdf sera
http://web.me.com/pseudoMobileMe/documents/doc1.pdf

Si vous êtes paumé dans ce petit jeu, ce n'est pas grave; un client WebDAV à savoir CyberDuck peut vous donner d'un seul clic droit les URLs de vos fichiers.


Plus de détails sur cette page :
http://iweb.debutersurmac.com/siteiw...lient-FTP.html

[Coolsinus]

D'accord merci.

Oh faite une dernière petite chose, comment est ce que je peux faire pour enlever/changer la legende en-dessous de l'image ? Car ca fait un peu tache..

Merci d'avance

[koeklin]

Pour cela il faut ajouter

• 2 fichiers sur votre iDisk et récupérer leurs URLs :
  1. myPictures.js
  2. setTitle.js
• 2 lignes supplémentaires dans le code de votre fragment HTML

<script src="http://url/de/votre/fichier/myPictures.js" type="text/javascript"></script>
<script src="http://url/de/votre/fichier/setTitle.js" type="text/javascript"></script>

le premier fichier est à éditer ; il contient une liste d'éléments entre crochet, éléments constitués de deux parties apparaissant entre guillemets simples . Ces deux parties sont :

• le nom de l'image sur laquelle on clique et son extension
• la légende que vous souhaitez voir apparaître

chaque ligne de cette liste se termine par une virgule sauf la dernière.
si une de vos légende devait contenir une apostrophe, pour ne pas le confondre avec un guillemet simple exigée par le code, ajoutez devant une barre oblique inversée (antislash) raccourcis-clavier en France : alt majuscule :

' devient \'
par ex.
l'allumette devient l\'allumette

Autre chose
Concernant le bug d'affichage de Safari, il semble que celui-là soit moins fréquent quand on ajoute une ligne de commentaires dans le script présent dans le widget fragment HTML.
Si vous regardez le code du widget de Wyodor (clic droit sur cette page blanche > clic droit) vous verrez qu'il a ajouté une ligne de commentaires dans la partie de code que vous avez utilisée hier.

// today

Un conseil : quand vous importez des images dans iWeb, renommez-les simplement évitez qu'elles contiennent des signes bizarres, des espaces et des accents comme c'est la cas pour cette image dont le nom contient des crochets
http://web.me.com/coolsinus/www.expl...hes%5B1%5D.jpg, ceux ci ont été remplacé par %5B et %5D, dans Safari certains codes javascript ont du mal a être interprété avec ce ce genre de symbole ans les noms de fichiers. restez simple.

[Coolsinus]

Ok et ces deux fichiers, je dois les crees moi meme ? Car quand je clique sur vos liens ca ne telecharge rien, ca montre un bout de code tel que vous l'avez decrit.
Autrement le reste j'ai compris !
J'ajouterai un commentaire dans le fragment HTML.
Ah oui, je les ajoute ou les deux URLs des deux nouveaux fichiers dans le fragment HTML ? Nimporte ou ? Au debut ? A la fin ?

[koeklin]

Au lieu de faire un clic gauche sur mes liens, faites plutôt un clic droit > enregistrer les fichiers liés sous...

Editer le fichier myPictures.js

Mettez ces deux fichiers sur votre iDisk quelques part dans votre dossier FancyZoom
Récupérez les URLs de ces deux fichiers.

Ouvrez iWeb
Dans le même widget fragment HTML qu'hier

• ajoutez // today comme le fait Wyodor
• et insérez à la fin du code (sous la balise </script>) les deux lignes cités dans mon précédent message (en remplaçant les urls des fichiers).

[Coolsinus]

Merci !!

[Coolsinus]

Les jury ont ete impressiones par le site !

Merci encore pour toute ton aide !! et biensur