PhotoZoom

Responsive jQuery picture zoom Plugin

A stylish, responsive photo zoom jquery plugin ideal for ecommerce website to highlight product details. Plugin works on desktop, ipad and kindle.

PhotoZoom - Responsive jQuery picture zoom Plugin

Examples

Zoom Position - Over, Left, Right

Photo with Photo Scroller

Features

  1. Responsive (Works on PC, iPad, iPhone, Android Phones)
  2. All Default options customizable
  3. Customizable UI via CSS
  4. Adjustable Zoomlevel
  5. Adjustable Zoom Container
  6. Click or Hover triggered
  7. Zoom Image can be positioned on Top, Bottom, Left, Right or Over target image
  8. Uses CSS3

How To Use

This script goes into head section 

<!-- Include jQuery Library -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"> </script>
<link href="photozoom.css" rel="Stylesheet" />
<script src="photozoom.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#photozoom1").photozoom({ Position: 'top' });
        $("#photozoom2").photozoom({ Position: 'left' });
        $("#photozoom3").photozoom();
        $("#photozoom4").photozoom({ Position: 'bottom'});
    });
</script>

HTML Example 

<img id="photozoom1" data-largesrc="//www.rudrasofttech.com/res/img/sample/rocky1.jpg" src="//www.rudrasofttech.com/res/img/sample/small/rocky1.jpg" />

<img id="photozoom3" data-largesrc="//www.rudrasofttech.com/res/img/sample/rocky3.jpg" src="//www.rudrasofttech.com/res/img/sample/small/rocky3.jpg" />

<img id="photozoom2" data-largesrc="//www.rudrasofttech.com/res/img/sample/rocky2.jpg" src="//www.rudrasofttech.com/res/img/sample/small/rocky2.jpg" />

<img id="photozoom4"  data-largesrc="//www.rudrasofttech.com/res/img/sample/rocky4.jpg" src="//www.rudrasofttech.com/res/img/sample/small/rocky4.jpg" />

Any target image should be placed inside a Div with a class "rst-photocontainer" and the image should have class "rst-smallimg".

Usage Options

Option Default Description
Position 'right' 'right' | 'left' | 'top' | 'bottom' | 'over'

Zoomcontainer position

Distance 5 Integer

Distance between zoom container and target photo. This option would not work on Position : 'over'

ZoomLevel 1 1 to 5
ZoomContainerRatio { width: 0, height: 0 } 0.1 to 1

Set width and height ratio of zoom container based on small image widht and height.

Download Photozoom Files

  1. photozoom.js
  2. photozoom.css