Step Carousel help

**Jis Anup** · 11-24-2010, 07:25 AM

1) Script Title: Step Carousel Viewer v1.9.....
Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, pagination buttons enabled

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem: I want to add one play / pause buttom in this script...I am not proficient in Jquery..So please help me.

**jscheuer1** · 11-26-2010, 05:04 PM

This is about as close as you're going to get:

Demo (click to view)

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Make sure page contains valid doctype at the very top!-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 20px solid #ffa500;
overflow: scroll; /*leave this value alone*/
width: 530px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.mygallery_pause_resume {
	width: 6em;
}

#mygallery-paginate {
	width: 570px;
	text-align: center;
}

.gallerycontainer {
	margin: 2em;
}

</style>



<script type="text/javascript">
stepcarousel.stopautostep = function(config){
	clearTimeout(config.steptimer);
	if(config.autostep.hoverstate !== 'over' || config.autostep.status === 'stopped'){
		jQuery('.' + config.galleryid + '_pause_resume').val(config.pauseresumelabels[1]);
	}
};

stepcarousel.setup({
	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: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
	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']
	pauseresumelabels: ['Pause', 'Resume'], //labels for pause/resume button
	oninit: function(){
		var c = this, id = c.galleryid, $ = jQuery, nav = c.defaultbuttons.enable === true? c.$leftnavbutton.add(c.$rightnavbutton) : null;
		c.$gallery.add(nav).unbind('mouseenter').mouseenter(function(){
			c.autostep.hoverstate = 'over';
			stepcarousel.stopautostep(c);
		});
		$('.' + id + '_pause_resume').click(function(){
			if(this.value === c.pauseresumelabels[0]){
				stepcarousel.stopautostep(c);
				this.value = c.pauseresumelabels[1];
			} else {
				stepcarousel.stopautostep(c);
				this.value = c.pauseresumelabels[0];
				c.autostep.status = null;
				stepcarousel.autorotate(id);
				c.steptimer = setInterval(function(){stepcarousel.autorotate(id)}, c.autostep.pause);
			}
		}).val(c.autostep.enable === true? c.pauseresumelabels[0] : c.pauseresumelabels[1]);
	}
})

</script>
</head>
<body>
<div class="gallerycontainer">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>

<p id="mygallery-paginate">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" /><br>
<input class="mygallery_pause_resume" type="button"> 
</p>
</div>

</body>
</html>

**Jis Anup** · 11-30-2010, 11:05 AM

Thank You...Thanks a lot jscheuer1.

**jscheuer1** · 12-01-2010, 03:51 PM

Further testing shows that undesirable things happen at times with the existing mouseover/mouseout pause/resume function of the script. Sometimes when the Carousel is stopped by other actions, mousing over then out of the Carousel will resume it without changing the value/action of our new button. I had tried to fix that by modifying the native mouseover/mouseout:

Code:

		c.$gallery.add(nav).unbind('mouseenter').mouseenter(function(){
			c.autostep.hoverstate = 'over';
			stepcarousel.stopautostep(c);
		});

But that didn't work in all cases. I'm not sure if there is a modification that can without editing the main stepcarousel.js file, which I always try to avoid doing, as editing the main script makes updating it later a pain and using it for other pages without the modification virtually impossible. In this case, I'm not even sure that can be easily done. Add to that the fact that its pause/resume action includes a pause before resuming that is disconcerting along side our new pause/resume button's which has no pause before resuming for its resume.

So, the fix I recommend at the moment (pending any future inspiration) is just getting rid of the native mouseover/mouseout pause/resume. To do so, change the above to simply:

Code:

		c.$gallery.add(nav).unbind('mouseenter mouseleave');

It's no longer needed now that the user may pause at any time with the pause/resume button.

Thread: Step Carousel help

Thread Tools

Search Thread

Step Carousel help

Bookmarks

Bookmarks

Posting Permissions