diaporama picasa autre code

obtenir ces boutons

Ajouter un diaporama : 1° partie

Diaporama avec les images d'un album Picasa

sans clic vers le site Picasa

NOUVEAU CODE : janvier 2014

"Picasa" est le site qui héberge les images sauvegardées avec Blogger. Ces images sont regroupées en albums que l'on peut utiliser pour ajouter des diaporamas sur des blogs.

Remarques :
- pour afficher un diaporama PLEIN ÉCRAN (qui couvre tout l'écran), consulter cette page :
- on trouve sur la page suivante un gadget du site Picasa qui donne un résultat équivalent, mais qui présente l'inconvénient de se retrouver sur le site Picasa en fermant le diaporama ; en plus, le diaporama s'arrête à la fin de l'album ;
- on peut aussi créer des diaporamas en encodant les adresses des images concernées dans le code : consulter cette page et les suivantes.

* * * * *
On peut éviter de se retrouver sur le site Picasa en fermant le diaporama et que le diaporama s'arrête à la fin de l'album, comme on peut le constater avec ces diaporamas :
... chargement d'un diaporama en cours ....
... chargement d'un Diaporama en cours ....
On ne se retrouve pas sur le site Picasa en cliquant sur les images, et le diaporama reprend depuis le début à la fin de l'album.

En plus, on peut, si on le souhaite, afficher les images dans un ORDRE ALÉATOIRE.

En passant au-dessus de l'image avec le curseur de la souris, on fait apparaître 3 boutons permettant :
- d'arrêter puis de faire reprendre le défilement des images ;
- d'afficher les images suivantes ou précédentes.

* * * * *
1) Pour afficher ces diaporamas, il faut d'abord ajouter le code qui suit dans un gadget HTML/JavaScript (si cela ne concerne qu'un seul article, on peut aussi mettre ce code dans la version HTML de cet article) :

<style>.slideshow{width : 600px;height : 288px;padding:0px;padding-top:10px;}.slideshow div div{background : none !important;}.slideshow div div img{display:inline;padding:0px;border:1px white solid;}</style>

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog.

2) Il faut ensuite ajouter le code qui suit dans la version HTML d'un article ou un gadget HTML/JavaScript aux endroits où l'on veut placer un diaporama :

<div id="Diaporama1" class="slideshow" style="color:black;font-size:13px;text-align:center;">
... chargement d'un diaporama en cours ....</div>

Il faut modifier le nom pour chaque diaporama : "Diaporama1" devient "Diaporama2" ...

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog.

3) Il faut enfin ajouter le code qui suit dans la version HTML d'un article ou un gadget HTML/JavaScript :

<script src='http://www.google.com/jsapi' type='text/javascript'></script><script src='http://www.google.com/uds/solutions/slideshow/gfslideshow.js' type='text/javascript'></script><script type="text/javascript">
// augmentation de la résolution des images
function resolution(adresse){
var resolution_image = "/s800/";
var ad=adresse.content; var ad1 = ad.indexOf("src=")+5;
var ad3 = ad.toUpperCase().indexOf(".jpg".toUpperCase(),ad1);
if (ad3==-1) {i=ad.toUpperCase().indexOf(".gif".toUpperCase(),ad1);}
if (ad3==-1) {ad3=ad.toUpperCase().indexOf(".png".toUpperCase(),ad1);}
var ad2 = ad3 + 4;adresse= ad.substring(ad1,ad2);
adresse=adresse.replace("/s288/",resolution_image);return(adresse);}
// fonction aleatoire
function aleatoire(a) { var i=a.length; if(!i) return false; while(--i) { var j=Math.floor(Math.random()*(i+1)); var tempi=a[i]; var tempj=a[j]; a[i]=tempj; a[j]=tempi; } }
// adresses des albums et options des diaporamas
function LoadSlideShow(){

// Diaporama
var feed="https://picasaweb.google.com/data/feed/base/user/101739395493444581297/albumid/5668926491270466177?alt=rss&kind=photo&hl=fr";
var options = {displayTime:4000, transitionTime:1000, scaleImages:true,thumbnailUrlResolver: resolution,fullControlPanel: true,fullControlPanelSmallIcons: true,pauseOnHover: false};
window.Diaporama1 = new GFslideShow(feed, "Diaporama1", options);

}
// load feeds api and set callback for loading the slideshows
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>

