jQuery Image Zoom Plugin with Custom Magnifying Lens Effects - Tikslus Lens

File Size: 214 KB
Views Total: 7094
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Image Zoom Plugin with Custom Magnifying Lens Effects - Tikslus Lens

Yet another jQuery image zoom plugin that applies a magnifying lens effect on a given image to provide an image inner zoom functionality. You can custom the lens' width, height, background, and ratio via plugin's options to fit your needs.

How to use it:

1. Include jQuery javascript library together with tiksluslens.js and tiksluslens.css in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/tiksluslens.js"></script>
<link rel="stylesheet" href="css/tiksluslens.css" />

2. Insert an image in the document and use data-big-image attribute to specify the large version of the image.

<div id="demo">
<img src="images/small.jpg" data-big-image="images/big.jpg" class="tiksluslens" />

3. Call the plugin on the image with default parameters.


4. All the default parameters.

lensWidth:120, // the width of lens
lensHeight:120, // the height of lens
lensBackgroundColor:'#fff', // the background color of lens
lensBorderColor:'#000', // the border color of lens
loaderImage:'loader.gif', // image preloader

autoZoomRatio:false // If true it will ignore lensWidth and lensHeight Parameter and sets lens width and height according to high resolution image

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