I love how I can use jQuery to solve all of my problems. When I was working on a website for The Lighting of the National Christmas Tree, I had to create a page that displayed all of the ornaments. Thank god for the jQuery clone() method, which saved me loads of time and effort.
The Situation
I was on a tight deadline, and had to figure out some way to layout all of the state ornaments. Not to mention the fact that I had to crop and resize 56 images to 2 different sizes. Yes, I know there are only 50 states, but the US territories were included as well.
So the layout had to be easy enough for everyone to see all the ornaments and be able to click to get a more detailed photo and some information about the ornament. I really was not interested in creating 56 separate pages with information about each ornament, so I went scouring through the jQuery documentation to see how I could copy elements.
Before I get started describing what I had to do, here is a demo page that I created.
My Solution
So basically, this is what I wanted to happen when an ornament was clicked:
- Get the source of the larger image to be shown
- Copy the description text about the ornament
- Append the image and text and open it in a modal window
The styling of the example is nothing special, so I will stick to explaining the script.
The Script
First, we want all of this to happen after the document is loaded and when the ornament links are clicked:
$(document).ready(function() {
$('ul.ornaments a').click(function() {
return false;
});
});
Next, we want to setup the modal window with a couple of empty divs: (Note: line breaks added for readability)
$('body').append('<div id="overlay"></div>
<div id="modal">
<div id="modalInner">
<a href="#" id="close" title="Close">Close</a>
<div id="modalImageColumn"></div>
<div id="modalTextColumn"></div>
<div class="clearing"></div>
</div>
</div>');
Since IE6 doesn’t support fixed positioning, we need to get the actual height of the page so we can apply that height to the overlay:
if($.browser.msie && $.browser.version <= 6.0) {
var windowHeight = $(document).height();
$('#overlay').height(windowHeight);
}
Next, we set the opacity of the overlay, start to fade it in, position the modal window, and start to fade it in.
$('#overlay').css('opacity', 0.5).fadeIn('fast');
$('#modal').fadeIn('slow');
var scrollPos = $(window).scrollTop() + 50;
$('div#modal').css('top',scrollPos+'px');
The order of these things can be moved around some, but this is what I ended up doing, and everything looked good.
Next, we want to close and remove the modal window when the close button is clicked or the background overlay is clicked:
$('div#modal a#close,div#overlay').bind('click', function() {
$('div#modal').fadeOut('fast',function() {
$('div#overlay').fadeOut('fast',function() {
$(this).remove();
});
$(this).remove();
});
return false;
});
Next, we grab the url of the link that was clicked, which goes to the full size image, and append the image to the modal window. Once the image has been loaded, we fade it in:
var imgUrl = $(this).attr('href');
$('div#modalImageColumn').append('<img src="'+imgUrl+'" alt="" class="frame" height="400" id="ornament" width="400" />');
$('img#ornament').load(function() {
$(this).fadeIn();
});
Finally, we get to use the clone() method. We target the div with the class of stateDescription that is a sibling of the link we clicked, clone it, and append it to the modal window:
$(this).siblings('.stateDescription').clone().appendTo('div#modalTextColumn');
Conclusion
Pretty cool stuff if I say so myself. I don’t think there are any jQuery plugins out there that would have helped me achieve this, which is why it is important to actually understand jQuery.
Here is the full script to download. You can also take a look at the final product on the National Christmas Tree site.
But, I would encourage you to actually understand jQuery instead of just grabbing code and using it.
9 Comments
vincent jaubin
12.18.2008Thanks for the great tut Trevor.
I noticed that you use the same modal technique for your company’s site in the portfolio section. How do get the client’s modals to show on the same page because it looks to me that those pages are external.
Nikko
12.18.2008Thanks !!!! :)
Trevor
12.18.2008@vincent jaubin-
Ah yes, you mean this section, right?
That is a little bit different because all of that information is stored in a database. So basically it is just loading each page via an AJAX call and adding the data into a modal window using a modified version of the facebox script.
3kolone
12.19.2008nice tutorial, what have you done with blog design, old one was better ;-)
ReTox
12.19.2008It doesn’t work in Opera… images in lightbox are not loaded at all
Trevor
12.19.2008@ReTox-
Hmm yeah, guess you are right. Although it has nothing to do with clone(). I guess it just depends on the site if this is an issue. With the National Tree, it is such a minute percent of visitors that I am certainly not worried about it. Especially with Opera, if you are using it, you are probably used to some things just not working correctly.
[Web] 連çµåˆ†äº« « 網ç
12.20.2008[...] Using jQuery Clone [...]
John
05.27.2009Your Demo has been hijacked er somything
Trevor
05.27.2009@John-
Not sure what you mean. Works fine for me.
——-