ABigImage is jQuery plugin for viewing big versions of images.

Current version 2.1.1 (2018-01-20).



First image Second image. Scroll down me, please!
Under bottom area here.
Third image Fourth image

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



Add jQuery and ABigImage scripts, and ABigImage styles at your page.

<script src="jquery.js"></script>
<script src="abigimage.jquery.js"></script>
<link rel="stylesheet" href="abigimage.jquery.css">

Call plugin on selector of enlargeable images links.

    /* all links with class "myimgclass" */

    /* or all links inside element with class "myimgboxclass" */
    $('.myimgboxclass a').abigimage();

    /* or all links to "*.jpg" images */

    /* or all links to images under dir "/my/images/dir/" */


To change styles use CSS classes of plugin's elements:

<div class="abigimage-overlay"></div>
<div class="abigimage-layout">
    <div class="abigimage-wrapper">
        <div class="abigimage-box">
            <!-- prevBtnBox - clickable behind the image, width 50% -->
            <div class="abigimage-prevBtnBox"></div>
            <!-- closeBtnBox - clickable behind the image, width 50% -->
            <div class="abigimage-closeBtnBox"></div>
            <img class="abigimage-img">
            <img class="abigimage-imgNext">
            <img class="abigimage-imgPrev">
    <div class="abigimage-top">
        <div class="abigimage-prevBtn"><!-- prevBtnHtml --></div>
        <div class="abigimage-nextBtn"><!-- nextBtnHtml --></div>
        <div class="abigimage-counter"></div>
        <div class="abigimage-closeBtn"><!-- closeBtnHtml --></div>
        <div class="abigimage-zoomOutBtn"><!-- zoomOutBtnHtml --></div>
        <div class="abigimage-zoomInBtn"><!-- zoomInBtnHtml --></div>
    <div class="abigimage-bottomBox">
        <div class="abigimage-bottom"></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.

    onopen: function (target) {
            /* bottom caption */
            $('img', target).attr('alt') +
            /* custom bottom area */
            ($('span', target).html() || '')

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

/* open image by index */

/* open image by URL at specified position */
$.abigimage.open('/awesomeimage.jpg', 5);

/* open next image */

/* open previous image */

/* close image */

/* unbind plugin events */

All static methods by default tries to execute on current opened plugin insatnce, if no instances opened, tries to execute on last created instance. You can specify instance by passing it's selector in last argument sel.

$myimgs1 = $('.myimgs1 a').abigimage();
$myimgs2 = $('.myimgs2 a').abigimage();

$.abigimage.open('/awesomeimage.jpg', null, $myimgs2);


MIT License

Copyright (c) 2014-2018 Maksim Krylosov aequiternus@gmail.com