SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery/CSS Gallery Switch? Help.

    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
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •