Diaporama d'images déroulantes pour blogger

Fermé

AngeliqueD Messages postés 3 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 8 novembre 2014 - 7 nov. 2014 à 14:25
AngeliqueD Messages postés 3 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 8 novembre 2014 - 8 nov. 2014 à 20:41

Bonjour !
Après avoir fait le tour des forums et autres sites je n'ai toujours pas trouvé de solution à mon problème.
J'ai un blog ( sur blogger ) et je souhaiterais insérer un genre de diaporama déroulant d'images.
Mais pas que les images apparaissent une par une, juste qu'elles défilent automatiquement de gauche à droite. ( En gros une banderole d'images qui passent tour à tour).

Donc je cherche un code HTML ;).

Si quelqu'un pourrait m'éclairer ce serait vraiment génial !

D'avance merci.

A voir également:

Diaporama d'images déroulantes pour blogger
Faire un diaporama photo avec musique windows 10 - Guide
Des images - Guide
Images enregistrées ✓ - Forum Bluetooth
Musique pour diaporama souvenir enfance - Forum Musique / Radio / Clip
Musique pour diaporama anniversaire 18 ans - Forum Musique / Radio / Clip

3 réponses

Réponse 1 / 3

demondu36 Messages postés 1172 Date d'inscription jeudi 21 mai 2009 Statut Membre Dernière intervention 6 janvier 2016 231
7 nov. 2014 à 14:27

UN peu de java et de HTML et c'est bon att...

Réponse 2 / 3

demondu36 Messages postés 1172 Date d'inscription jeudi 21 mai 2009 Statut Membre Dernière intervention 6 janvier 2016 231
7 nov. 2014 à 14:30

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

Réponse 3 / 3

AngeliqueD Messages postés 3 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 8 novembre 2014
7 nov. 2014 à 14:45

Merci pour ta réponse.

Donc si je comprend bien je dois ajouter les codes 1 - 2 - 3 - 4, à la suite, dans ma page dans la partie HTML ?

( ce n'est pas pour un gadget, c'est pour une page de l'un de mes onglets déroulants, afin de faire dérouler les images de ma galerie images)

et concernant les images il faut que les hébergent avant ?

demondu36 Messages postés 1172 Date d'inscription jeudi 21 mai 2009 Statut Membre Dernière intervention 6 janvier 2016 231
7 nov. 2014 à 14:59

je ne sais pas si cela fonctionne avec un onglet déroulant ...

AngeliqueD Messages postés 3 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 8 novembre 2014
8 nov. 2014 à 20:41

pourtant la mise en page est la même ... c'est sur ?

Discussions similaires

Boucle sur la première diapositive d'une présentation

calcule nombre des pixels "noir" dans un image (noir/blanc)

Une musique qui évoque le souvenir ?

suggestion de chanson pour montage photo

voir ses images enregistrés