Learning jQuery: Revealing Photo Slider

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 Demo   Download Files

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!