This time I will share jQuery Plugin and tutorial about Feature-rich Product Gallery With Image Zoom – xZoom, hope it will help you in programming stack.
| File Size: | 1.33 MB |
|---|---|
| Views Total: | 61979 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
xZoom is a responsive, touch-friendly jQuery zoom gallery plugin designed for e-commerce websites that enable you to generate a pretty nice product gallery with thumbnail navigation and smooth image zoom support.
Compatible with jQuery Fancybox and Magnific Popup plugins. Licensed under the Apache License 2.0.
How to use it:
1. Add the following required JavaScript and CSS files to the webpage.
1 |
<!-- JQUERY --> |
2 |
<script src="jquery.min.js"></script> |
3 |
4 |
<!-- CSS STYLE--> |
5 |
<link rel="stylesheet" href="css/xzoom.css"> |
6 |
7 |
<!-- XZOOM JQUERY PLUGIN --> |
8 |
<script src="js/xzoom.min.js"></script> |
2. Add the xzoom markup to your webpage as shown below. You can add more or less images to xzoom, this example shows how it works with 4 images.
- xoriginal – the path to the big image, that will be used as zoomed image in zoom.
- xpreview – optional, but when it is set up, this attribute used as the medium preview image, while the src attribute in this case will be used as the small thumbnail image. If this attribute is not set up, then src attribute will be used as the medium preview image.
- xtitle – text string that will be used as caption and will be shown in zoom output window inside “div” container with titleClass. If this attribute is not used then xZoom will use regular title attribute of the image.
01 |
<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" /> |
02 |
03 |
<div class="xzoom-thumbs"> |
04 |
<a href="path/to/original_image_01.jpg"> |
05 |
<img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg" xpreview="path/to/preview_image_01.jpg"> |
06 |
</a> |
07 |
<a href="path/to/original_image_02.jpg"> |
08 |
<img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg"> |
09 |
</a> |
10 |
<a href="path/to/original_image_03.jpg"> |
11 |
<img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg"> |
12 |
</a> |
13 |
<a href="path/to/original_image_04.jpg"> |
14 |
<img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg"> |
15 |
</a> |
16 |
</div> |
3. Initialize the zoom gallery on document ready.
1 |
$(".xzoom").xzoom(); |
4. All possible options with default values.
001 |
$(".xzoom").xzoom({ |
002 |
003 |
// top, left, right, bottom, inside, lens, fullscreen, #ID |
004 |
position: 'right', |
005 |
006 |
// inside, fullscreen |
007 |
mposition: 'inside', |
008 |
009 |
// In the HTML structure, this option gives an ability to output xzoom element, to the end of the document body or relative to the parent element of main source image. |
010 |
rootOutput: true, |
011 |
012 |
// x/y offset |
013 |
Xoffset: 0, |
014 |
Yoffset: 0, |
015 |
016 |
// Fade in effect, when zoom is opening. |
017 |
fadeIn: true, |
018 |
019 |
// Fade transition effect, when switching images by clicking on thumbnails. |
020 |
fadeTrans: true, |
021 |
022 |
// Fade out effect, when zoom is closing. |
023 |
fadeOut: false, |
024 |
025 |
// Enable smooth effects |
026 |
smooth: true, |
027 |
028 |
// Smooth move effect of the big zoomed image in the zoom output window. |
029 |
// The higher value will make movement smoother. |
030 |
smoothZoomMove: 3, |
031 |
032 |
// Smooth move effect of lens. |
033 |
smoothLensMove: 1, |
034 |
035 |
// Smooth move effect of scale. |
036 |
smoothScale: 6, |
037 |
038 |
// From -1 to 1, that means -100% till 100% scale |
039 |
defaultScale: 0, |
040 |
041 |
// Scale on mouse scroll. |
042 |
scroll: true, |
043 |
044 |
// Tint color. Color must be provided in format like "#color". |
045 |
tint: false, |
046 |
047 |
// Tint opacity from 0 to 1. |
048 |
tintOpacity: 0.5, |
049 |
050 |
// Lens color. Color must be provided in format like "#color". |
051 |
lens: false, |
052 |
053 |
// Lens opacity from 0 to 1. |
054 |
lensOpacity: 0.5, |
055 |
056 |
// 'box', 'circle' |
057 |
lensShape: 'box', |
058 |
059 |
// Custom width of zoom window in pixels. |
060 |
zoomWidth: 'auto', |
061 |
062 |
// Custom height of zoom window in pixels. |
063 |
zoomHeight: 'auto', |
064 |
065 |
// Class name for source "div" container. |
066 |
sourceClass: 'xzoom-source', |
067 |
068 |
// Class name for loading "div" container that appear before zoom opens, when image is still loading. |
069 |
loadingClass: 'xzoom-loading', |
070 |
071 |
// Class name for lens "div". |
072 |
lensClass: 'xzoom-lens', |
073 |
074 |
// Class name for zoom window(div). |
075 |
zoomClass: 'xzoom-preview', |
076 |
077 |
// Class name that will be added to active thumbnail image. |
078 |
activeClass: 'xactive', |
079 |
080 |
// With this option you can make a selection
|
