Diaporama d'images déroulantes pour blogger
AngeliqueD
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
AngeliqueD Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
AngeliqueD Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
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.
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
- Des images - Guide
- Faire un diaporama photo avec musique windows 10 - Guide
- Listes déroulantes excel - Guide
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
- Un agent immobilier a préparé un diaporama pour présenter une maison à vendre. appliquez la mise en forme de la première diapositive à toutes les autres. quel est le code du portail ? ✓ - Forum Powerpoint
3 réponses
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);},
<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);},
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 ?
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 ?