A voir également:
- Code html image défilante
- Image défilante html css - Meilleures réponses
- Image défilante html css ✓ - Forum - Webmaster
- Mettre une image à gauche en css ✓ - Forum - CSS
- Boutons html pour faire défiler des images ? ✓ - Forum - HTML
- Image défilante html ✓ - Forum - Javascript
- Générer un code html pour faire défiler une image avec un lien - Forum - HTML
4 réponses
Lord Zero
12 sept. 2011 à 18:06
- Messages postés
- 459
- Date d'inscription
- lundi 18 octobre 2010
- Statut
- Membre
- Dernière intervention
- 15 juin 2018
12 sept. 2011 à 18:06
je donne la source du slider proposer par soft1ne.
https://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Même s'il est gratuit, c'est toujours sympa de mettre un lien vers le vrai concepteur du code, et c'est plus simple de le voir en images. ;)
https://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Même s'il est gratuit, c'est toujours sympa de mettre un lien vers le vrai concepteur du code, et c'est plus simple de le voir en images. ;)
je ne connais pas le principe de wiféo, mais si tu veux le code je peux te le donner, le voici :
Je pense que ca devrait fonctionner
<script type="text/javascript" src="http://www.queness.com/resources/html/slideshow/js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',5000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content $('#gallery .content').html(caption); } </script> <style type="text/css"> .clear { clear:both } #gallery { position:relative; top:30px; height:400px } #gallery a { float:left; position:absolute; } #gallery a img { border:none; height:400px; width:500px; } #gallery a.show { z-index:500 } #gallery .caption { -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; z-index:600; background-color:#000; color:#ffffff; height:100px; width:500px; position:absolute; bottom:30px; } #gallery .caption .content { margin:5px; font-size:20px; } #gallery .caption .content h3 { margin:0; padding:0; color:#1DCCEF; } </style> <br><br> <div id=propose_accueil> <div id="gallery"> <a href="#" class="show"> <img src="http://www.les-vegetaliseurs.com/media/cliches_natures/20080801_211018.jpg" alt="Flowing Rock" width="580" title="" alt="" rel="<h3>Nos Arbres</h3>Voici un de nos arbres centenaires. "/> </a> <a href="#"> <img src="http://medias01.enjoyconstellation.com/f_1c37ec3e-609a-4d7e-9829-db6f10d93821_134.JPG" alt="Grass Blades" width="580" title="" alt="" rel="<h3>La miellerie</h3>Visitez la miellerie et apprenez comment le miel est fait. "/> </a> <a href="#"> <img src="http://static.flickr.com/2614/3923931250_62c49f7e53.jpg" alt="Ladybug" width="580" title="" alt="" rel="<h3>Nos Bambous</h3>Découvrez notre forêt de bambous. "/> </a> <a href="#"> <img src="http://www.pyrenees-sante.com/wp-content/uploads/2010/12/miel.jpg" alt="Ladybug" width="580" title="" alt="" rel="<h3>Nos Miels</h3>Venez découvrir notre miel, et participez à une gustation gratuite. "/> </a> <div class="caption"><div class="content"></div></div> </div>
Je pense que ca devrait fonctionner
Donc pour info tu ne peux pas utiliser du HTML pour faire défiler des images (du moins pas avant du HTML5/CSS3 stable) il faut que tu utilises du JavaScript (utilise la librairie jQuery ça sera plus simple) comme par exemple le code de soft1ne, ce qui se trouve entre les balises <script> et </script>