Besoin iWeb urgent !

Coolsinus

Coolsinus

Membre actif
19 Août 2010
369
14
Paris
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 :D , pouvez-vous me fournir un bout de code qui marche.

C'est urgent, c'est pour lundi !

Merci d'avance a tous !! :up:
 
Dernière édition:
koeklin a dit:
Bonjour,

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

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... :rateau:
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 :up:
 
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
Bloc de code: 
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
Bloc de code: 
<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
 
Dernière édition:
Ah oui merci. Mais ca ne marche pas, j'ai suivi les instructions :

J'ai ajoute :
../FancyZoom
Cliquez pour agrandir...
avant
/images
Cliquez pour agrandir...
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
Bloc de code: 
/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):

Bloc de code: 
<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 :
Bloc de code: 
newScript.src = 'http://web.me.com/coolsinus/FancyZoom/js-global/FancyZoom.js';
et
Bloc de code: 
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 :
Bloc de code: 
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 :up:
 
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.explosion.com/Contexte.html

:up:

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 !

:up::up::up:
 
Dernière édition:
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.

droppedImage_1.jpg

Plus de détails sur cette page :
http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2011/2/24_MobileMe_et_client-FTP.html
 
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 :up:
 
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
Bloc de code: 
<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 :
Bloc de code: 
' 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.
Bloc de code: 
// 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.explosion.com/Contexte_files/trenches[1].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.
 
Dernière édition:
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 ?
 
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).
 
Les jury ont ete impressiones par le site ! :)

Merci encore pour toute ton aide !! ;) :zen: et biensur :up:
:D
 

Sujets similaires

F
Partage album dédié entre Iphone et iPad
Réponses
1
Affichages
3K
iCloud et identifiant Apple
les_innommables66
L
I
IA en local sur mac
Réponses
4
Affichages
425
Utilitaires
igorbatchev
I
G
2025 - O.C.L.P : OS upgrade SANS clef de boot ET universelle (directement depuis MacOS existant) .
Réponses
11
Affichages
4K
Hackintosh
Guinioul38
G
N
J'ai perdu 99% de mes mails et j'ai besoin d'aide...
Réponses
9
Affichages
2K
Web et e-mail
daffyb
daffyb
Gregoryen
Imprimantes Relier Intermec PC43d
Réponses
2
Affichages
4K
Accessoires Mac
Gregoryen
Gregoryen
Haut Bas