jQuery ABigImage Example

Features

Example

First image Second image Third image

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.

<script>
    $(function() {
        $('a[href$=".jpg"]').abigimage();
    });
</script>

Options

Plugin generates next html code:

<!-- overlay -->
<div></div>
<!-- layout -->
<div>
    <!-- wrapper -->
    <div>
        <!-- box -->
        <div>
            <!-- prevBtn -->
            <div><!-- prevBtnHtml --></div>
            <!-- body -->
            <div>
                <!-- top -->
                <div></div>
                <!-- img -->
                <img>
                <!-- imgNext -->
                <img>
                <!-- imgPrev -->
                <img>
                <!-- bottom -->
                <div></div>
            </div>
            <!-- closeBtn -->
            <div><!-- closeBtnHtml --></div>
        </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.

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

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