diaporama

par isabelle25 Mar 28 Fév 2012 - 21:59

j'ai suivi le tutoriel pour poster un diaporama sur le forum (sur le principe du thème du mois)
3 photos passent, la 4e non, pourtant je suis la même démarche
j'ai essayé de renommer la photo, mais ça ne change rien
http://allv.forumgratuit.org/

sinon est-il possible de mettre davantage de photos, juste en rajoutant le même code ?

par Adam_sfp Mer 29 Fév 2012 - 9:43

Bonjour

En regardant rapidement vous avez 2 fois le lien img4.src = 'https://i.servimg.com/u/f43/16/13/76/63/00611.jpg';
dans votre code...
c'est peut être ceci qui fait buguer le défilement..

Si c'est juste pour faire défiler des images vous pouvez utiliser Jquery Cycle

qui propose pas mal d'effets différents...
Par exemple pour vos images il faudrait mettre ceci dans un widget:

Code:: <html> <head> <title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css"> .slideshow { height: 216px; width: 216px; margin: auto } .slideshow img { padding: 7.5px; border: 1px solid #F2EBAC; background-color: #EBDE67; } </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="http://i43.servimg.com/u/f43/16/13/76/63/classe16.jpg" width="200" height="200" /> <img src="http://i43.servimg.com/u/f43/16/13/76/63/classe17.jpg" width="200" height="200" /> <img src="http://i43.servimg.com/u/f43/16/13/76/63/classe18.jpg" width="200" height="200" /> <img src="http://i43.servimg.com/u/f43/16/13/76/63/classe20.jpg" width="200" height="200" /> <img src="http://i43.servimg.com/u/f43/16/13/76/63/001-110.jpg" width="200" height="200" /> </div> </body> </html>

Pour un autre effet remplacez fade par scrollDown par exemple..

*Vous pouvez rajouter des images dans la partie <div class="slideshow">

Cordialement

par isabelle25 Mer 29 Fév 2012 - 20:23

oui merci, c'est bon, j'avais effectivement mis deux fois le même code

diaporama

diaporama

Re: diaporama

Re: diaporama