Grow your CSS skills. Land your dream job.

Learning jQuery: Revealing Photo Slider

Published by Chris Coyier

So in my journey to to learn jQuery, I'm trying to learn to do some things that CSS can already do but that jQuery can do "sexier". Jonathan Snook has an article up "Content Overlay with CSS" in which extra content is revealed in a certain area when it is moused over. This inspired me to try to do something similar with jQuery. My first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo. Here is the result:

View DemoDownload Files

photo-revealer.png

This is what happens, in plan English:

  1. Click event on the "More Info Button"
  2. Two things "grow", the whole container, and the div that contains the photo.
  3. The "More Info" button fades out.
  4. The "Info" area and "Close Button" fade in.

Here is the CSS:

.photo-area {
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#photo {
	width: 100px;
	height: 100px;
	background: url(images/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area {
	opacity: 0.0;
	}
	a.more-info {
		display: block;
		width: 89px;
		height: 26px;
		background: url(images/moreinfo.jpg);
		text-indent: -9999px;
	}
	a.close {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
		width: 20px;
		height: 21px;
		background: url(images/close_button.jpg);
		text-indent: -9999px;
	}

Here is the jQuery Javascript:

<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){

		$(".more-info").click(function(){
			$(this).parents(".photo-area").animate({ 
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );
			
			$(this).fadeOut();
			
			$("#photo").animate({ 
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 1.0,
			      }, 600 );
			});
		
		$(".photo-area .close").click(function(){
			$(this).parents(".photo-area-1").animate({ 
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );
			
			$(".more-info").fadeIn();
			
			$("#photo").animate({ 
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 0.0,
			      }, 600 );
			});

		});
	</script>

While this works just fine and I was really excited to see it work, it has some problems and serious limitations.

  • The size that the .photo-area and the #photo grow to are hard-coded into the javascript. It would be a lot cooler if they grew based on the size of the image instead. innerWidth?
  • The way I'm referring to page elements is too universal. In order to do the second image I had to basically copy and paste that javascript and change all the class and ID names to get it to work with the second one without interfering with the first one. There has to be a way to reference parents/children in the javascript in such a way this only needs to be written once and it will work on any .photo-area

I'm sure many of you know a heck of a lot more about jQuery than I do, so if you have any suggestions on how to make this work better, I'm all ears!

Comments

  1. Umm, demo? Would certainly speak a load louder than reading arbitrary code.

  2. Permalink to comment#

    click on… the text that say……. VIEW DEMO? for… uhm… DEMO?

    =p

  3. Really cool Chris. One usability suggestion — use the “pointer” cursor for the “More Info” image. It would make the image look more like a link.

    Great job!

  4. chumsdock
    Permalink to comment#

    DOES NOT WORK IN IE6/7

  5. Chris,

    Nice work but there are a few things you could do to make it better:

    $(".more-info").click(function(){
    	var $this = $(this);
    	var $parent = $this.parent().parent();
    	
    	$parent
    	.animate({ 
    		width: "500px",
    		height: "470px",
    		borderWidth: "10px"
    	}, 600 );
    			
    	$this.fadeOut();
    			
    	$parent.find('.photo').animate({ 
    		width: "500px",
    		height: "375px"
    	}, 600 );
    	
    	$parent.find(".info-area").animate({ 
    		opacity: 1.0,
    	}, 600 );
    });

    What I did is put the reference to the *$(this)* into a variable since we will be using more then once, and the next line will go to the parent of the more-info link, which is the *P* tag then from there it will move up to the photo-area and set the $parent variable to that. We do this because it is a bit faster the using parents() to search for a parent with a particular class.

    Then we animate that parent element, we fade out the more link, then with the last two animations we start at the parent element and the search with in to *find* the photo div (the #photo-1 and #photo-2) and their respective info areas and we animate those.

    All in all great work, I have a few posts at my site on picking faster selectors that may help you out, and feel free to hit me up on twitter if you have any questions.

  6. A few more things if you don’t mind: the stray commas after opacity will kill IE and Opera (you can actually test for IE JS errors in Opera and get them figured out quickly) and for width and height you don’t need to do “500px”, 500 will do fine, eg. width:500

    fixing the commas will fix what chumsdock is referring to.

  7. Permalink to comment#

    wow,.. thanks for sharing! :D

  8. Nice idea. In the comments had wrote there are problems with ie? It is right and this problem are fixed?

    Ralph

  9. Great jQuery plugin! Good snippets JS kinda make flash useless for presentation and interactive UI.

  10. That’ s amazing Chris! Thanks my friend. Next time maybe in this week i will tell this application in Turkish ;)

  11. Permalink to comment#

    not that impressive….. it will make the page go for a toss.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".