On peut ajouter plusieurs fois le code ci-dessus. Il faut seulement que le numéro du diaporama (1, 2, ...) soit toujours différent : dans le paragraphe "// Diaporama" remplacer DEUX FOIS "Diaporama1" par "Diaporama2", 3, 4, ...

4) On peut aussi décider que l'ordre des images soit aléatoire. Pour cela, il faut, dans le paragraphe "// Diaporama", ajouter juste après :
var options = {
le code suivant :
feedLoadCallback: function(a) {aleatoire(a.feed.entries);},

* * * * *
1 modification s'impose : remplacer l'adresse de l'album (https://picasaweb.google.com/data/feed/base/user/ 101739395493444581297/albumid/5668926491270466177?alt=rss&kind=photo&hl=fr) par l'adresse d'un album de son choix. La méthode pour l'obtenir est la suivante :

1) Accéder à "Picasa Web Albums".

2) Si l'album photos à utiliser n'existe pas encore, cliquer en haut de l'écran (au centre) sur "Transférer". Transférer des photos dans un album de "Picasa Web Albums".

3) Cliquer sur le nom de l'album concerné.

4) Rendre cet album "Public". Pour cela :
- cliquer sur : "Modifier" - "Propriétés de l'album" ;
- à côté de "Partager", sélectionner : "Public" ;
- cliquer sur "Enregistrer les modifications".

5) Dans la colonne de droite, cliquer avec le bouton droit de la souris sur l'icône avec la mention "RSS", et sélectionner "Copier l'adresse du lien".
Exemple : http://picasaweb.google.fr/data/feed/base/user/101739395493444581297/albumid/5410219684020459841?alt=rss&kind=photo&hl=fr

Actuellement, Google fait passer les albums de Picasa Albums à Google+ photos. On peut d'ailleurs être redirigé automatiquement vers "https://plus.google.com/photos". Ce n'est pas un problème. Dans Google+ photos, il suffit de :
- afficher l'album ;
- copier son adresse qui figure en haut de l'écran, soit par exemple : https://plus.google.com/photos/101739395493444581297/albums/5668926491270466177?banner=pwa ;
- récupérer les deux numéros qui s'y trouvent ;
- et de les insérer dans l'adresse de l'album (https://picasaweb.google.com/data/feed/base/user/ 101739395493444581297/albumid/5668926491270466177?alt=rss&kind=photo&hl=fr) qui figure ci-dessus dans le code.

* * * * *
- On peut régler les dimensions du diaporama : largeur (width : 600px) et hauteur (height : 288px).

- On peut régler la durée de l'affichage de chaque image (4000) et de la transition entre images (1000).

- On peut aussi modifier la résolution (/s800/) des images : plus haute (/s1600/) ou plus faible (/s400/) par exemple. La résolution doit être la plus basse possible pour alléger le téléchargement, mais aussi suffisante pour assurer la qualité de l'image.

* * * * *
Le code présenté ci-dessus affiche des diaporamas qui ont tous la même grandeur. Si on veut ajouter des diaporamas de grandeur différente, il suffit de suivre les directives suivantes :

1) Remplacer les instructions :
<div id="Diaporama1" class="slideshow" style="color:black;font-size:13px;text-align:center;">
... chargement d'un diaporama en cours ....</div>
par :
<div id="Diaporama1" style="color:black;font-size:13px;text-align:center;">
... chargement d'un diaporama en cours ....</div>
class="slideshow" est enlevé.

2) Supprimer le code :
<style>.slideshow{width : 600px;height : 288px;padding:0px;padding-top:10px;}.slideshow div div{background : none !important;}.slideshow div div img{display:inline;padding:0px;border:1px white solid;}</style>

