The idea was to have on one page a slideshow, and to give the possibility to have direct access to a photo by clicking on a thumb. The enlarged photo should be shown in the same container and stop the slideshow. Idealy, the slideshow starts again from that photo when the user clicks on "play" 
My first problem is that the enlarged image from a thumb doesn't want to go in the div the slideshow 
Here the code based on the Swiss Army Slideshow and the Image Thumbnail Viewer II :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->
<script type="text/javascript">
var preload_ctrl_images=true;
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';
var slides=[]; //FIRST SLIDESHOW
slides[0] = ["photo1.jpg", "Kissing Fools"];
slides[1] = ["photo2.jpg", "Seated Woman"];
</script>
<script src="swiss_2.js" type="text/javascript">
</script>
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">
</script>
<script type="text/javascript">
$(function(){
$('#thumbs img').click(function(){
$('.show').hide();
$('#' + $(this).attr('name')).show();
});
});
</script>
</head>
<body>
<div id="show">
<script type="text/javascript">
new inter_slide(slides)
</script>
<div id="thumbs">
<a href="photo1.jpg" rel="enlargeimage::click" rev="show"><img src="thumb1.jpg" border=0></a><br />
<a href="photo2.jpg" rel="enlargeimage::click" rev="show"><img src="thumb2.jpg" border=0></a><br />
</div>
</body>
</html>
Hide a script by another
Reply With Quote
Originally Posted by lio
and finally I have tried with the original script 
Bookmarks