ABigImage - Viewing big versions of images

ABigImage is jQuery plugin for viewing big versions of images.

Features

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE JS FILES

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

2. HTML

<a href="img/1-big.jpg"><img src="img/1-small.jpg" alt="First image"></a>
<a href="img/2-big.jpg"><img src="img/2-small.jpg" alt="Second image"></a>
<a href="img/3-big.jpg"><img src="img/3-small.jpg" alt="Third image"></a>
<a href="img/4-big.jpg"><img src="img/4-small.jpg" alt="Fourth image"></a>

3. JAVASCRIPT

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

4. OPTIONS

• fadeIn - fade in duration.
• fadeOut - fade out duration.
• prevBtnHtml - html of "previous" button.
• closeBtnHtml - html of "close" button.
• 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.

5. EXAMPLES

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')
            );
        }
    });
});