iWeb Beginner Le forum qui vous aide à utiliser iWeb

[JeanCharles]

Bonjour à tous,

Voici un effet sympa à insérer sur vos images, flash ....C'est la fameuse "shadowbox".
(Exemple sur mon site http://www.jeancharlesbarthelet.com/vis ... uelle.html)

J'ai testé , ça fonctionne sur iWeb.

Voici le lien en Anglais.

Seul hic, à chaque publication de votre page, vous devez re-écrire votre code...
Normal, le code html est à insérer dans une balise "head" donc uniquement aprés publication de votre site grâce à un éditeur de texte.

La shadowbox est à télecharger sur le lien officiel
Vous devez uploader la TOTALITE du dossier sur votre FTP et modifier le code pour indiquer les liens.css et .js.


Bonne manipulation à vous!

[lologramme]

bonjour,
Auriez-vous plus de détails pour installer la shadowbox dans iweb?
que dois-je mettre sur mon serveur?
j'aimerais mettre des vignettes de mes films et lorsque que je clic dessus le film se lit dans la shadowbox...
mon anglais n'est pas terrible
merci

[lologramme]

j'ai solutionné Ici

[Santaklaus]

j'avoue avoir le même probleme et que je ne comprend pas bien. Je suis désolé mais étant absolument novice, tout n'est pas intuitif.

alors plusieurs questions très simples :

1. J'ai dl le fichier zip de "shadowbox", que faire avec pour l'installer sur mon site via iweb ?

2. Quel code mettre pour qu'une vignette (image ou vidéo) ouvre une vidéo Youtube par exemple dans la shadowbox ?

merci d'avance

[Santaklaus]

Bonjour, je me up tout seul parce qu'après avoir passé des heures à tenter par moi même, je n'arrive pas à un resultat concluant.

J'ai donc installé le fichier SRC dans mon ftp dans le dossier de mon site iweb (donc http://monftp/monsiteiweb/). Ce dossier je l'ai appelé "Shadowbox", tout simplement.

Ensuite, avec iweb, j'ai rentré ce code là dans un fragment html, pour essayer, d'abord avec une simple image (url au pif) :

Code: Tout sélectionner

<a href="http://www.destination360.com/north-america/us/new-york/images/s/world-trade-center-site.jpg"rel="shadowbox;width=640;height=480" player=img title="titre"><img src="http://www.destination360.com/north-america/us/new-york/images/s/world-trade-center-site.jpg" alt="" style="height: 204px; left: 0px; margin-left: 0px; margin-top: 0px; position: absolute; top: 0px; width: 234px; " /></a>

Après quoi j'ai publié ma page.

Avec un client ftp j'ai ensuite récupéré la page .html contenant mon fragment html que j'ai ouvert avec un éditeur de textes, et j'y ai ajouté le script suivant juste avant la balise </head> :

Code: Tout sélectionner

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

puis j'ai transferé ce nouveau .html à la place de celui qui était déjà sur iweb.

Mais la, patatra, lorsque je clique sur mon image, elle s'ouvre simplement dans sa fenêtre, comme si j'avais simplement cliqué sur le lien.

Que faire ? Ou ais-je fait une erreur ?

Merci d'avance

[lologramme]

Bonsoir,
Donc si j'ai bien compris tu veux une shadowbox pour voir une vidéo youtube.

1/ dans iweb tu places un lien texte ou image comme tu le souhaites.

2/ publier ta page dans un dossier.

3/ ouvrir la page html dans un editeur html comme Smultron

4/sélectionner "/head" et le remplacer par

Code: Tout sélectionner

<!-- Start of Shadowbox Code -->

   <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">

<script type="text/javascript" src="shadowbox/shadowbox.js"></script>

<script type="text/javascript">

Shadowbox.init({

players:    ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

<!-- End of Shadowbox Code -->

</head>

5/ sélectionner le lien crée plus haut (celui de ta vidéo youtube) et le transformer comme suit :

Code: Tout sélectionner

<a href="http://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"

remplacer l'adresse par celle de ta vidéo.

6/ tu télécharges le zip shadowbox Ici. tu le dézippes et tu le ranges dans le dossier de ton site au même niveau que le dossier de ta page.

7/ tu publies ton site et tu comtemples

voilà, moi je le fais avec des vidéo flv et des pages html exemple par Ici

[Santaklaus]

merci pour les explications claires

Mais ca ne marche pas...

deux questions alors :

En fait j'utilise mon PC de bureau pour ce qui est du ftp, transferer les dossiers etc qui est sous windows xp encore... Le lien que tu m'as donné contient plusieurs dossiers, don un qui s'appelle _MAC.OS... Les dossiers nommés shadowbox ne sont pas exactement les memes, lequel prendre alors ?

2) comment modifier le code html de mon lien en ajoutant celui de YouTube que tu préconises ? Dans la fiche html aussi (via mon editeur html donc) ? Est-il possible de creer un fragment html sur iweb en y inserant un code dans lequel je mettrais l'url de mon image miniature et l'url de la vidéo youtube ?

[Marc]

1) vous téléchargez le dossier shadowbox, vous mettez ce dossier shadowbox sur votre FTP.
2) Le fragment HTML surtout pas!

[Santaklaus]

bonjour Marc :

1) Le Zip contient deux dossiers nommés "shadowbox"

2) Cela veut donc dire qu'il faut que je change ca dans la fiche "nomdelapage.html" sur mon ftp, au niveau du code de mon lien donc.
A quoi ressemble alors un code complet ? Est il possible d'avoir un code ou apparaitrait l'URL de mon image et ou l'emplacement, et le code youtube ? Que je comprenne clairement ou trouver mon lien dans la fiche de code et ou placer le code pour la vidéo Youtube exactement. Je suis désolé d'être si novice, je ne fais pas exprès.

[Marc]

1) bizarre j'en ai qu'un. et il contient les dossiers adapters, languages, librairies, players, resources, les fichiers shadowbow.css et shadowbox.js
2) il faut bien éditer le code du lien sur la page .html générée par iWeb.