Comment append des boutons next / prev à un diaporama

Hyper-mega-noob-question, je me suis demandé comment append des boutons suivants / précédents à un curseur simple que j’ai trouvé par Soh Tanaka et que je voulais vous demander de nous aider dans cette tâche. Jusqu’ici, j’ai obtenu le curseur pour travailler avec une info-bulle et pour charger les images à partir d’un xml (selon mes besoins) mais je suis assez nouveau pour jQuery et je ne parviens pas à faire fonctionner les boutons suivant / précédent 🙁 .. ce que j’ai eu jusqu’à présent:

CSS

body { margin: 0; padding: 0; font: normal 10px Verdana, Arial, Helvetica, sans-serif; } *{outline: none;} img {border: 0;} .container { width: 322px; padding: 0; margin:30px 10px 0 10px; } /*--Main Container--*/ .main_view { position: relative; } /*--Window/Masking Styles--*/ .window { height:270px; width: 320px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; z-index:1; } /*--Paging Styles--*/ .paging { position: relative; width: 320px; height:35px; text-align: center; line-height: 35px; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 0 2px; text-decoration: none; color: #000; } .paging a.active { color: #fff; font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} .box { margin:0; padding:0; display: block; width:318px; height:268px; float: left; border:1px solid #ddd; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; } .box h3 { font-size: 16px; text-align:center; white-space:wrap; } .box img { margin-left:40px; margin-bottom:-5px; } .box .slider-title { color: red; margin-bottom:4px; margin-top:6px; } .box .slider-subtitle { width:320px; float:left; margin-bottom:4px; } .box .input_Default { width:320px; display:block; float:left; text-align:center; } .loading { background: url(loading.gif) no-repeat 0 0; position: absolute; top: 30px; left: 30px; z-index: 9999; } .subt { color: #fff; background:#1d1d1d; padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .moreinfo .subt { display:none; } 

JS

 $(document).ready(function() { $.ajax({ type: "GET", cache: false, url: "ads.xml", data: 'xml', success: function (d) { $(d).find('promo').each(function(){ var $promo = $(this); var title = $promo.find('title').text(); var subtitle = $promo.find('subtitle').text(); var image = $promo.attr('image'); var link = $promo.attr('link'); var index = $promo.attr('index'); var ads = '
' + title + '
'; ads += '
 test sub
'; //ads += '
 '; ads += '
' + subtitle + '
' ; ads += '
Learn More
'; ads += '
'; var pager = '' + index + ''; $('.image_reel').append($(ads)); $('.paging').append($(pager)); //$('.loading').fadeOut(1400); }); } }); $('.image_reel').ajaxStop(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".box").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var sortingggerID = $active.attr("rel") - 1; var image_reelPosition = sortingggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".image_reel").animate({ left: -image_reelPosition }, 800 ); }; rotateSwitch = function(){ play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 7000); }; rotateSwitch(); $(".image_reel a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); $(".next a").click(function() { $active = $('.paging a.active').parent().next().find('a'); if ( $active.length === 0) { //If paging reaches the end… $active = $('.paging a:first'); //go back to first } clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); $(".prev a").click(function() { $active = $('.paging a.active').prev(); if ( $active.length === 0) { //If paging reaches the end… $active = $('.paging a:first'); //go back to first } clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); $('.moreinfo').each(function() { var subt = $(this).find('.subt'); $(this).hover( function() { subt.appendTo('body'); }, function() { subt.appendTo(this); } ).mousemove(function(e) { var x = e.pageX + 20, y = e.pageY + 20, w = subt.width(), h = subt.height(), dx = $(window).width() - (x + w), dy = $(window).height() - (y + h); if ( dx < 20 ) x = e.pageX - w - 20; if ( dy < 20 ) y = e.pageY - h - 20; subt.css({ left: x, top: y }); }); }); }); }); 

HTML

• jquery slide show – pourquoi ce code fonctionne-t-il?
• Sous-titres avancés avec bxslider
• Changer dynamicment jQuery image src
• array.eq () vs. array en Javascript et Jquery
• Jquery image transition de gauche à droite et ouverture en fondu, dans un diaporama

 
 
 
 
 
 
 next next previous 
 next next  

Toutes les images et tous les boutons proviennent d’un XML, et cela fonctionne très bien, mais les boutons next / prev sont mon problème principal :(.

Voici la version originale non-XML de JSFiddle i mise à l’essai, EDIT, version originale http://jsfiddle.net/scPqJ/1/

L’un de vous, ninjas, peut-il m’indiquer la bonne direction?

MODIFIER

Pour toute future génération à la recherche d’une solution, un utilisateur dans les commentaires de sohtanaka.com m’a aidée à le faire fonctionner, voici le JsFiddle, http://jsfiddle.net/scPqJ/3/

C’est le Js pour les boutons (vous le définissez à la fin du JS original, avant les crochets finaux:

JS

 $(".previous a").click(function() { $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); $(".next a").click(function() { $active = $('.paging a.active').prev(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:last'); //go back to first } clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); 

Après avoir configuré cela, tout ce que vous avez à faire est de définir les divs suivantes / précédentes dans le code HTML, comme ceci:

HTML

 
 next 
 
 previous  

et voila !.

• Le deuxième diaporama en attente de la fin du premier diaporama
• Redimensionnement automatique élégant du diaporama Galleria jQuery lorsque la fenêtre est redimensionnée
• slidejs: comment contrôler deux diapositives avec le même bouton précédent / suivant?
• Avancer le diaporama manuellement avec jquery
• Comment puis-je obtenir une liste d’images dans un dossier en utilisant javascript?

 $('#next').click(function(){ var $pagingLinks = $('.paging a'); var $nowActive = $('.paging a.active'); var nextIndex = $nowActive.index()+1; if(nextIndex == $pagingLinks.length) nextIndex = 0; $active = $pagingLinks.eq(nextIndex); //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor });