I am using a dynamic gallery : The slideshow starts on page load. The page should be refreshed after each slideshow loop. I have modified the code and it works fine in other browsers except intrenet explorer.
The error in IE: The slideshow skips last image in the group. Here is my code.. Please help me to solve this issue.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="refresh" content="10"/>-->
<title>Highslide JS</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 1;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
[hilight]repeat: false,[/hilight]
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery" style="width: 600px; margin: auto" >
<a [hilight]id="autoload"[/hilight] class='highslide' href='../images/thumbstrip02.jpg' [hilight]onclick="return hs.expand(this, { autoplay:true })"[/hilight] >
<img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>
<a class='highslide' href='../images/thumbstrip03.jpg' onclick="return hs.expand(this)">
<img src='../images/thumbstrip03.thumb.png' alt='Sunset in the mountain'/></a>
<a class='highslide' href='../images/thumbstrip04.jpg' onclick="return hs.expand(this)">
<img src='../images/thumbstrip04.thumb.png' alt='Resting skier'/></a>
<a class='highslide' href='../images/thumbstrip05.jpg' onclick="return hs.expand(this)">
<img src='../images/thumbstrip05.thumb.png' alt='Contemplating dog'/></a>
<a class='highslide' href='../images/thumbstrip06.jpg' onclick="return hs.expand(this)">
<img src='../images/thumbstrip06.thumb.png' alt='Cabins'/></a>
</div>
</body>
</html>
--------------------------------------------------
in highslide-full.js I hadded the page reload code.
Code: Select all
checkFirstAndLast: function() {
if (this.repeat || !this.controls) return;
var exp = hs.expanders[this.expKey],
cur = exp.getAnchorIndex(),
re = /disabled$/;
if (cur == 0)
this.disable('previous');
else if (re.test(this.btn.previous.getElementsByTagName('a')[0].className))
this.enable('previous');
if (cur + 1 == hs.anchors.groups[exp.slideshowGroup || 'none'].length) {
this.disable('next');
this.disable('play');
[hilight]location.reload(true); // Page refresh after completion of each loop[/hilight]
} else if (re.test(this.btn.next.getElementsByTagName('a')[0].className)) {
this.enable('next');
this.enable('play');
}
},
