le Slideshow caché d'iWeb, activez-le !

[koeklin]

Si, comme moi, vous n' êtes pas fans du popup slideshow d'iWeb, voici la façon la plus facile de faire un diaporama avec des transitions (de choix varié) sur une page iWeb.

Voici le résultat : http://iweb.debutersurmac.com/diapo/sixteen.html

Cette combine active des scripts déjà présents dans iWeb, elle ne nécessite aucune connaissance en code et est donc accessible au plus grand nombre.

Edit du 4/6/11: les nouveaux liens vers le code et un exemple sont ici :
http://iweb3widgets.cyclosaurus.com/AutoSlideshow/AutoSlideshow.html
http://iweb3widgets.cyclosaurus.com/AutoSlideshow/Code.html

Il s'agit

• d'un simple script à coller dans un fragment HTML d'une page du modèle Photos.
  
• et de quelques conseils pour en améliorer la présentation

L'astuce (en anglais) :
https://discussions.apple.com/message/13175645#13175645

Pour ceux qui ne liraient pas l'anglais voici la combine :

1. Mettez des photos sur la grille d'une page Photos (facile)

2. Désactivez toutes les options (téléchargement, commentaires, diaporama) grâce à l'inspecteur > Photos >

• a. Onglet Photos :
  
  • > taille de téléchargement des photos : aucun
    
  • > commentaires : aucun
  
  
• b. Onglet Diaporama :
  
  • > décocher afficher le diaporama

(facile)

3. double cliquer sur une image pour la mettre en grand et faire apparaitre les icônes de forme de présentation (avec ou sans vignette) . choisissez le mode presentation sans vignette (facile)

4. selectionnez la grille de photos et mettez son opacité à 0 grace à l'inspecteur > inspecteur des graphismes > Opacité à 0 (facile)

5. Copiez le code présent sur cette page et collez le dans un fragment HTML
Si besoin changez la valeur de la ligne

Code:

var theEffect = [5, 0];

en choisissant un des nombres donnés en exemple plus haut dans le code (list of transition effects) et que x est un chiffre entre 0 et 9 *
(facile)

et publiez. (facile)


*Pour mon exemple (lien en haut de ce message) , j'ai choisi des transitions aléatoires

Code:

var theEffect = [0, 0];

[jeancharleslast]

Merci.

[lucien de montmartre]

Bonsoir,

J'ai installé le slideshow sur deux, trois pages de mon site — site que je modifie en suivant vos conseils à tous. Je trouve le système un peu lent, mais mieux que le diaporama d'iWeb. Par contre, est-il possible d'arrêter le défilement, de faire une pause sur une image? Et par ailleurs, qu'en est-il du "zoom" sur une photo?

Merci.

[koeklin]

Je pense qu'on peut changer les temps d'affichage et de transition mais pour le reste, je n'en ai aucune idée.

[toma]

Bonjour,
J'ai activé le "slideshow" d'Iweb, mais malheureusement, il ne se lance pas automatiquement.
J'ai besoin de cliquer 1 fois, pour qu'il se déclenche:

http://web.me.com/t.boursier/RawkBrune/rbindex.html

Quelqu'un serait-il succeptible de m'aider ?

merci d'avance :)

Toma

[koeklin]

Comme ça, je dirais d'augmenter la valeur du chkFooter. chez vous elle est à 100 (c'est court...)

Code:

chkFooter = setInterval(function () { checkFooter(); }, 1000);

[toma]

Ça semble fonctionner.
merci beaucoup de votre réponse :)

Toma

[Giloukhepa]

Bonjour,

Je suis nouvelle sur le forum et très novice en matière de code html.
Je souhaite insérer un slideshow sur une des pages de mon site en construction en utilisant le code fourni par Koeklin mais sur une page de ma composition et non une page au gabarit "PHOTO" iWeb. Est-ce possible?
Autre chose, j'ai tenté l'essai en suivant le protocole énoncé mais en vain. J'ai beau faire glisser le widget, y inscrire le code, appliquer, rien ne se passe...
Merci de m'aider en essayant, si vous avez le temps, de m'indiquer toutes les étapes, y compris celles qui vous semblent élémentaires.

[koeklin]

Rien ne se passe dans iWeb, il faut publier son site pour voir l'effet sur son navigateur.

Pour créer son diaporama sur une autre page qu'une page Photos il faut utiliser des solutions plus compliquées qui passent par

• l'édition d'un code HTML et
  
• le téléversement manuel de certains fichiers javascript html et/ou css sur votre serveur.

C'est ce que j'ai fait sur toutes les autres pages de ce site de diaporamas et galeries:
http://iweb.debutersurmac.com/diapo/ sauf la page 16 bien sûr qui est le sujet de ce fil de discussion.

