Menu
I am using free code for the nivo-slider slide show.
I am trying to have only one slide show running chosen by the button id.
I have the first one loading onload
This is not working consistently.
Choosing id 1 or 2 seems to work but sometimes it will not loop through to 3 or 4.
When I have only alerts in place of the slideshow code it runs through flawlessly.
I don’t yet know much about the inner workings of webpages but I suspect that maybe resources are not being released or something.(I am probably talking gibberish here)
Some kind of conflict?
Please help.
Thank you. geddeca
[code]
<button id=1>Group Photos</button>
< button id=2>Miscellaneous</button>
<button id=3>Trips</button>
button id=4>Old Pictures</button>
<script>
var buttons = document.getElementsByTagName(“button”);
var buttonsCount = buttons.length;
for (var i=0; i <= buttonsCount; i+=1){
buttons[i].onclick=function(e){
var id= this.id;
alert(id + ‘ clicked’);
for (var i=1; i <= buttonsCount; i+=1){
alert(‘nested for’ + i);
if (i != id) {
var temp = (‘.slider-wrapper ‘ + i)
alert(‘Not id ‘ + temp);
$(‘.slider-wrapper’ + i).hide();
/* $(‘#slider’ + i).hide(); */
$(‘#slider’ + i).data(‘nivoslider’).stop();
}
else {
alert(‘true ‘+ i);
$(‘.slider-wrapper’ + i).show();
$(‘#slider’ + i).nivoSlider({ effect: ‘fade’ } );
} //end else
} //end nested for
};
} //end for
</script>
<div class=”slider-wrapper1 theme-default”>
<div id=”slider1″ class=”nivoSlider”>
<img src=”http://www.codingforums.com/images/Choir2014.jpg” alt=”” title=”2014″ />
……..More images.
</div>
</div>
<div class=”slider-wrapper2 theme-default”>
<div id=”slider2″ class=”nivoSlider”>
<img src=”http://www.codingforums.com/images/Choir2014.jpg” alt=”” title=”2014″ />
……..More images.
</div>
</div>
<div class=”slider-wrapper3 theme-default”>
<div id=”slider3″ class=”nivoSlider”>
<img src=”http://www.codingforums.com/images/Choir2014.jpg” alt=”” title=”2014″ />
……..More images.
</div>
</div>
<div class=”slider-wrapper4 theme-default”>
<div id=”slider4″ class=”nivoSlider”>
<img src=”http://www.codingforums.com/images/Choir2014.jpg” alt=”” title=”2014″ />
……..More images.
</div>
</div>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider1’).nivoSlider({ effect: ‘fade’ });
});
</script>