Using jQuery Clone

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:

  1. Get the source of the larger image to be shown
  2. Copy the description text about the ornament
  3. 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.

Categories

Recent Articles

February 2012

S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

8 Comments

vincent jaubin

12.18.2008

Thanks 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.2008

Thanks !!!! :)

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.2008

nice tutorial, what have you done with blog design, old one was better ;-)

ReTox

12.19.2008

It 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.

John

05.27.2009

Your Demo has been hijacked er somything

Trevor

05.27.2009

@John-
Not sure what you mean. Works fine for me.
——-

Too late, comments are closed!

Don’t worry, you can email me or contact me on Twitter.