Skip to content

Commit

Permalink
Readme updated. Default fade in speed: fast.
Browse files Browse the repository at this point in the history
  • Loading branch information
makryl committed Feb 28, 2014
1 parent 4e1d3e4 commit ddafe49
Show file tree
Hide file tree
Showing 4 changed files with 184 additions and 136 deletions.
37 changes: 18 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,9 @@ Add jQuery and ABigImage scripts in head of page.

Call plugin on selector of enlargeable images links.

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

### Options

Expand All @@ -43,6 +41,9 @@ Call plugin on selector of enlargeable images links.
- `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:

Expand Down Expand Up @@ -80,21 +81,19 @@ Plugin generates next html code:

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

## License

Expand Down
114 changes: 57 additions & 57 deletions abigimage.jquery.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,63 +154,63 @@
};

$.fn.abigimage.defaults = {
fadeIn: 'normal',
fadeOut: 'fast',

prevBtnHtml: '&larr;',
closeBtnHtml: 'x',

keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */],
keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */],
keyClose: [27 /* escape */, 35 /* end */, 36 /* home */],

onopen: function() {},

overlayCSS: {position: 'fixed', zIndex: 101, top: 0, right: 0, bottom: 0, left: 0, display: 'none',
backgroundColor: '#000', opacity: 0.9},
layoutCSS: {position: 'fixed', zIndex: 101, top: 0, right: 0, bottom: 0, left: 0, display: 'none',
'-webkit-user-select': 'none', '-moz-user-select': 'none', 'user-select': 'none',
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
lineHeight: 2.5},

prevBtnWrapperCSS: {cursor: 'pointer', position: 'absolute', top: 0, right: '50%', bottom: 0, left: 0},
closeBtnWrapperCSS: {cursor: 'pointer', position: 'absolute', top: 0, right: 0, bottom: 0, left: '50%'},

prevBtnBoxCSS: {position: 'absolute', zIndex: 104, top: 0, bottom: 0, left: 0},
closeBtnBoxCSS: {position: 'absolute', zIndex: 104, top: 0, bottom: 0, right: 0},

prevBtnCSS: {color: '#fff', backgroundColor: '#000', opacity: 0.5,
padding: '0 1em', borderRadius: '0 0 1ex 0'},
closeBtnCSS: {color: '#fff', backgroundColor: '#000', opacity: 0.5,
padding: '0 1em', borderRadius: '0 0 0 1ex'},

prevBtnHoverCSS: {opacity: 1},
closeBtnHoverCSS: {opacity: 1},

imgCSS: {position: 'absolute', zIndex: 102, margin: 'auto', top: 0, right: 0, bottom: 0, left: 0,
display: 'block', cursor: 'pointer', maxWidth: '100%', maxHeight: '100%'},

imgNextCSS: {position: 'absolute', top: '-10000px', width: '100px'},
imgPrevCSS: {position: 'absolute', top: '-10000px', width: '100px'},

bottomCSS: {position: 'absolute', zIndex: 103, right: 0, bottom: 0, left: 0,
'-webkit-user-select': 'text', '-moz-user-select': 'text', 'user-select': 'text',
backgroundColor: '#000', color: '#fff', opacity: 0.5,
padding: '0 1em', textAlign: 'center'},
bottomHoverCSS: {opacity: 1},

overlayAttrs: {},
layoutAttrs: {},
prevBtnWrapperAttrs: {},
prevBtnBoxAttrs: {},
prevBtnAttrs: {},
closeBtnWrapperAttrs: {},
closeBtnBoxAttrs: {},
closeBtnAttrs: {},
imgAttrs: {},
imgNextAttrs: {},
imgPrevAttrs: {},
bottomAttrs: {}
fadeIn: 'fast',
fadeOut: 'fast',

prevBtnHtml: '&larr;',
closeBtnHtml: 'x',

keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */],
keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */],
keyClose: [27 /* escape */, 35 /* end */, 36 /* home */],

onopen: function() {},

overlayCSS: {position: 'fixed', zIndex: 101, top: 0, right: 0, bottom: 0, left: 0, display: 'none',
backgroundColor: '#000', opacity: .9},
layoutCSS: {position: 'fixed', zIndex: 101, top: 0, right: 0, bottom: 0, left: 0, display: 'none',
'-webkit-user-select': 'none', '-moz-user-select': 'none', 'user-select': 'none',
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
lineHeight: 2.5},

prevBtnWrapperCSS: {cursor: 'pointer', position: 'absolute', top: 0, right: '50%', bottom: 0, left: 0},
closeBtnWrapperCSS: {cursor: 'pointer', position: 'absolute', top: 0, right: 0, bottom: 0, left: '50%'},

prevBtnBoxCSS: {position: 'absolute', zIndex: 104, top: 0, bottom: 0, left: 0},
closeBtnBoxCSS: {position: 'absolute', zIndex: 104, top: 0, bottom: 0, right: 0},

prevBtnCSS: {color: '#fff', backgroundColor: '#000', opacity: .5,
padding: '0 1em', borderRadius: '0 0 1ex 0'},
closeBtnCSS: {color: '#fff', backgroundColor: '#000', opacity: .5,
padding: '0 1em', borderRadius: '0 0 0 1ex'},

prevBtnHoverCSS: {opacity: 1},
closeBtnHoverCSS: {opacity: 1},

imgCSS: {position: 'absolute', zIndex: 102, margin: 'auto', top: 0, right: 0, bottom: 0, left: 0,
display: 'block', cursor: 'pointer', maxWidth: '100%', maxHeight: '100%'},

imgNextCSS: {position: 'absolute', top: '-10000px', width: '100px'},
imgPrevCSS: {position: 'absolute', top: '-10000px', width: '100px'},

bottomCSS: {position: 'absolute', zIndex: 103, right: 0, bottom: 0, left: 0,
'-webkit-user-select': 'text', '-moz-user-select': 'text', 'user-select': 'text',
backgroundColor: '#000', color: '#fff', opacity: .5,
padding: '0 1em', textAlign: 'center'},
bottomHoverCSS: {opacity: 1},

overlayAttrs: {},
layoutAttrs: {},
prevBtnWrapperAttrs: {},
prevBtnBoxAttrs: {},
prevBtnAttrs: {},
closeBtnWrapperAttrs: {},
closeBtnBoxAttrs: {},
closeBtnAttrs: {},
imgAttrs: {},
imgNextAttrs: {},
imgPrevAttrs: {},
bottomAttrs: {}
};

}(jQuery));
23 changes: 21 additions & 2 deletions abigimage.jquery.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "abigimage",
"version": "1.2.1",
"version": "1.2.2",
"title": "ABigImage - view big versions of images",
"author": {
"name": "Maksim Krylosov",
Expand All @@ -15,7 +15,26 @@
"jquery": ">=1.9"
},
"description": "Fit mobile devices. Uses link's `href` attribute for large images. Clicking image opens next one, clicking left side opens previous, clicking right side closes image. Hotkeys for next, previous and close buttons. Closing after viewing of all images. Preloading of next and previous images. Fully customizable styles. Customizable bottom area. Customizable `onopen` event.",
"keywords": ["image", "picture", "photo", "view", "viewer", "big", "large", "enlarge"],
"keywords": [
"image",
"picture",
"photo",
"view",
"viewer",
"big",
"large",
"enlarge",
"lightbox",
"popup",
"mobile",
"desktop",
"slideshow",
"keyboard",
"hotkey",
"responsive",
"html5",
"jquery"
],
"homepage": "http://aeqdev.com/tools/js/abigimage/",
"docs": "http://aeqdev.com/tools/js/abigimage/",
"demo": "http://aeqdev.com/tools/js/abigimage/",
Expand Down
Loading

0 comments on commit ddafe49

Please sign in to comment.