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.

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


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


Unknown 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 !

Unknown 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

Unknown a dit…

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

Celine a dit…

Super, permettez mois de partager ce contenu
https://modifier-les-modeles-de-blogger.blogspot.be/2014/02/diaporama-picasa-plein-ecran.html
https://modifier-les-modeles-de-blogger.blogspot.com.au/2014/02/diaporama-picasa-plein-ecran.html
Clinique Medespoir

Celine a dit…

Super blog je partage sur les reseaux sociaux !
Liposuccion Tunisie
Lifting cuisses Tunisie
Botox Tunisie
Acide hyaluronique Tunisie
Abdominoplastie Tunisie
Clinique esthétique Tunisie
Docteur chirurgien esthétique
https://modifier-les-modeles-de-blogger.blogspot.com/2014/02/diaporama-picasa-plein-ecran.html

chirurgie esthétique en Tunisie a dit…
Ce commentaire a été supprimé par son auteur.
chirurgie esthétique en Tunisie a dit…
Ce commentaire a été supprimé par son auteur.
chirurgie esthétique en Tunisie a dit…

merci pour le partage
augmentation mammaire tunisie
lifting mammaire tunisie
lipofilling seins tunisie
liposuccion en tunisie
réduction mammaire
http://www.clinique-internationale-tunisie.com
https://www.clinique-internationale-tunisie.com/rhinoplastie

Garba Sadou a dit…

Medium Voyant Ésotérisme et prêtre vaudou (Trouvez la solution à tous vos Problèmes)

Certains d'entre vous n'ose plus consultés les sites internet suite à la mauvaise expérience. Il y en a qui ont malheureusement tombé sur des sites malhonnêtes concurrent. Que les choses soient bien claires, je n'ai aucun rapport avec ses sites qui ternissent l'image du maraboutage. Je suis un marabout honnête et sincère. Seulement des consultations et des travaux de hautes qualités-vous sont proposés chez nous avec le stricte RESPECT de la règle drastique. Vous pouvez compter sur moi et mon soutien. J'aimerai vous propose une consultation et un travail unique.

- Ramener sa femme/mari même si cela fait plus de 20 ans
- Ramener sa chance
- Retrouver son amour
- Réussir sa vie
- Contre accident
- Contre sorcellerie
- Avoir facilement du travail
- Avoir des enfants
- Portefeuille magique
- Adhérence pour la protection et la protection de sa maison
Et plus encore!…
Je n'ai pas de problème à travailler à distance
Des résultats sont immédiat et durable.
Le payement ce sera après votre satisfaction.

CONTACT

Téléphone: 00 22 99 57 19 8 63
WhatsApp: 00 22 99 57 19 8 63
Imo: 00 22 99 57 19 8 63
Viber: 00 22 99 57 19 8 63

Boutique Ésotérique « La Magie Vaudou »
Possibilité d'envoi par la DHL, FEDEX, EMS, UPS, TOP-CHRONO, par la POSTE ou par voie mystique
SITE WEB :
http://maraboutgarba.mozello.nl
https://voyancemedium.webnode.fr

Theresa williams a dit…

Bonjour, je suis Theresa Williams. Après des années de relations avec Anderson, il a rompu avec moi. J'ai tout fait pour le ramener, mais tout était en vain. Je le voulais tellement à cause de mon amour pour lui. Je l'ai supplié avec tout, j'ai fait des promesses mais il a refusé. J'ai expliqué mon problème à mon ami et elle m'a suggéré de contacter plutôt un lanceur de sorts qui pourrait m'aider à lancer un sort pour le ramener, mais je suis du genre à ne jamais avoir cru en un sort, je n'avais pas d'autre choix que de l'essayer. posté le lanceur de sorts, et il m'a dit qu'il n'y avait aucun problème que tout allait bien se passer avant trois jours, que mon ex me reviendrait avant trois jours, il a jeté le sort et, étonnamment, le deuxième jour, il était environ 16 heures. Mon ex m'a appelé, j'étais tellement surpris, j'ai répondu à l'appel et tout ce qu'il a dit, c'est qu'il était tellement désolé pour tout ce qui s'est passé qu'il voulait que je lui retourne, qu'il m'aime tellement. J'étais si heureux et je suis allé vers lui. C'est ainsi que nous avons recommencé à vivre ensemble avec bonheur. Depuis lors, j'ai promis que toute personne de ma connaissance connaissant un problème relationnel, je pourrais l'aider en la référant au seul et puissant lanceur de sorts qui m'a aidé à résoudre mon propre problème. Son email: {drogunduspellcaster@gmail.com} vous pouvez lui envoyer un email si vous avez besoin de son aide dans votre relation ou pour toute autre affaire.
1) sorts d'amour
2) Sorts d'amour perdus
3) les sorts de divorce
4) sorts de mariage
5) Sorts de liaison
6) Séparation des sorts
7) sort de mort
8.) Vous voulez être promu dans votre bureau
9) vouloir satisfaire votre amoureux
10) loterie
Contactez ce grand homme si vous rencontrez un problème pour une solution durable
via {drogunduspellcaster@gmail.com}