Touch-friendly Image Zoom Plugin For jQuery - Enlarge.js

File Size: 3.5 MB
Views Total: 14564
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Touch-friendly Image Zoom Plugin For jQuery - Enlarge.js

Enlarge.js is a responsive, mobile-friendly image zoom jQuery plugin that supports both mouse and touch events.

Features:

  • Inline and flyout modes.
  • Magnifying glass effect.
  • Auto swaps out image sources depending on the screen size.
  • Zooms image with mouse hover/click or touch tap/drag.
  • Allows to set the magnification level.

How to use it:

1. Import jQuery JavaScript library and the jQuery Enlarge.js plugin's files into the document.

<link rel="stylesheet" href="src/enlarge.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="src/enlarge.js"></script>
<script src="src/enlarge.init.js"></script>

2. Add your image to the page following the markup structure like this. The plugin also allows to toggle the image source bigger or smaller. Ideally, this toggles the sizes attribute and allows the browser to select a new source from srcset. if srcset isn't supported or sizes attribute is not provided, the link href is used for the larger source. More: Swapping Images with the Sizes Attribute.

<div class="enlarge_pane_contain">
  <div class="enlarge_pane">
    <div class="enlarge inline-demo">
      <div class="enlarge_contain">
        <img src="1.jpg" 
             srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w" 
             sizes="100vw" 
             id="test-img">
      </div>
      <a href="1.jpg" class="enlarge_btn" title="Toggle Zoom">Toggle Zoom</a>
    </div>
  </div>
</div>

3. DOM-ready auto-init of plugins. Many plugins bind to an "enhance" event to init themselves on dom ready, or when new markup is inserted into the DOM.

(function( $ ){
  $( function(){
    $(".enlarge.inline-demo").data("options", {
      // options here
    });


    $( document ).bind( "enhance", function(){
      $( "body" ).addClass( "enhanced" );
    });

    $( document ).trigger( "enhance" );
  });
}( jQuery ));

4. All default configuration options.

$(".enlarge.inline-demo").data("options", {
  button: true,
  hoverZoomWithoutClick: true,
  delay: 300,
  flyout: {
    width: 300,
    height: 300
  },
  placement: "flyoutloupe", // or inline
  magnification: 3
});

This awesome jQuery plugin is developed by filamentgroup. For more Advanced Usages, please check the demo page or visit the official website.