Plugin that zooms when mouse passes

Navigation
1

I have an internal product page, which layout is as below:

What I need is for a person to move the mouse over the smaller square so he shows the big picture on top and zooms in when the person rolls a mouse over the big picture. I was analyzing the cloud-zoom.1.0.2.js plugin, but it gets paid. Has anyone used any of these?

    
asked by anonymous 12.08.2014 / 16:19

2 answers

1

A brief Google search returned me good results:

  • Elevate Zoom : link - Internal and external zoom , various divs positioning customizations, cursor customization during zooming, zooming with the mouse wheel, etc. Dual MIT and GPL licenses.

  • Easy Zoom : link - Simple Zoom Plugin overlay and external. MIT License.

  • SwinxyZoom : link - Internal Zoom Plugin , external, lens and dragging the mouse (all with external zoom control). Commercial license ( £ 4.00 ) or non-commercial Creative Commons with attribution.

12.08.2014 / 16:46
1

To not make this question based on which plugin we use, I'll show you an example:

You can use the Jack Moore Zoom library, there is a documentation here

Source code for my example:

jQuery: 

$( '.smallPicture li img' ).hover(function(){
    src = $(this).attr("src");
    $( '.bigPicture img' ).attr("src", src);

});
$( '.bigPicture img').hover(function(){
    src = $(this).attr("src");
    $('.bigPicture').zoom({url: src});
});

HTML: 

<div class="bigPicture">
    <img src=""/>
</div>
<br/>
<ul class="smallPicture">
    <li><img src="http://www.internationalrivers.org/files/styles/600-height/public/images/campaign/admin-old/amazon.jpg?itok=rz1JSSBO"height="90" width="90"></li>
         <li><img src="http://www.funonthenet.in/images/pics/wildlife_in_the_amazon/20_wildlife-amazon-two-blue-poison.jpg"height="90" width="90"></li>
              <li><img src="http://rack.1.mshcdn.com/media/ZgkyMDE0LzAyLzEwL2VkLzEuQW1hem9uRGFuLjhjODAxLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/4376b016/1e6/1.-Amazon-Danbo.jpg"height="90" width="90"></li>
</ul>

CSS: 

.bigPicture{
    display: block;
    height:200px;
    width:200px;
}

.smallPicture li{
    margin: 0;
    padding: 0;
    max-height:90px;
    max-width:90px;
    float: left;
    display: inline;
}

Example online: JSFiddle

  

CAUTION: Zoom only accepts: <a> , <span> , <li> , <div> . That   it means it will not work on <img> element.

    
12.08.2014 / 16:57
Rendered of primefaces giving error when retrieving entity boolean Apply recursion in a batch script