Ajouter diaporama visionneuse javascript legende

obtenir ces boutons

Créer son diaporama : 3° partie

Mise à jour du 10 mars 2012.

Pour ajouter sur un blog la bannière défilante de 6 images sous le titre ou les autres diaporamas sur cette page, il suffit de mettre, dans un gadget HTML/JavaScript ou la version HTML d'une "page statique" de Blogger, un des codes fournis. Ils sont immédiatement utilisables par tous sans aucune formation. Il suffit de changer les adresses des images.

CES DIAPORAMAS PERMETTENT, EN CLIQUANT SUR LES IMAGES, D'AFFICHER :
- les images agrandies ;
- ou D'AUTRES PAGES : du blog ou d'un autre site.

Ce diaporama peut afficher DES TRÈS GRANDES IMAGES.

On peut ajouter autant d'images que l'on veut.

Le gadget a été placé en-dessous du titre mais on peut le placer n'importe où ailleurs sur le blog.

D'autres méthodes, mais sans les liens vers d'autres pages, sont expliquées ici.


Une page qui suit reproduit le code qui permet d'obtenir des DIAPORAMAS PLEIN ÉCRAN, dont les images couvrent tout l'écran.

Une autre page qui suit reproduit le code qui permet d'obtenir le bandeau d'images miniatures qui défilent ci-dessus dans l'en-tête.

Une page suivante reproduit le code simplifié qui permet d'obtenir une bannière défilante en-dessous du titre.

La page qui suit reproduit le code qui permet d'obtenir un diaporama simplifié avec 2 boutons sans défilement automatique.


Un quatrième code fourni ci-dessous est plus élaboré et permet :
- de cliquer sur chaque image pour la visionner en grande taille sur une autre page ;
- d'afficher une légende en-dessous de chaque image ;
- d'afficher une barre de 7 boutons en-dessous des images.

Ce gadget fait défiler dans l'ordre (pour éviter les répétitions), toutes les 3 secondes, 6 images différentes. La première image est choisie de manière aléatoire afin de ne pas toujours afficher en premier la même image à chaque changement de page.

EXEMPLES 1 : CLIQUER ICI. Petites images.

Autres présentations :

EXEMPLE 2 : CLIQUER ICI : 6 PETITES IMAGES MINIATURES sont affichées en-dessous de la grande image. On peut aussi choisir la grande image en cliquant sur une des images miniatures.

EXEMPLE 4 : CLIQUER ICI. DES FLÈCHES VERS LE HAUT ET LE BAS DONNENT ACCÈS A D'AUTRES SÉRIES DE 8 MINIATURES (on peut en ajouter autant que l'on veut).



EXEMPLE 6 : CLIQUER ICI.


Pour ajouter un diaporama dans un MESSAGE, comme ci-dessus, il faut le placer dans une fenêtre (iframe). La méthode est expliquée sur cette page.


La résolution des images qui défilent peut être plus faible que celle de l'image d'origine : s400 ou s800 peut remplacer s1600 dans l'adresse de l'image sauvegardée par Blogger.

Le code nécessaire pour créer le diaporama des EXEMPLES 1 et 2 est disponible ici.

Le code nécessaire pour créer le diaporama de l'EXEMPLE 4 est disponible ici.

Utilisation : coller le code dans un gadget HTML/JavaScript ou une "page statique" de Blogger.

Rappel : pour ajouter un diaporama dans un MESSAGE, comme ci-dessus, il faut le placer dans une fenêtre (iframe). La méthode est expliquée dans cette page.

Comment ajouter un gadget HTML/JavaScript sur un blog.

Comme on peut manquer de place en hauteur, on peut supprimer des éléments au-dessus et en-dessous de la grande image : il suffit de remplacer display:block; ou display:inline; par display:none; au début du code pour ces éléments :

Titres : #dia1affichage_titre{display:block;

Légendes : #dia1affichage_legendes{display:block;

Onglets : .dia1onglets{display:inline;

Numéro de l'image : #dia1affichage_numero{display:inline;

Petits boutons par image : .dia1boutons{display:inline;

Images miniatures : .dia1miniatures{display:inline;

Pour augmenter le nombre (6) d'images miniatures, il faut faire 2 choses :

1) corriger le nombre "6" dans l'instruction : var dia1nbminis=6; ;

2) après <img class="dia1miniatures" id="dia1-6" onclick="dia1appelnumero(6);"/>, ajouter des lignes supplémentaires identiques en changeant le "6" (2 fois) en "7", "8", ...

Autres adaptations :
- on peut changer les adresses des images (dia1Image[0] ...), des liens vers les images agrandies (dia1Lien[0] ...), les adresses des images miniatures, les titres et les légendes, en ajouter et en supprimer ;
- pour changer le cadre de l'image, corriger : border:solid #fff 5px; : on peut changer la couleur (#fff) et l'épaisseur (5px) du cadre ;
- pour supprimer le cadre de l'image, remplacer : border:solid #fff 5px; par border:none;
- pour changer la taille de la grande image, modifier au début : width: 71%; ou width: 96,4%;
- la vitesse de rotation (toutes les 3 secondes) est déterminée par : dia1secondes=4; : augmenter ou diminuer 4 ;
- on peut donner une couleur de fond à la barre de titre ou des légendes : changer "transparent" ;
- ...


7 BOUTONS PEUVENT ÊTRE AJOUTÉS SOUS LE DIAPORAMA POUR PERMETTRE AUX VISITEURS DE MIEUX LE VISIONNER.


Le principe est le suivant :
1) A l'ouverture de la page, le diaporama fonctionne : les images défilent automatiquement.
2) La touche "Stop" permet de stopper le défilement automatique.
3) Les touches < et > permettent d'accéder à l'image suivante ou précédente. Les touches l< et >l permettent d'accéder à la première et à la dernière image.
4) Les touches << et >> permettent de redémarrer le défilement automatique : en avant et en arrière : il est rare qu'un diaporama puisse être consulté dans les 2 sens.


