No release in over 3 years
Low commit activity in last 3 years
Let your user pinch, drag and tap (zoom-in, zoom-out) your beautiful thumbnails.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

 Project Readme

Workarea Jquery Zoom

Note: This work is in progress and part of the workarea-zoom plugin.

About

Jquery Zoom add image zoom capabilities on touch enabled devices and is a great candidate for phone/tablet devices.

Getting Started

Add the gem to your application's Gemfile:

# ...
gem 'workarea-jquery_zoom'
# ...

Example

    <div class="zoom">
        <div data-zoom-src="http://example.com/big-image.jpg" class="zoom__container">
            <img src="http://example.com/thumbnail-image.jpg" class="zoom__image">
        </div>
    </div>
.zoom {
    width: 320px;
}

.zoom__container {
    position: relative;
}

.zoom__image {
    display: block;
    width: 100%;
    min-width: 100%;
}
$(document).ready(function() {
    $('.zoom__container').zoom();
});

Options

You have the ability to pass your options like this:

$('.zoom__container').zoom({
    lazyLoad: true,
    deltaScale: 0.05,
    url: null
});

Different options are available:

Name Default Description
lazyLoad true If set to true, jquery.zoom will lazy load the zoom image when the user clicks for the first time on the container
deltaScale 0.05 What is the increment scale you want to use when scale up/down
url null The url of the zoom image, if not defined, jquery.zoom will fetch the attribute data-zoom-srcgiven.

Events

You can destroy the widget for the instance given, it's helpful when you want to go back to a clean state.

// Create instance
$('.zoom__container').zoom();

// Remove instance
$('.zoom__container').trigger('zoom.destroy');

Workarea Commerce Documentation

See https://developer.workarea.com for Workarea Commerce documentation.

License

Workarea Styled Selects is released under the Business Software License