3) Placer avant le code de chaque diaporama :
<style>#Diaporama1{width : 600px;height : 288px;padding:0px;padding-top:10px;}#Diaporama1 div div{background : none !important;}#Diaporama1 div div img{display:inline;padding:0px;border:1px white solid;}
</style>
Il faut 3 instructions par diaporama et remplacer 3 fois #Diaporama1 par le numéro du diaporama : #Diaporama2, 3, 4 ...

4) Remplacer "width : 600px;height : 288px;" par les dimensions voulues pour le diaporama.

Remarque : il est souhaitable de faire un choix dès le départ entre des dimensions égales pour tous les diaporamas ou non. Après, les corrections seront possibles mais pourraient être fastidieuses.

40 commentaires:

La Grenouille a dit…

bravo pour vos conseils, je cherche depuis un moment comment afficher un diaporama sans lien avec l'album Picasa, et j'y suis arriv grâce à vous.
Je cherche maintenant à pouvoir agrandir ce diaporama quand on clique dessus : je suppose que je vais trouver la solution dans les pages suivantes...

Meiser a dit…

Bonjour.

Un clic d'agrandissement pour chaque image n'est pas prévu pour ce gadget.

Mais un diaporama plein écran est disponible sur ce site.


Chris Spleurf a dit…

Bonjour,
Je n'arrive pas à voir mes photos, un message "feed could not be loaded" apparait en lieu et place du diaporama que j'ai installé en widget (code HTML).
J'ai bien changé votre lien picasa pour un de mes albums présent sur mon compte google+, et cet album est bien en mode public, mais rien y fait...
Pouvez vous m'aider ?

D'avance merci !

Meiser a dit…

Bonjour.
L'intérêt de ce site est de proposer des codes qui s'appliquent en quelques secondes et peuvent donc être testés aisément.
Pouvez-vous d'abord faire fonctionner le code, sans aucune modification, sur votre blog ?
Il peut y avoir des incompatibilités venant de certains TEMPLATES ou navigateurs.


Chris Spleurf a dit…

Merci de me répondre si vite !
Oui il fonctionne parfaitement sur mon blog. J'ai d'ailleurs compris que ce qu'il fallait changer n'était pas le lien complet https://picasaweb.google..., mais simplement les deux code à chiffres. 101739395493444581297 et 5668926491270466177

Je me permet de le noter pour les futurs noob comme moi ^^

vanda vincent-marques a dit…

Bonsoir,

Je lis et re-lis vos infos depuis ce matin...
Mais je me trouve devant un problème insoluble pr moi.
j'ai bien fait un album dans picasa.
J'ai généré le flux RSS pour faire mon diaporama..
Seulement depuis, j'essaie de RE trouver ce flux, avec le pop up qui s'ouvre en demandant la taille du diaporama.
1/ je n'arrive plus à tomber sur ce pop up
2/ je n'arrive plus a trouver ce flux...
Je dois être bête, ça doit être très simple, mais je n'y arrive pas.
Ma seule option est de tout recommencer : créer un album, déposer les photos, etc.
Pouvez vous m'aider ?
Une fois que cet album (avec diaporama) est crée, comment peut on le modifier ?

Merci beaucoup.
VVM

Meiser a dit…

Bonjour.

Il suffit de retourner sur le site de Picasa. L'album s'y trouve toujours avec ses références :

http://modifier-les-modeles-de-blogger.blogspot.com/2010/03/blogger-gestion-des-images-enregistrees.html


Tanni Lou a dit…

Bonjour,

Mon problème est le suivant : lorsque je copie votre code sans aucun changement, il fonctionne mais dès que je mets le lien vers mon album ca ne fonctionne plus. Je remets alors votre code sans aucune modification et votre diaporama ne s'affiche plus. Le message est "un diaporama est en cours de chargement..." Seriez-vous me dire d'où vient le problème ou comment je pourrais faire pour obtenir un diaporama qui boucle ?
Merci

atelierdesignindustriel a dit…

Bonjour
Merci beaucoup pour ces conseils, j'avais installé un diaporama grace à ce code qui marchait parfaitement. Mais depuis quelques jours, il ne s'affiche plus, et se contente d'indiquer "chargement d'un diaporama en cours". J'ai essayé de mettre le code original que vous avez présenté en modèle, mais celui ci ne se charge pas non plus. Avez vous une idée de ce qui aurait pu bloquer l'application de la balise? Merci infiniment d'avance !

