Skip to content

Commit

Permalink
Release v2.0.0
Browse files Browse the repository at this point in the history
makryl committed Feb 14, 2016
1 parent 2a7d571 commit 06a1249
Showing 13 changed files with 1,179 additions and 1,115 deletions.
159 changes: 159 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
module.exports = function (grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

uglify: {
files: {
src: 'abigimage.jquery.js',
dest: 'abigimage.jquery.min.js'
}
},

cssmin: {
files: {
src: 'abigimage.jquery.css',
dest: 'abigimage.jquery.min.css'
}
},

usebanner: {
options: {
position: 'top',
banner: '/*! <%= pkg.name %> v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>) */\n',
linebreak: false
},
files: {
src: [
'abigimage.jquery.min.js',
'abigimage.jquery.min.css'
]
}
},

file_info: {
source_files: {
src: [
'abigimage.jquery.js',
'abigimage.jquery.min.js',
'abigimage.jquery.css',
'abigimage.jquery.min.css'
],
options: {
stdout: false,
inject: {
dest: 'README.md',
text: '* [abigimage.jquery.js](abigimage.jquery.js) ' +
'({{= sizeText(size(src[0])) }}) ' +
'[min](abigimage.jquery.min.js) ' +
'({{= sizeText(size(src[1])) }}, gzipped {{= sizeText(gzipSize(src[1])) }})' +
'\n* [abigimage.jquery.css](abigimage.jquery.css) ' +
'({{= sizeText(size(src[2])) }}) ' +
'[min](abigimage.jquery.min.css) ' +
'({{= sizeText(size(src[3])) }}, gzipped {{= sizeText(gzipSize(src[3])) }})'
}
}
}
},

replace: {
readme: {
options: {
patterns: [
{
match: /version \*\*.*\*\* \(.*\)/,
replacement: 'version **<%= pkg.version %>** (<%= grunt.template.today("yyyy-mm-dd") %>)'
}
]
},
files: [
{
src: 'README.md',
dest: 'README.md'
}
]
},
example: {
options: {
patterns: [
{
match: /<!-- Example -->/,
replacement: '<%= grunt.file.read("tpl/example.tpl.html") %>'
}
]
},
files: [
{
src: 'index.html',
dest: 'index.html'
}
]
}
},

markdown: {
index: {
options: {
template: 'tpl/index.tpl.html',
markdownOptions: {
gfm: true,
highlight: 'manual',
langPrefix: 'hljs lang-'
}
},
files: [
{
src: 'README.md',
dest: 'index.html'
}
]
}
},

clean: [
"abigimage.jquery.min.js.gz"
],

bump: {
options: {
pushTo: 'origin',
commitFiles: ['.'],
updateConfigs: ['pkg']
}
}
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-file-info');
grunt.loadNpmTasks('grunt-replace');
grunt.loadNpmTasks('grunt-markdown');
grunt.loadNpmTasks('grunt-bump');
grunt.loadNpmTasks('grunt-npm');
grunt.loadNpmTasks('grunt-banner');

grunt.registerTask('default', [
'bump-only:prerelease',
'build'
]);

grunt.registerTask('build', [
'uglify',
'cssmin',
'usebanner',
'file_info',
'replace:readme',
'markdown',
'replace:example',
'clean'
]);

grunt.registerTask('release', function (type) {
grunt.task.run('bump-only:' + (type || 'patch'));
grunt.task.run('build');
grunt.task.run('bump-commit');
grunt.task.run('npm-publish');
});

};
394 changes: 21 additions & 373 deletions LICENSE

Large diffs are not rendered by default.

196 changes: 108 additions & 88 deletions README.md
Original file line number Diff line number Diff line change
@@ -2,42 +2,67 @@

`ABigImage` is jQuery plugin for viewing big versions of images.

Current version **2.0.0** (2016-02-14).

<div class="colr">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NUZ7CTKFYDX8C">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="Donate PayPal">
<img alt="" border="0" src="https://www.paypalobjects.com/ru_RU/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

