Thank you for download xZoom jQuery Plugin

If you're just downloaded xZoom please go to example and manual folder to find more information.

I would like a simple quick start. What do i need to do?

Step 1

Copy the xzoom source files into your project folder
Copy the xzoom.min.js or xzoom.js files into javascript folder.
Copy the xzoom.css file into your css folder, or copy the content of the xzoom.css file into your style sheet.
Copy xloading.gif to your images folder.

Step 2

This goes into your site's Header Section:

<!-- get jQuery from the google apis -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- CSS STYLE-->
<link rel="stylesheet" type="text/css" href="css/xzoom.css" media="all" />

<!-- XZOOM JQUERY PLUGIN  -->
<script type="text/javascript" src="js/xzoom.min.js"></script>

Step 3

Add the xzoom markup to your HTML document:

<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" />

<div class="xzoom-thumbs">
  <a href="path/to/original_image_01.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg"  xpreview="path/to/preview_image_01.jpg">
  </a>
  <a href="path/to/original_image_02.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg">
  </a>
  <a href="path/to/original_image_03.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg">
  </a>
  <a href="path/to/original_image_04.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg">
  </a>
</div>

You can add more or less images to xzoom, this example shows how it works with 4 images.

Step 4

Initialize the plugin in "document ready" section:

/* calling script */
$(".xzoom").xzoom({tint: '#333', Xoffset: 15});

All new features and last updated docs you can find here: github.com/payalord/xZoom