Aeqdev

ABigImage

ABigImage is jQuery plugin for viewing big versions of images.

Current version: 1.3.0 (2015-06-23).

Features

Example

Live example, where I'm using and testing this plugin at the moment: kawaiinyan.com.

Usage

Basic

Add jQuery and ABigImage scripts in head of page.

<script src="jquery.js"></script>
<script src="abigimage.jquery.js"></script>

Call plugin on selector of enlargeable images links.

$(function() {
    /* all links with class "myimgclass" */
    $('.myimgclass').abigimage();

    /* or all links to "*.jpg" images */
    $('a[href$=".jpg"]').abigimage();

    /* or all links to images under dir "/my/images/dir/" */
    $('a[href^="/my/images/dir/"]').abigimage();
});

Options

• fadeIn - fade in duration or options (default: fast).
• fadeOut - fade out duration or options (default: fast).
• slideWidth - slide width to switch or close image (between 0 and 1, default: 0.4).
• slideVelocity - slide velocity to switch or close image (pixels per millisecond, default: 0.4).
• zoomMin - minimal zoom that will hold (default: 1.5).
• zoomMax - maximal zoom (default: 5).
• prevBtnHtml - html of "previous" button (default: ←).
• closeBtnHtml - html of "close" button (default: x).
• keyNext - hotkeys for "next" button (by default: 13 enter, 32 space, 39 right, 40 down).
• keyPrev - hotkeys for "previous" button (by default: 8 backspace, 37 left, 38 up).
• keyClose - hotkeys for "close" button (by default: 27 escape, 35 end, 36 home).
• onopen - function called when image opens.
• *Attrs - plugin elements attributes.
• *CSS - plugin elements CSS.
• prevBtnHoverCSS - "previous" button on hover CSS.
• closeBtnHoverCSS - "close" button on hover CSS.
• bottomHoverCSS - bottom area on hover CSS.

Plugin generates next html code:

<!-- overlay -->
<div></div>
<!-- layout -->
<div>
    <!-- box -->
    <div>
        <!-- prevBtnWrapper (clickable behind the image, width 50%) -->
        <div>
            <!-- prevBtnBox (clickable above the image, button width) -->
            <div>
                <!-- prevBtn -->
                <div><!-- prevBtnHtml --></div>
            </div>
        </div>
        <!-- closeBtnWrapper (clickable behind the image, width 50%) -->
        <div>
            <!-- closeBtnBox (clickable above the image, button width) -->
            <div>
                <!-- closeBtn -->
                <div><!-- closeBtnHtml --></div>
            </div>
        </div>
        <!-- img -->
        <img>
        <!-- imgNext -->
        <img>
        <!-- imgPrev -->
        <img>
    </div>
    <!-- bottom -->
    <div></div>
</div>

Using onopen handler

Function, defined as onopen handler, executes in context of plugin, and receives target element as argument. Plugin elements available in this context as properties.

$(function() {
    $('a[href$=".jpg"]').abigimage({
        bottomCSS: {
            fontSize: '2em'
        },
        onopen: function (target) {
            this.bottom.html(
                $('img', target).attr('alt')
            );
        }
    });
});

Using data-href attribute

If you want different link for plugin's big image and for non-javascript clients (search engines or browsers without javascript) - use data-href attribute:

<a href="/non_javascript_link.html" data-href="/images/big/myimage.jpg"> ... </a>

Also, you can use data-href attribute on any element, not only links.

Static methods

/* open image by URL */
$.abigimage.open('/some_image.jpg');

/* open image by index in current list */
$.abigimage.open(5);

/* open image by URL at specified position in current list */
$.abigimage.open('/some_image.jpg', 5);

/* open next image */
$.abigimage.next();

/* open previous image */
$.abigimage.prev();

/* close image */
$.abigimage.close();

/* unbind abigimage events */
$.abigimage.unbind();

Changes

• 1.3.0 - fixed image caching, added unbind method.

P. S.

I WANT your comments, feature requests, bug reports, suggestions, thoughts... on GitHub.