Narnia's Psychedelic Mushrooms

    xzoom

    1.0.15 • Public • Published

    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 git@github.com: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

    Install

    npm i xzoom

    DownloadsWeekly Downloads

    1,977

    Version

    1.0.15

    License

    Apache-2.0

    Unpacked Size

    2.05 MB

    Total Files

    93

    Last publish

    Collaborators

    • payalord