Q:

jQuery plugn similar to USA TODAY's article photos?

I'm working on building a news website (was asked to come up with the design for a new product) and decided to use the opportunity as a chance to teach myself more about JavaScript. My knowledge in this department is basic, but I've been experimenting with jQuery plugins by deconstructing them and learning as much as I can. That being said, I hope this isn't a dumb question or something I'm just overlooking.
--
I'm looking to implement the same basic function USA TODAY has on its article photos, which takes the thumbnail photo and resizes/expands the image on click. After spending some time searching for jQuery plugins, the only thing I found close to it was jQuery.popeye, which is a good start, but not exactly what I want. For starters, popeye doesn't resize the image, it starts with one file and after the div expands, it links to a new, larger image. Also, the way popeye is built, the image container is static and requires fixed heights — not ideal for a news environment.
But I went ahead and added it to my test site so I could try to break it apart and see if I could easily rebuild it according to my needs. Here's what I have.
Rather than trying to debug what I've done, I'm just asking if anyone knows if there are better plugins out there? What core functions I could learn to try and build it on my own? Or if anyone knows what USA TODAY uses?
Thanks for your help.

A:

without recommending a tool to do this, you could do the same thing yourself without too much effort.
If you inspect what they are actually doing there it's pretty simple, the image is full size (big version) and they are just resizing the div.
so:
<aside itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject" 
    class="single-photo expandable-collapsed" style="width: 180px;">
</aside>

is simply animated to:
<aside itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject" 
        class="single-photo expandable-collapsed" style="width: 540px;">
 </aside>

notice the width property changing. 
so the javascript would be something simple like:
$('#clickelement').click(function() {
    $('picture').animate({
    width: 500
  }, 5000);
});

And a similar function to resize it small again.

