Paul,
That's a good start! I see what you're doing!
A larger z-indexed div could be created around each fisheye image, and a
calculation could be done to determine how far from the centre of the box
the mouse cursor is. The image can then be scaled depending on this value.
This also means that the div surrounding the image would intersect with with
the other elements as they would overlap. This should make the animation
smoother.
That's just off the top of my head however.
Paul Bakaus wrote:
>
> Hi!
>
> I have put up a little function that does something like the fisheye
> plugin.
> However, this is only a concept, it doesn't behave like the real one. It
> will not detect near containers and therefore is not very smooth.
>
> the function:
>
> $.fn.fisheye = function() {
> this.each(function() {
> var fishHeight = parseInt($("img", this).height());
> var fishWidth = parseInt($("img", this).width());
>
> $(this.childNodes).hover(
> function() {
> $(this.childNodes).animate({ height: 150, width: 150 }, 200);
>
> },
> function() {
> $(this.childNodes).animate({ height: fishHeight, width:
> fishWidth }, 500);
> });
> });
> }
>
> test it like this:
> <ul class="fisheye">
> <li> http://happyday.dk/funnypics/animal/images/monkey.jpg </li>
> <li> http://happyday.dk/funnypics/animal/images/monkey.jpg </li>
> <li> http://happyday.dk/funnypics/animal/images/monkey.jpg </li>
> <li> http://happyday.dk/funnypics/animal/images/monkey.jpg </li>
> <li> http://happyday.dk/funnypics/animal/images/monkey.jpg </li>
> </ul>
>
> and style the ul like you want it. have fun.
> --
> Paul Bakaus
> Web Developer
> ------------------------
> Hildastr. 35
> 79102 Freiburg
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6528643
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