En cliquant sur les images, on peut aussi OUVRIR UNE AUTRE PAGE (du même site ou d'un autre) DIFFÉRENTE POUR CHAQUE image.

EXEMPLES 3 : CLIQUER ICI. Petites images.

Exemple : utiliser dans le code les liens suivants vers d'autres pages :

dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";
dia1Lien[1] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-2.html";
dia1Lien[2] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-3.html";
dia1Lien[3] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages-4.html";
dia1Lien[4] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/01/derniers-messages-5.html";
dia1Lien[5] = "http://modifier-les-modeles-de-blogger.blogspot.com/2012/01/derniers-messages-6.html";

Les liens s'ouvrent DANS UNE NOUVELLE FENÊTRE : en fermant la nouvelle page, le visiteur revient sur le blog de départ au lieu de le quitter définitivement !!!

En option on peut cliquer sur une des images et être transféré vers une autre page, mais contrairement au code proposé ci-dessus, la même page quelle que soit l'image affichée.

Pour obtenir cela, remplacer :

document.write('<a href="#" onclick="window.open(dia1Lien[dia1compteur-1]);return(false)

par :

document.write('<a href="#" onclick="window.open(dia1Lien[0]);return(false)

Pour modifier l'adresse de destination du lien, corriger : dia1Lien[0] = "http://modifier-les-modeles-de-blogger.blogspot.com/2011/12/derniers-messages.html";

Le lien s'ouvre DANS UNE NOUVELLE FENÊTRE : en fermant la nouvelle page, le visiteur revient sur le blog de départ au lieu de le quitter définitivement !!!


Ce diaporama peut être ajouté dans un message, sur une "PAGE STATIQUE" ou dans un GADGET HTML/JavaScript.

Les diaporamas de grand format, accessibles ci-dessus comme exemples, ont été placés dans des page statiques. On peut les créer dans le même blog ou dans des blogs spéciaux permettant d'afficher 20 pages statiques (accessibles par des liens) et donc 20 diaporamas.


On peut ajouter plusieurs diaporamas sur la même page.

EXEMPLE 6 : CLIQUER ICI.

Pour cela, il faut modifier le code avec le bloc-notes (ou notepad) et ajouter un numéro d'ordre différent par diaporama : en remplaçant tous les "dia1" par "dia2" ou "dia3", ...


Pour toujours démarrer le diaporama avec la même image, remplacer dans le code:
var compteurdia1 = parseInt(Math.random()*Imagedia1.length);
par
compteurdia1 = 5;
(soit le numéro de l'avant-dernière image pour faire apparaître la première image en premier - un autre numéro d'ordre -2 pour une autre image).


Une page suivante reproduit le code simplifié qui permet d'obtenir le diaporama se trouvant ci-dessus en-dessous du titre.

La page qui suit reproduit le code qui permet d'obtenir un diaporama simplifié avec 2 boutons sans défilement automatique.

10 commentaires:

ThomaSD a dit…

Bonjour et merci pour ce diapo.
Petites questions :

1- Comment faire pour ouvrir le lien d'une photo dans la même page ? (je me sers de ce gadget comme d'un menu)

2- Es-ce que je peux remplacer les boutons par des images (genre des flèches...) ?

Merci d'avance, à tantôt.

Meiser a dit…

Bonjour.

1) La méthode est décrite dans ce tutoriel : http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

2) Vous pouvez aussi insérer une photo agrandie dans un message et créer un lien vers ce message.

3) Autre bouton : <input type="image" src="image/bouton.gif" value="<" onclick="dia1precedente();"/>


Anonyme a dit…

Bonjour
j'ai utilisé le 1er script que vous aviez mis en ligne et il fonctionne très bien, j'aimerais faire apparaitre les miniatures cliquable comme sur votre dernières version mais sans la mise en page et les boutons.
quelle partis du nouveau script doit je récupérer?
cordialement

Meiser a dit…

Bonjour.

On peut supprimer des éléments en-dessous de la grande image : il suffit de remplacer display:block; ou display:inline; par display:none; au début du code pour ces éléments :

Onglets : .dia1onglets{display:inline;

Petits boutons par image : .dia1boutons{display:inline;


Anonyme a dit…

Bonjour et merci pour tous ces codes! Ca faisait un moment que je cherchais!
Par contre, est-il possible d'ajouter un effet 'fade'? Que faut il rajouter sur le code?
Merci!!

ETS MERABET a dit…

Bonsoir Monsieur,
j'ai des photos et album photos dans picasaweb et je veux utiliser un diaporama exemple 4 dans mon blog blogger,alors comment faire pour utilisé mes photos ou albums daqns cette exemple.
Salutations.

Meiser a dit…

Bonjour.

Ce diaporama ne fonctionne pas encore avec un album Picasa.

Il faut donc encore ajouter manuellement les adresses (http:// ...) des images sauvegardées.

Pour utiliser automatiquement les images d'un album Picasa, consulter :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/03/diaporama-picasa-autre-code.html


Meiser a dit…

Bonjour.

Le diaporama renseigné à cette adresse fonctionne avec un effet "fade" :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/03/diaporama-picasa-autre-code.html


khunfred a dit…

Bonjour,
Super!Beau boulot, merci!

khunfred a dit…

Bonjour,
Pourriez-vous m'indiquer de quelle manière on peut:
-diminuer la résolution de l'iamge
-interdire le click sur la photo qui permet de l'agrandir

Merci d'avance