The best thing to do would be to combine the images somehow, each map with its corresponding image.
But, failing that, this is pretty good:
Code:
<html>
<head>
<style type="text/css">
/* All Styles Optional */
* {
font-family:arial;
font-size:10pt;
}
</style>
<script type="text/javascript">
var slides1=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides1[0] = ["images/place1.jpg", "The place of 'Shanghai'"];
slides1[1] = ["images/place2.jpg", "The place of 'Saint Vasili-cathedral'"];
slides1[2] = ["images/place3.jpg", "The place of 'Quattrocchi'"];
slides1[3] = ["images/place4.jpg", "The place of 'Chile' "];
slides1.counter=1;
slides1.use_title=1;
slides1.manual_start=1;
var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/map1.jpg", "Map for 'Shanghai'"];
slides2[1] = ["images/map2.jpg", "Map for 'Saint Vasili-cathedral'"];
slides2[2] = ["images/map3.jpg", "Map for 'Quattrocchi'"];
slides2[3] = ["images/map4.jpg", "Map for 'Chile'"];
slides2.use_title=1; //use for descriptions as images title attributes
slides2.no_controls=1;
slides2.manual_start=1;
slides2.delay=3000;
(function(){
function augmentcontrols(){
var ctrls = ['', '', ''];
document.getElementById('prev0').onclick = function(){
iss[0].changeimg(false, 'nav');
iss[1].changeimg(false, 'nav');
};
document.getElementById('gostp0').onclick = function(){
iss[0].gostop(this);
iss[1].gostop();
};
document.getElementById('next0').onclick = function(){
iss[0].changeimg(true, 'nav');
iss[1].changeimg(true, 'nav');
};
setTimeout(function(){
if(iss[0].playing){
return;
}
iss[0].gostop(this);
iss[1].gostop(document.getElementById('gostp0'));
}, 3000);
}
if (window.addEventListener){
window.addEventListener('load', augmentcontrols, false);
}
else if (window.attachEvent){
window.attachEvent('onload', augmentcontrols);
}
})();
</script>
<script src="js/swissarmy.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">new inter_slide(slides1)</script>
</div>
<br>
<div>
<script type="text/javascript">new inter_slide(slides2)</script>
</div>
</body>
</html>
The only problem is, on slower connections, the shows might not sync up. That's why I suggest combining the images. However, as Beverleyh says, there may be a better script, one that could show two images at a time. Perhaps:
http://www.dynamicdrive.com/dynamici...epcarousel.htm
would be good. The images would be side by side, but at least they would be in sync, even on slower connections.
Swiss Army Image Slideshow modification...
Reply With Quote
Bookmarks