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.

See Demo

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.

Using jQuery Clone