href
attribute for large images.onopen
event.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>
fadeIn
- fade in duration or options.fadeOut
- fade out duration or options.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).keyNext
- 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.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>
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.