[Giloukhepa]

Désolée de répondre un peu tardivement et merci pour votre réponse.
Malheureusement, je pense avoir un vrai problème de publication, car aucun des widgets utilisés ne fonctionne chez moi en dépit de la prise en considération de chacune des étapes...
Je désespère un peu.

[tidi]

Bonjour Koeklin !

J'ai passé du temps à suivre tes explication et lire le site UK....

mais ça ne marche pas, j'ai identifié 2 problèmes: ma version 3.0.4 avec l'instruction "décocher afficher le diaporama" que je n'ai pas.
Ensuite les liens du code ne fonctionnent pas et je trouve une page de code mais je ne sais pas ce que je dois coller..

En expérience html, je débute et j'ai copier des lignes html sans problème pour l'instant.
En tout cas si j'y arrive, j'ouvre une bouteille de champ !

Amicalement cher Yoda d'iweb..
fredo

[koeklin]

mais ça ne marche pas, j'ai identifié 2 problèmes: ma version 3.0.4 avec l'instruction "décocher afficher le diaporama" que je n'ai pas.Ensuite les liens du code ne fonctionnent pas et je trouve une page de code mais je ne sais pas ce que je dois coller..

sélectionnez votre page de modèle Photos dans la colonne latérales d'iWeb (1)
inspecteur > Photos (2) > Diaporama (3)
décochez la case "afficher le diaporama"(4)
copiez le long script (5) contenu dans la page NoCaptionCode ou withCaptionCode du site de cyclosaurus, ce script commence avec la ligne

Code:

<script type='text/javascript'>

et finit avec la ligne

Code:

</script>

et collez-le dans un widget fragment HTML (6)
Sélectionnez la grille de photos (7) et baissé l'opacité à zéro (8) dans l'inspecteur (inspecteur des graphismes)


Cliquez sur l'image ci dessus pour la voir en entier et en plus grand format.

Concernant les liens qui ne marchent pas, le webmaster de ce site a un peu l'habitude de remplacer ces pages par de nouvelles.

Voici les nouvelles URL des pages :
démo avec légende : http://iweb3widgets.cyclosaurus.com/AutoSlideshow/AutoSlideshow.html
démo sans légende : http://iweb3widgets.cyclosaurus.com/AutoSlideshow/SlideshowWithCaption.html

script avec légende : http://iweb3widgets.cyclosaurus.com/AutoSlideshow/withCaptionCode.html
script sans légende : http://iweb3widgets.cyclosaurus.com/AutoSlideshow/noCaptionCode.html

[tidi]

Whaou !

C'est précis !

Je vais faire la manipulation demain après-midi.
merci beaucoup pour la rapidité et la clarté des réponses.

Verdict demain.

Fredo

[tidi]

ça marche !!!! c'est génial , merci beaucoup ! je vais juste affiné pour enlever les légendes et je voudrai avoir l'effet keyburn (zoom)

Bravo et merci car je vais faire un meilleur site !

[koeklin]

je voudrai avoir l'effet keyburn (zoom)

Apple n'avait prévu d'integrer un effet Ken Burns.

Je ne suis pas fan de cet effet mais je l'ai utilisé dans un diaporama fait avecSlideshow2! d'electriprism
Inutile d'espérer ; je ne me lance pas dans l'explication de la mise en place de ce genre de diaporama qui loin d'être aussi facile qu'un simple script à coller dans un widget.

[tidi]

Pas de problème, je reste sur cette présentation.
Pour finir et te remercier encore, je souhaite donc avoir une page avec mes photos qui défilent (c'est fait) et en dessous, du texte pour indiquer les liens picasa des albums des différents événements moto.
Avec la manipulation que tu m'as donné, la page est très grande (car les photos chargées sont cachées en opacité mais je souhaitais mettre mon texte juste en dessous du diaporama qui défile.
ya t'il une astuce pour pouvoir mettre le texte juste en dessous?

[tidi]

J'ai fait toute mes pages avec ton code et le site est au top avec les belles photos qui defilent.

Merci encore et bonnes fêtes.
Pour mettre du texte en dessous, j'ai vu que c'est possible en calculant la hauteur d'une photo.

Fredo

[LETOREY]

Bonjour

J'aimerai savoir si avec le code de koeklin, on peut ajouter une fonction de mode aléatoire pour l'ordre des photos.
Merci à vous.

Damien

[davlab]

Bonjour,

Les liens vers le code HTML semblent ne plus fonctionner.
Quelqu'un pourrait-il m'indiquer d'éventuels nouveaux liens ou me faire parvenir le code html pour le diaporama auto sans légende ?

Merci d'avance et grand bravo pour ce site !

David

mon site iWeb : www.davlab.fr