Slide show in jQuery doesn't respond on next button
I use this jQuery slide show http://css-tricks.com/moving-boxes/ in my page but the problem in this slide show is that until you press next button it doesn't move to next image so is there any solution to automatically moving these images in slide show or same like this any other Thanks
The code is
$ (function(){
$ ('#slider-two').movingBoxes ({
startPanel: 3, // start with this panel
width: 600, // overall width of movingBoxes
panelWidth: .7, // current panel width adjusted to 50% of overall width
imageRatio: 16/9, // Image ratio set to 16:9
buildNav: true, // if true, navigation links will be added
navFormatter: function (index, panel){ return panel.find ('h2 span').text(); }, // function which gets nav text from span inside the panel header
});
// Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
// Get: var currentPanel = $ ('.slider').data ('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
// set: var currentPanel = $ ('.slider').data ('movingBoxes').currentPanel (2); // scrolls to 2nd panel & returns 2.
// Set up demo external navigation links
var I, t = ', len = $ ('#slider-one .panel').length + 1;
for ( I=1; I<len; I+){
t += '<a href="#" rel="' + I + '">' + I + '</a> ';
}
$ ('.dlinks')
.find ('span').html (t).end()
.fin开发者_C百科d ('a').click (function(){
$ ('#slider-one').data ('movingBoxes').currentPanel ( $ (this).attr ('rel'));
return false;
});
// Report events to firebug console
$ ('.slider').bind ('initialized initChange beforeAnimation completed',function (e, slider, tar){
// show object ID + event in the firebug console
if (window.console & window.console.firebug){
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
txt += (typeof (tar) == 'undefined')? ': ', Targeted panel is ' + tar;
console.debug ( txt);
}
});
});
For information, a complete readme with all the options can be viewed here : https://github.com/chriscoyier/MovingBoxes
Code modification
Try to replace the slider initialization with this code :
$('#slider-two').movingBoxes({
startPanel : 3, // start with this panel
completed: function() { //function runs after slider completes movement
setTimeout(function() {
$("#slider-two").data('movingBoxes').goForward(); // move to next slide.
}, 5000); // execute the given function after 5 seconds
},
wrap : true, // restart the slideshow after the end
width : 600, // overall width of movingBoxes
panelWidth : .7, // current panel width adjusted to 50% of overall width
imageRatio : 16/9, // Image ratio set to 16:9
buildNav : true, // if true, navigation links will be added
navFormatter: function(index, panel){ return panel.find('h2 span').text(); }, // function which gets nav text from span inside the panel header
});
The important lines are the one with the 'completed' option. The add a callback called every time a new slide is shown in order to change in the next 5 seconds.
I also added wrap : true
to activate wrapping, this means the slideshow will restart at the beginning when it reaches end.
Now you must start the slideshow somehow, so you can add this code just before the final }
(last line of your pasted code) :
$("#slider-two").data('movingBoxes').goForward(); // move to next slide.
I hope this is right. Have fun !
You're gonna want to create a loop that will cause your boxes to move. Your code might look like this:
sleepTime = 5000; //This is the # of milliseconds between slides
$(document).ready(function() {
$(".slider").movingBoxes({
wrap: true,
completed: function() { //function runs after slider completes movement
setTimeout(sleepTime);
$(".slider").data('movingBoxes').goForward(); //recalls itself.
}
});
$(".slider").data('movingBoxes').goForward(); //Initial Slide
}
Enjoy
Edit
Added wrap: true to the slider initialization.. This will fix any errors when you reach the end of the show.
精彩评论