Changing the background button for pause/resume states

**nickrowe_2k** · 08-05-2011, 01:58 PM

Hi guys im having some trouble assigning a different background image to my buttons pause/resume states.

I have a button class within the html called mygallery_pause_resume and i need to split it into two classes using Javascript (_mypause, _myresume) where I can assign different backgrounds to the buttons.

I have included the code from the template below, please can anyone help, i'm really stuck with this.

regards Nick

Code:

<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', 'Play'], //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>

<!--End Of Carousel Area-->

</body>
</html>

Thread: Changing the background button for pause/resume states

Thread Tools

Search Thread

Changing the background button for pause/resume states

Bookmarks

Bookmarks

Posting Permissions