* [abigimage.jquery.js](abigimage.jquery.js) (14.1 kB) [min](abigimage.jquery.min.js) (5.9 kB, gzipped 2.2 kB)
* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 549 bytes)
* Fork at [Github](https://github.com/makryl/ABigImage)

## Features

- Fit mobile devices.
- Uses CSS3 transform and transition for smooth touch sliding.
- Touch slide left or right opens next or previous image, touch slide up or down closes image.
- Multi-touch and double-tap zoom.
- 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.
- Multi-touch zoom.
- Uses link's `href` or `data-href` attribute for large images.
- Fully customizable styles.
- Customizable bottom area.
- Customizable `onopen` event.
- Customizable `onopen` and `onclose` event.

<!-- Example -->

## Usage

### Basic

Add jQuery and ABigImage scripts in head of page.
Add jQuery and ABigImage scripts, and ABigImage styles at your page.

<script src="jquery.js"></script>
<script src="abigimage.jquery.js"></script>
```html
<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.

$(function() {
/* all links with class "myimgclass" */
$('.myimgclass').abigimage();

/* or all links to "*.jpg" images */
$('a[href$=".jpg"]').abigimage();

/* or all links to images under dir "/my/images/dir/" */
$('a[href^="/my/images/dir/"]').abigimage();
});
```js
$(function(){
/* all links with class "myimgclass" */
$('.myimgclass').abigimage();

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

/* or all links to "*.jpg" images */
$('a[href$=".jpg"]').abigimage();

/* or all links to images under dir "/my/images/dir/" */
$('a[href^="/my/images/dir/"]').abigimage();
});
```

### Options

@@ -47,110 +72,105 @@ Call plugin on selector of enlargeable images links.
- `slideVelocity` - slide velocity to switch or close image (pixels per millisecond, default: 0.4).
- `zoomMin` - minimal zoom that will hold (default: 1.5).
- `zoomMax` - maximal zoom (default: 5).
- `doubleTapInterval` - zoom double-tap interval (milliseconds, default: 400).
- `prevBtnHtml` - html of "previous" button (default: `&larr;`).
- `closeBtnHtml` - html of "close" button (default: `x`).
- `keyNext` - hotkeys for "next" button (default: 13 enter, 32 space, 39 right, 40 down).
- `keyPrev` - hotkeys for "previous" button (default: 8 backspace, 37 left, 38 up).
- `keyNext` - hotkeys for "close" button (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.

Plugin generates next html code:

<!-- overlay -->
<div></div>
<!-- layout -->
<div>
<!-- box -->
<div>
<!-- prevBtnWrapper (clickable behind the image, width 50%) -->
<div>
<!-- prevBtnBox (clickable above the image, button width) -->
<div>
<!-- prevBtn -->
<div><!-- prevBtnHtml --></div>
</div>
</div>
<!-- closeBtnWrapper (clickable behind the image, width 50%) -->
<div>
<!-- closeBtnBox (clickable above the image, button width) -->
<div>
<!-- closeBtn -->
<div><!-- closeBtnHtml --></div>
</div>
</div>
<!-- img -->
<img>
<!-- imgNext -->
<img>
<!-- imgPrev -->
<img>
</div>
<!-- bottom -->
<div></div>
- `onclose` - function called when image closes.

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

```html
<div class="abigimage-overlay"></div>
<div class="abigimage-layout">
<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>
<div class="abigimage-prevBtn"><!-- prevBtnHtml --></div>
<div class="abigimage-closeBtn"><!-- closeBtnHtml --></div>
<div class="abigimage-bottom"></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.

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

### Using custom links with data-href attribute

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>
```html
<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 */
$.abigimage.open('/some_image.jpg');
- `open([src], [index], [sel])` - open image by URL or index.
- `next([sel])` - open next image.
- `prev([sel])` - open previous image.
- `close([sel])` - close image.
- `unbind([sel])` - unbind plugin events.

```js
/* open image by URL */
$.abigimage.open('/awesomeimage.jpg');

/* open image by index */
$.abigimage.open(2);

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

/* open image by URL at specified position in current list */
$.abigimage.open('/some_image.jpg', 5);
/* open next image */
$.abigimage.next();

/* open next image */
$.abigimage.next();
/* open previous image */
$.abigimage.prev();

/* open previous image */
$.abigimage.prev();
/* close image */
$.abigimage.close();

/* close image */
$.abigimage.close();
/* unbind plugin events */
$.abigimage.unbind();
```

/* unbind abigimage events */
$.abigimage.unbind();
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`.

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

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

## Changes

- **2.0.0** - fixed multiple plugin instances context, added double-tap zoom, optimized touch event handlers, styles moved to CSS file, license changed to MIT.
- **1.3.1** - fixed image caching, added `unbind` method.

## License

Copyright © 2014 Maksim Krylosov <Aequiternus@gmail.com>
## MIT License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) 2014-2016 Maksim Krylosov <aequiternus@gmail.com>
152 changes: 152 additions & 0 deletions abigimage.jquery.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/**
* http://aeqdev.com/tools/js/abigimage/
*
* MIT License
*
* Copyright (c) 2014-2016 Maksim Krylosov <aequiternus@gmail.com>
*/

.abigimage-overlay {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
border: 1px solid #000; /* android chrome fix O_o */
opacity: .9;
}

.abigimage-layout {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
line-height: 2.5;
}

.abigimage-prevBtnBox {
cursor: pointer;
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}

.abigimage-closeBtnBox {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
}

.abigimage-prevBtn {
color: #fff;
background-color: #000;
opacity: .5;
padding: 0 1em;
border-radius: 0 0 1ex 0;
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-in-out;
}

.abigimage-closeBtn {
color: #fff;
background-color: #000;
opacity: .5;
padding: 0 1em;
border-radius: 0 0 0 1ex;
position: absolute;
top: 0;
right: 0;
transition: all .2s ease-in-out;
}

.abigimage-prevBtn:hover, .abigimage-prevBtn-hover,
.abigimage-closeBtn:hover, .abigimage-closeBtn-hover {
opacity: 1;
}

.abigimage-box {
position: absolute;
width: 312.5%;
height: 100%;
left: -106.25%;
top: 0;
}

.abigimage-box-zoom {
z-index: 101;
}

.abigimage-img {
position: absolute;
margin: auto;
width: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
cursor: pointer;
max-width: 32%;
max-height: 100%;
}

.abigimage-imgNext {
position: absolute;
margin: auto;
width: auto;
top: 0;
right: 0;
bottom: 0;
left: 68%;
display: block;
max-width: 32%;
max-height: 100%;
}

.abigimage-imgPrev {
position: absolute;
margin: auto;
width: auto;
top: 0;
right: 68%;
bottom: 0;
left: 0;
display: block;
max-width: 32%;
max-height: 100%;
}

.abigimage-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
background-color: #000;
color: #fff;
opacity: .5;
padding: 0 1em;
text-align: center;
transition: all .2s ease-in-out;
}

.abigimage-bottom:hover {
opacity: 1;
}
675 changes: 304 additions & 371 deletions abigimage.jquery.js

Large diffs are not rendered by default.

44 changes: 0 additions & 44 deletions abigimage.jquery.json

This file was deleted.

2 changes: 2 additions & 0 deletions abigimage.jquery.min.css
3 changes: 2 additions & 1 deletion abigimage.jquery.min.js
55 changes: 55 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{
"name": "jquery-abigimage",
"description": "ABigImage - view big versions of images. Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left or right opens next or previous image, touch slide up or down closes image. Multi-touch and double-tap zoom. 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. Uses link's `href` or `data-href` attribute for large images. Fully customizable styles. Customizable bottom area. Customizable `onopen` and `onclose` event.",
"main": "abigimage.jquery.min.js",
"authors": [
"Maksim Krylosov <aequiternus@gmail.com> (http://aeqdev.com/)"
],
"license": "MIT",
"keywords": [
"jquery-plugin",
"ecosystem:jquery",
"image",
"picture",
"photo",
"view",
"viewer",
"big",
"large",
"enlarge",
"zoom",
"lightbox",
"popup",
"mobile",
"desktop",
"slideshow",
"touch",
"slide",
"keyboard",
"hotkey",
"responsive",
"html5",
"jquery"
],
"repository": {
"type": "git",
"url": "https://github.com/makryl/ABigImage.git"
},
"moduleType": [],
"homepage": "http://aeqdev.com/tools/js/abigimage/",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"tpl",
"img",
"Gruntfile.js",
"index.html",
"package.json"
],
"dependencies": {
"jquery": ">=1.9"
}
}
438 changes: 206 additions & 232 deletions index.html

Large diffs are not rendered by default.

25 changes: 19 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "abigimage",
"version": "1.3.1",
"author": "Maksim Krylosov <aequitenrus@gmail.com> (http://aeqdev.com/)",
"license": "MPL-2.0",
"version": "2.0.0",
"author": "Maksim Krylosov <aequiternus@gmail.com> (http://aeqdev.com/)",
"license": "MIT",
"homepage": "http://aeqdev.com/tools/js/abigimage/",
"bugs": "https://github.com/Aequiternus/ABigImage/issues",
"description": "ABigImage - view big versions of images. Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left or right opens next or previous image, touch slide up or down closes image. 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. Multi-touch zoom. Uses link's `href` or `data-href` attribute for large images. Fully customizable styles. Customizable bottom area. Customizable `onopen` event.",
"bugs": "https://github.com/makryl/ABigImage/issues",
"description": "ABigImage - view big versions of images. Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left or right opens next or previous image, touch slide up or down closes image. Multi-touch and double-tap zoom. 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. Uses link's `href` or `data-href` attribute for large images. Fully customizable styles. Customizable bottom area. Customizable `onopen` and `onclose` event.",
"keywords": [
"jquery-plugin",
"ecosystem:jquery",
@@ -17,6 +17,7 @@
"big",
"large",
"enlarge",
"zoom",
"lightbox",
"popup",
"mobile",
@@ -33,9 +34,21 @@
"main": "abigimage.jquery.js",
"repository": {
"type": "git",
"url": "https://github.com/Aequiternus/ABigImage.git"
"url": "https://github.com/makryl/ABigImage.git"
},
"dependencies": {
"jquery": ">=1.9"
},
"devDependencies": {
"grunt": "*",
"grunt-banner": "*",
"grunt-bump": "*",
"grunt-contrib-clean": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-uglify": "*",
"grunt-file-info": "*",
"grunt-markdown": "*",
"grunt-npm": "*",
"grunt-replace": "*"
}
}
24 changes: 24 additions & 0 deletions tpl/example.tpl.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<h2 class="clearfix">Example</h2>

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

<p>Live example, where I'm using and testing this plugin at the moment: <a href="http://kawaiinyan.com/" target="_blank">kawaiinyan.com</a>.</p>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="abigimage.jquery.min.js"></script>
<link rel="stylesheet" href="abigimage.jquery.min.css">

<script>
$('a[href$=".jpg"]').abigimage({
onopen: function(target) {
this.bottom.html(
$('img', target).attr('alt')
);
}
});
</script>
127 changes: 127 additions & 0 deletions tpl/index.tpl.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!doctype html>
<html>
<head>
<title>ABigImage | js | tools | aeqdev.com</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ABigImage is jQuery plugin for viewing big versions of images.">
<link rel="stylesheet" href="http://aeqdev.com/tools/css/default/adefault-light.min.css">
<style>
body {
font-family: Arial, sans-serif;
}

.wrapper {
max-width: 200mm;
margin: 0 auto;
}

@media (min-width: 700px) {
.coll {
float: left;
width: 50%;
}

.colr {
float: right;
width: 300px;
}
}

.clearfix {
clear: both;
}

/* Highlight.js */
/* Darkula color scheme from the JetBrains family of IDEs */

.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2b2b2b;
}

.hljs {
color: #bababa;
}

.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-link,
.hljs-number,
.hljs-regexp,
.hljs-literal {
color: #6896ba;
}

.hljs-code,
.hljs-selector-class {
color: #a6e22e;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-attribute,
.hljs-name,
.hljs-variable {
color: #cb7832;
}

.hljs-params {
color: #b9b9b9;
}

.hljs-string,
.hljs-subst,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-symbol,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
color: #e0c46c;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #7f7f7f;
}
</style>
</head>
<body>

<div class="wrapper">

<%=content%>

</div>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-11259339-5', 'aeqdev.com');
ga('send', 'pageview');
</script>

</body>
</html>

0 comments on commit 06a1249

Please sign in to comment.