Image Hover Zoom like Google Images

Question

I wrote some jquery code (from one video tutorial) to make mousehover zoom effect like in google pictures. I want to add some delay before zoom (0.5-1 sec), but I don't know how to do that!!! I've tried a lot of methods with delay() or setTimeout(), but nothing helps!!!
I do not know why... Here is the javascript code:

    $(function(){

        $.fn.popOut=function(user_opts){            
            return this.each(function(){

                var opts=$.extend({
                    useId:"poppedOut",
                    padding:20,
                    border:0,
                    speed:200
                },user_opts);

                $(this).mouseover(function(){
                    // kill any instance of this already
                    $("#"+opts.useId).remove();

                    // make a copy of the hovered guy
                    var $div=$(this).clone();

                    // setup for prelim stuff
                    $div.css({
                        "position":"absolute",
                        "border":opts.border,
                        "top":$(this).offset().top,
                        "left":$(this).offset().left,
                        "-moz-box-shadow":"0px 0px 12px black",
                        "-webkit-box-shadow":"0px 0px 12px black",
                        "z-index":"99"
                    });

                    // store all of the old props so it can be animate back
                    $div.attr("id",opts.useId)
                        .attr("oldWidth",$(this).width())
                        .attr("oldHeight",$(this).height())
                        .attr("oldTop",$(this).offset().top)
                        .attr("oldLeft",$(this).offset().left)
                        .attr("oldPadding",$(this).css("padding"));

                    // put this guy on the page
                    $("body").prepend($div);

                    // animate the div outward
                    $div.animate({
                        "top":$(this).offset().top-Math.abs($(this).height()-opts.height),
                        "left":$(this).offset().left-opts.padding,
                        "height":opts.height,
                        "padding":opts.padding
                    },opts.speed);

                    // loop through each selector and animate it to its css object
                    for(var eachSelector in opts.selectors){
                        var selectorObject=opts.selectors[eachSelector];
                        for(var jquerySelector in selectorObject){
                            var cssObject=selectorObject[jquerySelector];
                            $div.find(jquerySelector).animate(cssObject,opts.speed);
                        }
                    }

                    $div.mouseleave(function(){
                        $("#"+opts.useId).animate({
                            width:$(this).attr("oldWidth"),
                            height:$(this).attr("oldHeight"),
                            top:$(this).attr("oldTop"),
                            left:$(this).attr("oldLeft"),
                            padding:$(this).attr("oldPadding")
                        },0,function(){
                            $(this).remove();
                        });
                    });
                });
            });
        };
        $(".productBox").popOut({
            height:300,
            border:"1px solid #333",
            selectors:[{".productDescription":{
                    height:150
                }
            }]
        });
    });

And example HTML code:

    <div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
    <div class="productImage" style="width:200px;height:116px;overflow:hidden;">
        <a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a>
    </div>
    <div class="productContent" style="float:left;">
        <div class="productTitle" style="height:29px;">Product title</div>
        <div class="productDescription" style="height:70px;">Here is description of the product.</div>
        <div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div>
    </div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
    <div class="productImage" style="width:200px;height:116px;overflow:hidden;">
        <a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a>
    </div>
    <div class="productContent" style="float:left;">
        <div class="productTitle" style="height:29px;">Product title</div>
        <div class="productDescription" style="height:70px;">Here is description of the product.</div>
        <div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div>
    </div>
</div>

Can anyone help me to do that? besides, I think it is very useful script.

Thanks in advance!!!

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The best example can be found at Pop Images like Google Images

Also take a look at the demo

edited May 23 '17 at 10:27

Community

1
1

answered Apr 23 '12 at 02:21

Mohammad Naji

5,372
10
54
79

score 0 · Answer 2 · edited Aug 17 '12 at 19:08

If you want to copy the cloned object to your original div then you need to just following the steps:

add id to your original div & the following code above the respective code:

var old_box = $div.attr('id');

$div.attr("id", opts.useId)
    .attr("oldWidth", $(this).width())
    .attr("oldHeight", $(this).height())
    .attr("oldTop", $(this).offset().top)
    .attr("oldLeft", $(this).offset().left)
    .attr("oldPadding", $(this).css("padding"));

add the following code above the mouseleave event:

$div.click(
    function() {
        $("#" + old_box).html($(this).html());
        $(this).remove();
    }
);

score 0 · Answer 3 · answered Oct 24 '11 at 09:02

0

This may be what you're looking for : hoverIntent jQuery Plug-in

answered Oct 24 '11 at 09:02

Axiol

5,664
9
37
49

You just have to download the plug-in and replace your "mouseover" with the "hoverIntent" from the plug-in. Your line with "mouseover should looks like something like this : $(this).hoverIntent(makeTall, makeShort,function(){ I think, never use it – Axiol Oct 24 '11 at 09:26
I did how you said, but zoom effect dissappeared at all... But thanks anyway! – Vitalii Ponomar Oct 24 '11 at 09:29
There is one service that permits editting javascript code online with immediate result. I've added there your code: http://jsfiddle.net/Cu5uc/2/ Could you help me to make delay here? – Vitalii Ponomar Oct 25 '11 at 05:51

Image Hover Zoom like Google Images

3 Answers3