JQuery Image Warp mod to act on Mouseover?

[Wildfire563]

1) Script Title: jQuery Image Warp, Image Bubbles Effect

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm, http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm

3) Describe problem: I'm looking for a script which is a cross between jQuery Image Warp and Image Bubbles Effect. IOW, a script that makes the image the user is hovering over larger and display a tooltip on top of the image (maybe in a bubble window) (not over it, but that might work, too), and it shrinks back on mouseout, and the user can click on it as a link if they want to go there. So I don't need to ignore the click at all, just let the click pass through if that's what the user does.

I have a page with a number of images with a variety of sizes. So I can't use a list object like bubbleimages uses, and I like the fact that jQIW gets the image information automatically so I don't have to put that info in CSS.

I tried copying target.click into two instances - target.mouseover and target.mouseout. I was sort of able to get the mouseover function to work. But as soon as I try to add the target.mouseout funciton in (which would make the image shrink back or disappear when the user moves the mouse off of the image), it stops working. Either, the window doesn't grow at all, or it flashes a couple of times, and then stops all together.

As I write this, I realized that, since the mouse is over the new image, maybe it thinks the mouse IS out and I need to get the focus of the function switched to the new image when the new image becomes visible. (how? Perhaps by calling the function $clone.mouseout?)

Anyway, I don't have any background with javascript. Would anyone be willing to give me some hints here?

If you'd like an example of what I'm creating (the page only really works in IE at the moment, I'm still in the layout stage), http://www.flyingscool.com/PPlanit/indexnew2.htm and put your mouse over the wedding picture. Since there is no mouseout function, you'll have to reload the page to reset the picture.

Thanks so much for this site and all the help you all provide.

[Wildfire563]

Ok, I've kind of got it working, using jQIW as a template. You'll notice that as you pass the mouse over the image, it will shake, like it's trying to open. If you move your mouse to the center of the image and leave it in just the right position and let the mouse stop, the image will expand. As soon as you move the mouse it will collapse. I'd really like it to work - if the mouse is anywhere on the image, it's open, if you click the image, open or not, it will follow the link, when the mouse is not on the image, the image will collapse. Here is the function code I've modified from the addEffect function.


$target.mouseover(function(e){
var $this=$(this).css({opacity:setting.imgopacity[0]})
var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')]
jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[1], visibility:'visible'})
.animate({left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
$clone.css({left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, opacity:setting.imgopacity[1], visibility:'visible'})
$this.css({opacity:setting.imgopacity[1]})
}) //end animate
}) //end mouseover

$target.mouseout(function(e){
var $this=$(this).css({opacity:setting.imgopacity[0]})
var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')]
jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h, opacity:setting.warpopacity[1], visibility:'hidden'})
.animate({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){ //callback function after warping is complete
$clone.css({left:0, top:0, visibility:'hidden'})
$this.css({opacity:setting.imgopacity[0]})
}) //end animate
}) //end mouseover


I can't figure out why it's so unstable. Adding $clone.stop(true,true) doesn't help.

[Wildfire563]

Ok, one more discovery. It has something to do with the refreshoffsets code. When I comment those two lines out of the above code, it works perfectly (except now the image appears in the top corner, but that's because it doesn't know where the image should go any more.)

I guess I'm thinking I could set a toggle, once the mouse has entered, toggle refresh off. When mouse leaves, turn it back on again. But I'm clueless as to how to do that.

Edit - interestingly enough, I've now done something that makes the animation continually repeat in IE, but, in Google Chrome browser, when I can get it to animate, it only animates once as long as I leave the mouse still.

[Wildfire563]

Did I ask this question in the wrong forum?