diaporama picasa plein ecran 1

obtenir ces boutons

Ajouter un diaporama PLEIN ÉCRAN (1/3)
avec les images d'un album Picasa

"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.

On peut facilement mettre dans un blog un diaporama PLEIN ÉCRAN des images d'un album de photos hébergées par Picasa.

Pour en voir un exemple sans fond musical, cliquer sur ce lien : après quelques secondes, le diaporama apparait.

Pour voir un exemple avec fond musical, cliquer sur ce lien : après quelques secondes, le diaporama apparait.

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.

Remarques :

On trouve sur la page suivante (2/3) 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. Son avantage est de ne télécharger qu'une image à la fois, ce qui le rend plus adapté pour des albums comportant un nombre de photos important (qui risque de saturer la mémoire de l'ordinateur).

La page suivante (3/3) explique comment ajouter sur un blog un diaporama PLEIN ÉCRAN qui affiche les images dont l'adresse est ajoutée dans le code.

* * * * *
Pour obtenir le diaporama dont question ci-dessus, il suffit d'ajouter le code ci-dessous dans la version HTML d'un article ou d'une page d'un blog (un blog de préférence sans gadgets pour réduire le temps de chargement inutile : on peut créer un autre blog spécialement pour cela) :

<div id="cache" class="cache" "><br /><br /><br /><br />... chargement des images en cours ...</div>
<div id="Diaporama1" class="slideshow">
</div>
<style>.slideshow{width : 100%;height : 100%;padding:0px;position:fixed; left: 0px; top:0px; z-index:999;}.slideshow div div{margin-top:-40px;background:none !important;} .slideshow div div img{display:inline;padding:0px;border:1px white solid;} .cache{width:100%; height:100%;position:fixed;left:0px;top:0px; background:black; z-index:997;text-align:center;color:white;"}</style>

<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 = "/s1600/";
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>

<div id="cache" class="cache">
</div>

* * * * *
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 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);},

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

On peut aussi diminuer la résolution (/s1600/) des images pour accélérer l'affichage : (/s800) ou (/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.

* * * * *
On peut ajouter un fond musical. Il faut cependant laisser le choix au visiteur car il ne pourra pas couper le son et sera peut-être déjà en train d'écouter un programme musical.

Pour ajouter un fond musical, il suffit d'ajouter ce qui suit AU-DESSUS du code proposé ci-dessus :
<object type="application/x-shockwave-flash" data="http://grooveshark.com/widget.swf" width="250" height="400"><param name="wmode" value="window" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="hostname=cowbell.grooveshark.com&playlistID=92162426&bbg=FFFFFF&bth=FFFFFF&pfg=FFFFFF&lfg=FFFFFF&bt=377D9F&pbg=377D9F&pfgh=377D9F&si=377D9F&lbg=377D9F&lfgh=377D9F&sb=377D9F&bfg=F6D61F&pbgh=F6D61F&lbgh=F6D61F&sbh=F6D61F&p=1" /></object>

Pour changer l'album de musique : cliquer ici.

10 commentaires:

Lou a dit…

Bonjour,

Est-il possible d'empêcher le diaporama plein écran de s'afficher en boucle?


Je consulte souvent vos pages pour améliorer mon blog. Merci beaucoup!

Meiser a dit…


Bonjour.

Pas avec ce code qui fonctionne avec un module de Google.


Lou a dit…

Ah dommage... J'essaierai d'en trouver un autre. Merci de votre réponse.

laure a dit…

Bonjour, merci beaucoup pour votre aide, c'est très précieux.

Je voudrais ajouter ce diaporama en plein écran mais que mes images soient un peu plus petites pour qu'elles soient encadrées de noir et pas collées sur le bord. J'ai réduit à 80%, mon diaporama est bien plus petit mais collé en haut. Y a t il un moyen de centrer?

en vous remerciant.

Meiser a dit…

Bonjour.

Vous pouvez utiliser ces instructions pour positionner le diaporama :

position:absolute;left:50px;top:19px;

en modifiant les chiffres selon vos besoins.


Sou des Ecoles Monthieux a dit…

Bonjour,
J'avoue je crise un peu mais grace à votre aide j'ai bien réussi a insérer le diaporama de mes rêves.
Mais je ne vois pas les commentaires des photos, est-ce possible de les afficher?
C'est peut être à cause de la taille des photos?
Un grand merci pour votre aide

Meiser a dit…

Bonjour.

Ce n'est pas prévu dans ce code. Il faudrait ajouter quelques lignes d'instructions.


Sonia Salon a dit…

Bonjour,

Merci pour la mise à disposition de ce code. Je n'arrive pas à le faire fonctionner sous internet explorer, auriez vous une solution ?

Je n'ai pas trouvé non plus comment il est possible d'afficher les vignettes des photos d'un album. Sauriez vous si c'est possible?

Merci !

Nomokis a dit…

Bonjour !
Merci pour ce code et ces explications. Tout marche très bien, mais j'aimerais que les images s'affichent soit à 100% de la taille de l'écran, soit à leurs taille réelle si elle sont plus petites que l'écran. Es-ce possible ?
Merci

Nomokis a dit…

Re-bonjour,
Encore une question : que faire maintenant que grooveshark est mort ?
Merci !