Meiser a dit…

A Tanni Lou :

Bonjour.

Cela vient du nouvel éditeur (interface) de Blogger.

Même en version HTML, l'éditeur corrige désormais le code des messages ... : il ajoute notamment des sauts de ligne après les balises ouvrantes (<div ...>, <p ...>). Cela modifie le code.

Il faut donc ajouter un code copié ailleurs et ne plus le corriger ensuite, car, dans ce cas, l'éditeur ne corrige rien.

Pour modifier le code, utiliser le bloc-notes ou notepad.

On peut aussi, dans la colonne de droite, cliquer sur "Options", cocher la case devant "Utiliser la balise <br>" et enregistrer.


Jean-Michel a dit…

Bonjour, quant vous dites "ajouter un code copié ailleurs ...", c'est où ?
Merci cordialement !

Meiser a dit…

Bonjour.

Soit on crée soi-même un code dans un message, soit on y colle un code copié ailleurs comme sur ce site qui diffuse de nombreux codes prêts à l'emploi.

Le problème est que Blogger corrige désormais les versions HTML des messages en y ajoutant des sauts de ligne, ce qui risque de rendre les codes inefficaces.

Il faut donc se contenter de coller ces codes et de ne plus faire de correction au message ni avant ni après, pour que le correcteur ne soit pas activé. Il reste la solution décrite ci-dessus de remplacer les sauts de ligne par &lt:br />


Artway Chartres a dit…

Bonjour,
Je comprends pas :
Sur mon pc le diapo marche bien, mais en ligne cela marche plus : ça bloque sur le chargement.
Pouvez-vous m'aider?
merci

Denis Coirier a dit…

Bonjour,
votre code marche très bien dans un blog. je cherche à obtenir le même résultat (diaporama qui reprend au début) dans un google site.
Pouvez vous m'aider ?
Merci

Meiser a dit…

Bonjour.

C'est un tout autre programme qui est nécessaire. Il faut rechercher sur internet un site qui propose ce genre de programme.


Au plaisir de Fabe-ebook a dit…

Bonjour,
Merci pour ce tuto et les codes.
J'avais abandonné le diaporama à cause de la redirection vers picasa.
Maintenant c'est super MAIS :
Mon diaporama n'est pas à la bonne place dans ma colonne de gauche, il est décalé et empiète sur les articles.
Puis-je y remédier ?
Merci

Meiser a dit…

Bonjour.

La taille est modifiable :
#Diaporama{width : 600px;height : 288px;

Par ailleurs la marge de gauche peut être nulle :
margin-left: 0px!important;
padding-left: 0px!important;


Au plaisir de Fabe-ebook a dit…

Merci Meiser,
Je suis nulle et néophyte en html !
Pourrais tu me donner un exemple de ce que je dois inclure et à quel endroit du code ?
Je te remercie en tous cas pour ta réponse super rapide.
Fabe

Au plaisir de Fabe-ebook a dit…

Je précise, j'ai su modifier la taille !
Mais c'est juste que ce n'est pas au centre de ma colonne de gauche...
Merci

Capflorian a dit…

Bonjour, merci pour vos codes.
J'ai un problème : quand je supprime une image de l'album picasa, celle ci continue de tourner dans le diaporama.
J'ai besoin d'apporter régulièrement des modifications à cet album.
Comment faire?
Merci d'avance.

Capflorian a dit…

