View Full Version : Step Carousel working with mouse over ?

03-28-2012, 07:55 AM
1) Script Title: Step Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

Step Carousel is working just perfect

But how to make it to work even with Mouse over it ?

03-28-2012, 11:34 AM
The idea is that if the mouse moves over the carousel it pauses, so that if a panel is linked or has an onpanelclick behavior, it can more easily be clicked on.

That said, you can disable this feature by commenting out this section of the code (around line #114):

/* $carouselparts.hover(function(){ //onMouseover
}, function(){ //onMouseout
if (config.steptimer && config.autostep.hoverstate=="over" && config.autostep.status!="stopped"){
config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause)
}) */

Using a text only editor like NotePad, add the highlighted comment tokens as shown. If you have no links or onpanelclick behavior(s), there should be no problem with doing it this way. If you do though, it will be hard for the user to click on a panel as it might move out from under the mouse before they can click it.

03-28-2012, 12:10 PM
Thank you, jscheuer1

I really thank you!

and a final question - is it possible it to rotates pictures with no stop at the end - to rotate it forever?

I read the documentation but I'm not sure what and where to do?

Thanx again in advance! :-)

03-28-2012, 01:35 PM
You have to have autostep enabled of course, and contrary to what it says on the demo page:

autostep: {enable:true, moveby:1, pause:3000}

v1.6 parameter Set this parameter to auto rotate the panels, specifying the number of panels to move each time, and pause between rotating. Note that during auto rotation, moving the mouse over the Carousel or the default buttons (if enabled) pauses it, while moving your mouse out resumes it again. Clicking on the Carousel stops auto rotation altogether. This parameter has 3 properties:

enable: Boolean (true/ false) setting on whether to enable auto rotation.
moveby: Number of panels to move by each time. Negative number moves panels backwards instead.
pause: Pause between rotation in milliseconds.

Note that if autostep is enabled, this automatically sets "panelbehavior.wraparound:true" as well.

The wraparound must be set to true, example on page setup call:

<script type="text/javascript">

galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause: 3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['10/leftnav.gif', -5, 80], rightnav: ['10/rightnav.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']