fullsize icon showing outside visible part of image

[Kevin Heatwole]

I have a scrolling horizontal list of thumbs that can be scrolled left
or right and only a portion of the list is visible. Problem is that
when I scroll left so that only the right part of an image is visible
and then I hover over that part of the image, the fullsize icon is
displayed even though the portion of the image under the fullsize icon
is hidden.

This looks very odd to have the fullsize icon show outside the visible
part of the image.

Is there any possible fix for this?

I'd like the fullsize icon to show only if the entire image is visible.

[Kevin Heatwole]

I fixed this problem by using the plugin
http://andrew-mcharg.blogspot.com/2009/06/jquery-bounding-region-plugin.html

I just retrieved the bounds for the enclosing overflow hidden parent
and the thumb bounds and made sure the thumb was completely visible
inside the parent.

For me, this works fine since I don't care to let the user expand a
thumb that isn't fully visible.

Now, the only problem I have remaining with this plugin is that it
creates a new fullsize-icon div for every position that the thumb can
be in. Since some of my thumbs slide/scroll, this results in more
fullsize-icon divs than there are thumbs. I think I'll create/remove
them on demand so that there is only one fullsize-icon div at any one
time (or simply change the position on one div). I'm not sure why you
had to creae a new div for each fullsize-icon position.

[Kevin Heatwole]

I changed the plugin to prepend the fullsize-icon div for every
'longdesc' image. Basically, moved setting the position of the icon
and the prepending to the BODY tag outside the hover function. The
hover function on the image now only sets the position if it has
changed and shows the fullsize-icon div.