blog.web68.vn

our sponsors

Enlarge images with jquery zoom


INTRO

jQuery Zoom is a cool plugin to enlarge images on touch, click, or mouseover. It's very simple to use and provides a lot of useful options.

jquery zoom plugin

HOW TO USE

1. Include Javascript & CSS

<script src='https://cdn.rawgit.com/jackmoore/zoom/master/jquery.zoom.min.js'></script>

2. HTML

Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <span>, <li>, <div>, etc. This excludes <img> elements (see below).

<span class='zoom' id='ex1'>
    <img src='http://www.babywallpaper.us/user-content/uploads/wall/o/55/170720136.jpg' width='500' height='400' alt='Baby Wallper'/>
</span>

3. Call zoom function

$(document).ready(function(){
  $('#zoom1').zoom();
});

DEMO

See the Pen jQuery Zoom by Thanh Nguyen (@genievn) on CodePen.

OPTIONS

Property Default Description
url false The url of the large photo to be displayed. If no url is provided, zoom uses the src of the first child IMG element inside the element it is assigned to.
on 'mouseover' The type of event that triggers zooming. Choose from mouseover, grab, click, or toggle.
duration 120 The fadeIn/fadeOut speed of the large image.
target false A selector or DOM element that should be used as the parent container for the zoomed image.
touch true Enables interaction via touch events.
magnify 1 This value is multiplied against the full size of the zoomed image. The default value is 1, meaning the zoomed image should be at 100% of it's natural width and height.
callback false A function to be called when the image has loaded. Inside the function, `this` references the image element.
onZoomIn false A function to be called when the image has zoomed in. Inside the function, `this` references the image element.
onZoomOut false A function to be called when the image has zoomed out. Inside the function, `this` references the image element.

Tags
jquery  plugin  zoom  javascript  effect  
comments powered by Disqus