Question

I’m using some images as banners on my site. They’re full (960px) width and I initially show a portion of the image as a teaser (say 160px high). I do this now by using a separate image which is a slice of the full size image (which is 600px high). Complicating this are shadows that I apply in Photoshop at the top and bottom of the image that make it look “inset” into the div.

What I would like to do is overlay the image with a small icon that says something like “see more”. When the visitor clicks on this icon I’d like to div to expand (acordian style) to show the whole image and then change the icon to “see less”. When the new icon is clicked I’d like the image to collapse to its original size.

I suspect that I will need to use a new image (960 x 600px) that I’ve also added shadows to so I can retail the inset look. So, this requires two images, one that is swapped out when the div is expanding and contracting and one that is swapped in when the div contracts to the original 160px height.

Complicating this is the fact that the image acts as a banner near the top of the page and I don’t want the div to expand upwards past the window top so as to disappear off-screen and possibly add a scrollbar. A final complication is that the small “slice” can be taken at any height in the original 600px image. I select an area of the image that looks best at 160px. So, the div expansion is not constant in height. If the slice is cut from the top of the original image, the div will only expand a bit at the top and much more at the bottom. Similarly with slices cut from the bottom of the original image.

I realize this is a complicated question, and I did Google around quite a bit looking for solutions. I found a couple of JQuery extensions (UI and Tools) that look like they might be usable, but I could find no examples of what I’m trying to do. If the answer is too complicated to attempt in this forum, pointers to sites that do what I’m trying to accomplish would be appreciated.

Answer 1

I threw some jQuery code together and came up with this:

http://www.ulmanen.fi/stuff/thumb/index.html

Is this what you were looking for? If it is, feel free to copy it for your own purposes. It works as a jQuery plugin, so just copy the plugin code from here. Here’s how to use it:

HTML:

<a class="slidethumb" href="960_x_600_image.jpg" rel="MARGIN"><img src="960_x_160_image.jpg" /></a>

jQuery:

$(function() {
    $('a.slidethumb').slideThumb();
});

The rel attribute houses the cut position (margin) of the cropped image. If you cropped the image so that it the cropped region starts 300px from the top, put -300 here. If the crop was from top of the image, put 0 here and so on. It defaults to -220, which is (600 - 160) / 2.

Hope this helps.