PDA

View Full Version : 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





<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>