1
I have an internal page of products, which the layout is as below:
What I need is that when the person hovers the mouse over the smaller square, he shows the large image above and zoom in when the person hovers a mouse over the large image. I was analyzing the plugin cloud-zoom.1.0.2.js, but he gets paid. Someone has used a similar?
1
A brief Google search gave me good results:
Elevate Zoom: http://www.elevateweb.co.uk/image-zoom/examples - Internal and external zoom, various Divs positioning customizations, custom cursor during zoom, mouse wheel zoom, etc. Dual MIT and GPL license.
Easy Zoom: http://i-like-robots.github.io/EasyZoom/ - Simple plugin with zoom in overlay and external. MIT License.
Swinxyzoom: http://www.swinxyapps.com/pages/apps/swinxy-zoom/ - Plugin for Zoom internal, external, lens and dragging mouse (all with external zoom control). Commercial license (£4.00) or non-commercial Creative Commons with attribution.
1
To not make this question based on opinion of which plugin we use, I will show an example:
You can use the library Zoom in on Jack Moore, there is a documentation here
Source code from 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;
}
Online example: Jsfiddle
CARING: Zoom will only accept:
<a>,<span>,<li>,<div>. That means that it will not work in element<img>.
Browser other questions tagged jquery plugin
You are not signed in. Login or sign up in order to post.
Thank you very much. I was looking for some term that led me only to that plugin that was paid. Thanks!
– Felipe Viero Goulart