jQuery/CSS Gallery Switch? Help.

**williamnorman** · Apr 19, 2011 01:35

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..

Code:

<!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

User Tag List

Thread: jQuery/CSS Gallery Switch? Help.

Thread Tools

Display

Threaded View

jQuery/CSS Gallery Switch? Help.

Bookmarks

Bookmarks

Posting Permissions