Question

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()
    .find ('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);
    }
   });

  });

Answer 1

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 !