The browser cache may need to be cleared and/or the page refreshed to see changes.
In your showHide function, add the highlighted:
Code:
<script type="text/javascript">
function showHide(id) {
window['slideshow' + id].navigate(0);
var el = document.getElementsByClassName('slider');
var L , i=0;
while(L = el[i++]) {
L.style.display=(L.getAttribute('id') == 'div-'+id) ? "block" : "none";
}
var el2 = document.getElementsByTagName('li');
var M , u=0;
while(M = el2[u++]) {
M.className=(M.getAttribute('id') == 'a-'+id) ? "active" : "";
}
}
</script>
Or, since you're using jQuery, replace it with this one:
Code:
<script type="text/javascript">
function showHide(id) {
window['slideshow' + id].navigate(0);
var $ = jQuery;
$('.slider').hide().filter('#div-' + id).show();
$('li').removeClass('active').filter('#a-' + id).addClass('active');
}
</script>
That way it will work in IE 8 and less. (IE 8 and less do not support document.getElementsByClassName)
Or even:
Code:
<script type="text/javascript">
function showHide(id) {
var $ = jQuery;
$('.slider').each(function(i){
window['slideshow' + (i + 1)].navigate(0);
}).hide().filter('#div-' + id).show();
$('li').removeClass('active').filter('#a-' + id).addClass('active');
}
</script>
which will not show a 'ghost' transition as you switch slideshows when the one being switched to is not already at the 0 position.
BTW, if you want the captions to show up at the beginning of the slide fade in instead of after, I have a script for that, let me know.
Bookmarks