Je viens de faire un essai (car j'ai pensé à un problème de rechargement...), en créant un second album : je change l'adresse dans mon code pour l'album2 mais quand je remets l'adresse de l'album1, il continue d'afficher les images supprimées et qui ne sont plus présentes dans l'album1!
Il doit y avoir un cache qui garde les images en mémoire...
Merci d'avance.

Tanni Lou a dit…

Bonjour,
Votre code fonctionne parfaitement mais lorsque je fais une redirection de mon adresse blogspot à une adresse du type www.machintruc.fr ca ne marche plus. Y a t'il une solution pour remedier à mon problème ? merci de votre aide

Au plaisir de Fabe-ebook a dit…

Vous ne pouvez toujours pas m'aider pour le code ?
Dans ma colonne de gauche ce n'est pas centré.
Cela déborde sur les messages.
J'ai bien compris que je dois intégrer dans le code ce que vous m'avez dit plus haut, mais je ne sait pas où ni lequel des deux ...

Jean-François Augé a dit…

Bonjour,
Je présume que cela ne fonctionne que sur un site blogger..
Vous auriez une solution pour que ça fonctionne ailleurs, sans pouvoir ajouter de bibliothèque dans le leader d'un site ?
Merci

H2OM a dit…

Bonjour,

Lorsque j'insère le diaporama dans un seul article, tout va bien, mais si je veux en insérer un autre dans l'article suivant, le permier diapo est automatiquement remplacé par le second et le second ne marche plus. Le message "chargement du diapo s'affiche" dans le deuxième article. Vous avez une idée? Merci

BRIAND a dit…

Bonjour,
Auriez-vous l'amabilité de me dire comment enlever la bordure de mon diaporama. Je l'ai mis en transparence mais çà se voit quand même si on y regarde de plus près.
Merci beaucoup pour tous les conseils !

Meiser a dit…

Bonjour.

Pour BRIAND :
remplacer :
border:1px white solid;
par :
border:none;


Au plaisir de Fabe-ebook a dit…

Meiser ...
Vous m'avez oubliée ..
Merci de me répondre car je teste des trucs que je ne connais pas alors, forcément, ça marche pas.
Merci

Meiser a dit…


Bonjour.

Pour H2OM : le gadget fonctionne désormais avec plusieurs diaporamas par page.


Meiser a dit…

Bonjour.
à : Au plaisir de Fabe-ebook

Pas oubliée mais le temps manque pour conseiller des modifications individuelles.

Le template ajoute des espaces à gauche avec margin-left ou
padding-left.

Rechercher cela et corriger.
Ou consulter cette page : http://modifier-les-modeles-de-blogger.blogspot.be/2010/01/ajuster-la-position-des-gadgets.html
et ajouter une marge négative à gauche :
margin-left: -10px!important;


Au plaisir de Fabe-ebook a dit…

Merci beaucoup,
Je vais essayer ça ...

Meiser a dit…


Bonjour.

à Capflorian :

L'information doit être enregistrée sur votre pc. Vider la mémoire-cache et supprimer les cookies.


Chris Pixl a dit…

Bonjour,
Merci pour votre aide, grâce à vous et à votre travail, je pense avoir amélioré l'aspect de mon blog.
bien amicalement,
Chris.

Meiser a dit…

Merci à vous.


Association Scraptoujours a dit…

MERCI!!!

Association Scraptoujours a dit…
Ce commentaire a été supprimé par l'auteur.
Dixie BELLE a dit…

Bonjour,
Y'a t'il un moyen de faire apparaitre les légendes des photos dans le diaporama, je n'ai pas trouvé d'attribut "caption" dans le code.
Par avance merci !!

Nomokis a dit…

Bonjour,
Tout d'abord merci pour ce tuto très bien expliqué et très utile.
Tout marche très bien dans mon diaporama sauf une chose : la résolution.
Je souhaite afficher un diaporama relativement grand mais la qualité de l'image reste très faible malgré le changement de résolution. Avez-vous une solution ?
Merci

Alain Michel a dit…

Bonjour et merci pour votre blog plein de bonnes astuces
je tente de mettre un diaporama dans une article d'après un album picasa
mais je retrouve toujours vos bateaux, certes très beaux, ça marche une fois et ils reviennent (?)
j'ai pourtant changer l'adresse du lien RSS
?
merci de vos lumières

laure a dit…

Bonjour, je vous remercie infiniment pour ce code, cela marche très bien.
Je me demandais juste s'il était possible que le diaporama ne soit pas centré
mais aligné sur la gauche. Que faut-il modifier dans le code?
Merci d'avance!