Search

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.

model-banner

Examples

Zoom Position - Over, Left, Right

  • Rocky's Photo
  • Rocky's Photo
  • Rocky's Photo

Features

  • Responsive (Works on PC, iPad, iPhone, Android Phones)
  • All Default options customizable
  • Customizable UI via CSS
  • Adjustable Zoomlevel
  • Adjustable Zoom Container
  • Click or Hover triggered
  • Zoom Image can be positioned on Top, Bottom, Left, Right or Over target image
  • Uses CSS3
feature

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

Download the files listed bellow.
Support

For any kind of support for this script please write an email to me support@rudrasofttech.com.

Green Flower Pot
flower
Let's Start A Project

Get a latest creative news from rudrasofttech about art, design and pop - culture.

Request Quote