Hi there,
I have some jQuery, that acts as a rotating gallery, which displays the set of images between 2 panes. The Code forces each pane to be seperate to the next so you never get a duplicate pair.
In addition to this, there is also a tag that triggers a caption div to display links to 2 art-galleries, these link to new sites.
But what I would like to do is add links on the caption div, that switches the in-page gallery to a different set of images, so in the caption you click ‘02’ and the images in the panes switch from image set 01, to image set 02. (see attached image)
I imagine you could simply link to /02/index.html and so on, but it would loose the open caption…?
all code is at danielsilver.org
but ill tag it in incase…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="google-site-verification" content="UYxKEGYXToVxK9wmSystczXM4UVPxrV4VZaXjecPWhg" />
<meta name="description" content="Home page for Artist & Sculptor Daniel Silver." />
<meta name="keywords" content="Daniel Silver, IBID PROJECTS, Galleria Suzy Shammah, saatchi gallery, heads, sculptor, Royal College of Art, 1972" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Daniel Silver</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var inAnimation = false; //flag for testing if there is a picture currently being swapper
function slideSwitch(whichSide) {
if(inAnimation) return false; //if already swapping pictures just return
else inAnimation = true; //set the flag that we process a image
if(whichSide == 'left'){
var active = $('#picturesLeft img.active');
var otherSideActiveSrc = $('#picturesRight img.active').attr('src');
var next = active.next().length ? active.next() : $('#picturesLeft img:first');
if(otherSideActiveSrc == next.attr('src')){ // if the next image to be shown is the same as the one currently shown on the right
next = next.next().length ? next.next() : $('#picturesLeft img:first'); //skip one image or if the otherside is at the end, set to the first image
}
} else {
var active = $('#picturesRight img.active');
var otherSideActiveSrc = $('#picturesLeft img.active').attr('src');
var next = active.next().length ? active.next() : $('#picturesRight img:first');
if(otherSideActiveSrc == next.attr('src')){ // if the next image to be shown is the same as the one currently shown on the right
next = next.next().length ? next.next() : $('#picturesRight img:first'); //skip one image or if the otherside is at the end, set to the first image
}
}
var nextClass = next.hasClass('showLinks')
if(nextClass && $('#captionLeft').css('display') != "block"){
$('#captionLeft').slideToggle(1000, function() {
}
);
}
active.addClass('last-active');
next.addClass('active');
active.removeClass('fullOpacity', 1000, function() { active.removeClass('active last-active') });
next.addClass('fullOpacity', 1000, function(){
inAnimation = false; //reset the flag
});
}
$('#captionCloser').click(function() {
$('#captionLeft').slideToggle(1000);
});
$('#picturesLeft img').click(function() {
return slideSwitch('left'); //swap first image to last position
});
$('#picturesRight img').click(function() {
return slideSwitch('right'); //swap first image to last position
});
});
$(document).ready(function() {
$('body').hide().fadeIn(2000);
});
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
text-align: center;
background-color:#FDFDFE;
font-size:12px;
margin: 60px 0px;
}
div#gallery {
position: relative;
margin: 0px auto;
width: 1000px;
text-align: left;
}
#picturesLeft {
float:left;
width:480px;
}
#picturesRight {
float:left;
margin: 0 0 0 20px;
width:480px;
}
#picturesLeft img, #picturesRight img{
position:absolute;
padding: 20px 20px 20px 20px;
z-index:8;
opacity:0.0;
cursor:pointer;
}
#picturesRight img{
top:0;
left:500px;
z-index:8;
}
#picturesLeft img.active, #picturesRight img.active {
z-index:10;
}
#picturesLeft img.last-active, #picturesRight img.last-active {
z-index:9;
}
.clear {
clear:both;
}
#picturesLeft img.fullOpacity, #picturesRight img.fullOpacity{
opacity:1.0;
}
#captionLeft{
color: black;
position:absolute;
top:645px;
left:17px;
width:300px;
height: 30px;
padding: 0 0;
margin: 0 0;
background-position: 0 0;
background-repeat:no-repeat;
display: none;
z-index:11;
}
ul#menu{ margin:0; padding:0; list-style:none;}
#menu li{overflow:hidden; display:inline; float:left;}
#menu li a{background:url('navmatrix.png') no-repeat; width:300px; height: 30px; display:block; }
#menu li a span { display: none; }
/* close button
#menu li.close{width:14px; height:14px; margin: -4px 0 0 920px;}
#menu li.close a{width:14px; height:14px; background-position:-377px -12px;}
#menu li.close a:hover{background-position:-577px -12px;}
*/
/* IBid button */
#menu li.ibid{width:105px; height:23px; margin: 0px 15px 0px 0px; border-right:thin solid; border-color:#666;}
#menu li.ibid a{background-position:-15px -5px; width:95px; height:25px;}
#menu li.ibid a:hover{background-position:-15px -31px;}
/* Galleria button */
#menu li.galleria{display:inline; width: 165px; height:30px; }
#menu li.galleria a{background-position:-120px -5px; width:165px; height:23px;}
#menu li.galleria a:hover{background-position: -120px -31px;}
menu#captionCloser {
width:15px;
height:15px;
padding: 0;
cursor:pointer;
}
</style>
</head>
<body>
<!-- start gallery -->
<div id="gallery">
<!-- start left page -->
<div id="picturesLeft">
<div id="captionLeft">
<ul id="menu">
<!-- <li class="close"><h3 id="captionCloser"><a href="#"><span>Close</span></a><h3></li>-->
<li class="ibid"><a href="http://www.ibidprojects.com/" target="_blank"><span>IBid Projects</span></a></li>
<li class="galleria"><a href="http://www.suzyshammah.com/" target="_blank"><span>Galleria Suzy Shammah</span></a></li>
</ul>
</div>
<img src="image1.jpg" class="active fullOpacity" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" class ="showLinks" />
<img src="image6.jpg" class ="showLinks" />
</div> <!-- end left page -->
<!-- chosen images: 2,3,5,6,7,8,9 -->
<!-- start right page -->
<div id="picturesRight">
<img src="image1.jpg" />
<img src="image2.jpg" class="active fullOpacity" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" class ="showLinks" />
<img src="image6.jpg" class ="showLinks" />
</div>
<div class="clear"></div>
<!-- end right page -->
</div>
</body>
</html>
Also, my friend purposefully asked for it to be that low on the page, but it means the caption loads lower than the usual screen res of a laptop. Anyone know of a way around this? maybe that it displays the images to the same proportion but works with the size of the windows? or something else, it really annoys me.
Best
Tommy