All Projects → payalord → Xzoom

payalord / Xzoom

Licence: apache-2.0
jQuery Zoom Gallery plugin

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Xzoom

Magnificent.js
🔍 Zoom responsively, images & more, w/ jQuery.
Stars: ✭ 153 (+27.5%)
Mutual labels:  jquery-plugin, zoom, jquery
Imgnotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image
Stars: ✭ 98 (-18.33%)
Mutual labels:  image, jquery-plugin, jquery
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+1474.17%)
Mutual labels:  image, gallery, zoom
Fotorama
A simple, stunning, powerful jQuery gallery.
Stars: ✭ 1,567 (+1205.83%)
Mutual labels:  jquery-plugin, gallery, jquery
Magnify
A lightweight jQuery magnifying glass zoom plugin.
Stars: ✭ 218 (+81.67%)
Mutual labels:  jquery-plugin, zoom, jquery
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+1345%)
Mutual labels:  image, gallery, zoom
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-58.33%)
Mutual labels:  image, jquery-plugin, jquery
Pretty Dropdowns
A simple, lightweight jQuery plugin to create stylized drop-down menus.
Stars: ✭ 96 (-20%)
Mutual labels:  jquery-plugin, jquery
React Image Zoom
React component for desktop browsers for image zoom on mouse hover
Stars: ✭ 97 (-19.17%)
Mutual labels:  image, zoom
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (-15%)
Mutual labels:  jquery-plugin, jquery
Jquery Udraggable
make elements draggable by mouse or touch
Stars: ✭ 107 (-10.83%)
Mutual labels:  jquery-plugin, jquery
V Viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
Stars: ✭ 1,776 (+1380%)
Mutual labels:  image, gallery
Bpage
Based on bootstrap style, static page jump can also be asynchronous page processing pagination plugin
Stars: ✭ 96 (-20%)
Mutual labels:  jquery-plugin, jquery
Basictable
Basic Table jQuery or Vanilla JS plugin for simple responsive tables.
Stars: ✭ 94 (-21.67%)
Mutual labels:  jquery-plugin, jquery
Dropdown
a lightweight dropdown of jQuery plugins
Stars: ✭ 105 (-12.5%)
Mutual labels:  jquery-plugin, jquery
Imageslideshow
Swift image slideshow with circular scrolling, timer and full screen viewer
Stars: ✭ 1,612 (+1243.33%)
Mutual labels:  image, gallery
Jquery Sortablejs
A jQuery binding for SortableJS
Stars: ✭ 94 (-21.67%)
Mutual labels:  jquery-plugin, jquery
Ihavecookies
jQuery plugin to display cookie consent message (EU regulation)
Stars: ✭ 106 (-11.67%)
Mutual labels:  jquery-plugin, jquery
Footer Reveal
A jQuery plugin for easy implementation of the 'fixed/reveal' footer effect. Demo here:
Stars: ✭ 111 (-7.5%)
Mutual labels:  jquery-plugin, jquery
Jquery Scrolllock
Locks mouse wheel scroll inside container, preventing it from propagating to parent element
Stars: ✭ 109 (-9.17%)
Mutual labels:  jquery-plugin, jquery

Stories in Ready Build Status npm GitHub license Donate Donate Bitcoin

xZoom

jQuery Zoom Gallery plugin.

  • Supports jQuery starting from version 1.2.6.
  • A lof of options, effects and easy to use and customize
  • Lightweight ~14kb minified version.
  • You can load low and high res images separately.
  • Supports IE6+, Chrome, FireFox, Opera, Safari, Android, iOS
  • Supports Responsive output.
  • Have an API to integrate with other useful plugins like FancyBox, Magnific PopUp and HammerJS.

Installation

Use one of the following methods:

  • git clone [email protected]:payalord/xZoom.git
  • git clone https://github.com/payalord/xZoom.git
  • npm install xzoom
  • bower install xzoom
  • Download zip
  • Use CDN:
    • https://unpkg.com/xzoom/dist/xzoom.min.js
    • https://unpkg.com/xzoom/dist/xzoom.css

Quick Start

Step 1:

  1. Copy xzoom.min.js or xzoom.js file into your javascript folder.
  2. Copy xzoom.css file into your css folder, or copy the content of the xzoom.css file into your site style sheet.
  3. Copy example/images/xloading.gif to your images folder.

Step 2:

This goes into your site's Header Section:

<!-- get jQuery from the google apis or use your own -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.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 xZoom markup into your HTML:

<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>

Step 4:

Initialize the plugin in "document ready" section of your javascript or at the end before </body>:

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

Enjoy xZoom experience!

Documentation

For full list of options and how to setup, customize and work with xZoom plugin please read the manual.

More Examples

For more examples please check xZoom Sandbox

Donate

If you liked the plugin and want to say thanks or want to help us make it better - feel free to make a donation ;)

PayPal:

paypal

Bitcoin:

Donate Bitcoin

License

Apache License 2.0

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].