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:
This is what happens, in plan English:
- Click event on the “More Info Button”
- Two things “grow”, the whole container, and the div that contains the photo.
- The “More Info” button fades out.
- 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!
Loading ...
1
Umm, demo? Would certainly speak a load louder than reading arbitrary code.
Comment by sikanrong — March 31, 2008 @ 1:04 pm
2
click on… the text that say……. VIEW DEMO? for… uhm… DEMO?
=p
Comment by V1 — March 31, 2008 @ 1:14 pm
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!
Comment by David Walsh — March 31, 2008 @ 2:42 pm
4
DOES NOT WORK IN IE6/7
Comment by chumsdock — March 31, 2008 @ 7:13 pm
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.
Comment by Benjamin Sterling — March 31, 2008 @ 7:16 pm
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.
Comment by Benjamin Sterling — March 31, 2008 @ 7:30 pm
7
wow,.. thanks for sharing!
Comment by nitos — March 31, 2008 @ 8:34 pm
8
Nice idea. In the comments had wrote there are problems with ie? It is right and this problem are fixed?
Ralph
Comment by Ralph — April 5, 2008 @ 2:19 pm