Skip to content
This repository was archived by the owner on Mar 4, 2019. It is now read-only.

Commit af287a8

Browse files
blueimpblueimp
committed
Refactored version based on blueimp Gallery.
1 parent d866447 commit af287a8

17 files changed

+467
-1256
lines changed

‎Gruntfile.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/*
2+
* jQuery Image Gallery Gruntfile
3+
* https://github.com/blueimp/jQuery-Image-Gallery
4+
*
5+
* Copyright 2013, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://www.opensource.org/licenses/MIT
10+
*/
11+
12+
/*global module */
13+
14+
module.exports = function (grunt) {
15+
'use strict';
16+
17+
grunt.initConfig({
18+
jshint: {
19+
all: [
20+
'Gruntfile.js',
21+
'js/jquery.image-gallery.js',
22+
'js/demo.js'
23+
]
24+
},
25+
uglify: {
26+
production: {
27+
src: [
28+
'js/jquery.image-gallery.js'
29+
],
30+
dest: 'js/jquery.image-gallery.min.js'
31+
}
32+
}
33+
});
34+
35+
grunt.loadNpmTasks('grunt-contrib-jshint');
36+
grunt.loadNpmTasks('grunt-contrib-uglify');
37+
grunt.loadNpmTasks('grunt-bump-build-git');
38+
39+
grunt.registerTask('test', ['jshint']);
40+
grunt.registerTask('default', ['test', 'uglify']);
41+
42+
};

‎Makefile

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎README.md

Lines changed: 56 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,76 @@
1-
# jQuery Image Gallery Plugin
1+
# jQuery Image Gallery
22

3-
## Notice
4-
[blueimp Gallery](http://blueimp.github.io/Gallery/) is a completely rewritten, much improved image gallery, replacing this version.
3+
- [Demo](#demo)
4+
- [Description](#description)
5+
- [Setup](#setup)
6+
- [Documentation](#documentation)
7+
- [Requirements](#requirements)
8+
- [License](#license)
59

610
## Demo
711
[jQuery Image Gallery Demo](http://blueimp.github.io/jQuery-Image-Gallery/)
812

9-
## Description & Usage
10-
The Image Gallery plugin makes use of jQuery's
11-
[delegate](http://api.jquery.com/delegate/) method to attach
12-
a click event handler for all child elements of a container:
13+
## Description
14+
jQuery Image Gallery displays images with the touch-enabled, responsive and customizable [blueimp Gallery](http://blueimp.github.io/Gallery/) carousel in the dialog component of [jQuery UI](http://jqueryui.com/).
15+
It features swipe, mouse and keyboard navigation, transition effects and on-demand content loading and can be extended to display additional content types.
1316

14-
```js
15-
$('#gallery').imagegallery();
16-
```
17-
18-
It is possible to override the default selector as well as a number of
19-
additional gallery options:
17+
## Setup
18+
Copy **js/jquery.image-gallery.min.js** to your website.
19+
20+
Add the following HTML snippet to the head section of your webpage:
2021

21-
```js
22-
$('#gallery').imagegallery({
23-
// selector given to jQuery's delegate method:
24-
selector: 'a[data-gallery="gallery"]',
25-
// event handler namespace:
26-
namespace: 'imagegallery',
27-
// Shows the next image after the given time in ms (0 = disabled):
28-
slideshow: 0,
29-
// Offset of image width to viewport width:
30-
offsetWidth: 100,
31-
// Offset of image height to viewport height:
32-
offsetHeight: 100,
33-
// Display images fullscreen (overrides offsets):
34-
fullscreen: false,
35-
// Display images as canvas elements:
36-
canvas: false,
37-
// body class added on dialog display:
38-
bodyClass: 'gallery-body',
39-
// element id of the loading animation:
40-
loaderId: 'gallery-loader',
41-
// list of available dialog effects,
42-
// used when show/hide is set to "random":
43-
effects: [
44-
'blind',
45-
'clip',
46-
'drop',
47-
'explode',
48-
'fade',
49-
'fold',
50-
'puff',
51-
'slide',
52-
'scale'
53-
],
54-
// The following are jQuery UI dialog options, see
55-
// http://jqueryui.com/demos/dialog/#options
56-
// for additional options and documentation:
57-
modal: true,
58-
resizable: false,
59-
width: 'auto',
60-
height: 'auto',
61-
show: 'fade',
62-
hide: 'fade',
63-
dialogClass: 'gallery-dialog'
64-
});
22+
```html
23+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" id="theme">
24+
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
6525
```
6626

67-
The click handler opens the linked images in a jQuery UI dialog.
68-
The options object given to the imagegallery method is passed to the
69-
[jQuery UI dialog](http://jqueryui.com/demos/dialog/) initialization
70-
and allows to override any
71-
[dialog options](http://jqueryui.com/demos/dialog/#options).
27+
Add the following HTML snippet with the dialog and embedded Gallery widget to the body of your webpage:
7228

73-
It is possible to change options after widget initialization:
29+
```html
30+
<!-- The dialog widget -->
31+
<div id="blueimp-gallery-dialog" data-show="fade" data-hide="fade">
32+
<!-- The gallery widget -->
33+
<div class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
34+
<div class="slides"></div>
35+
<a class="prev">‹</a>
36+
<a class="next">›</a>
37+
<a class="play-pause"></a>
38+
</div>
39+
</div>
40+
```
7441

75-
```js
76-
$('#gallery').imagegallery('option', 'fullscreen', true);
77-
$('#gallery').imagegallery('option', {
78-
show: 'slide',
79-
hide: 'slide'
80-
});
42+
Include the following scripts at the bottom of the body of your webpage:
43+
44+
```html
45+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
46+
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
47+
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
48+
<script src="js/jquery.image-gallery.min.js"></script>
8149
```
8250

83-
The Image Gallery widget can also be disabled/enabled/destroyed:
51+
Create a list of links to image files with the attribute **data-dialog** (optionally with enclosed thumbnails) and add them to the body of your webpage:
8452

85-
```js
86-
$('#gallery').imagegallery('disable');
87-
$('#gallery').imagegallery('enable');
88-
$('#gallery').imagegallery('destroy');
53+
```html
54+
<div id="links">
55+
<a href="images/banana.jpg" title="Banana" data-dialog>
56+
<img src="images/thumbnails/banana.jpg" alt="Banana">
57+
</a>
58+
<a href="images/apple.jpg" title="Apple" data-dialog>
59+
<img src="images/thumbnails/apple.jpg" alt="Apple">
60+
</a>
61+
<a href="images/orange.jpg" title="Orange" data-dialog>
62+
<img src="images/thumbnails/orange.jpg" alt="Orange">
63+
</a>
64+
</div>
8965
```
9066

67+
## Documentation
68+
For information regarding Keyboard shortcuts, Gallery Options, API methods, Video Gallery setup, Gallery extensions and Browser support, please refer to the [blueimp Gallery documentation](https://github.com/blueimp/Gallery/blob/master/README.md).
69+
9170
## Requirements
92-
* [jQuery](http://jquery.com/) v. 1.6+
93-
* [jQuery UI](http://jqueryui.com/) v. 1.8+ (Required: Widget, Dialog)
94-
* [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) v. 1.7+ (included)
71+
* [jQuery](http://jquery.com/) v. 1.7.0+
72+
* [jQuery UI](http://jqueryui.com/) v. 1.10.0+
73+
* [blueimp Gallery](https://github.com/blueimp/Gallery) v. 2.12.0+
9574

9675
## License
9776
Released under the [MIT license](http://www.opensource.org/licenses/MIT).

‎blueimp-image-gallery.jquery.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "blueimp-image-gallery",
3+
"version": "3.0.0",
4+
"title": "jQuery Image Gallery",
5+
"description": "jQuery Image Gallery displays images with the touch-enabled, responsive and customizable blueimp Gallery carousel in the dialog component of jQuery UI. It features swipe, mouse and keyboard navigation, transition effects and on-demand content loading and can be extended to display additional content types.",
6+
"keywords": [
7+
"image",
8+
"gallery",
9+
"dialog",
10+
"transition",
11+
"effects"
12+
],
13+
"homepage": "https://github.com/blueimp/jQuery-Image-Gallery",
14+
"author": {
15+
"name": "Sebastian Tschan",
16+
"url": "https://blueimp.net"
17+
},
18+
"maintainers": [
19+
{
20+
"name": "Sebastian Tschan",
21+
"url": "https://blueimp.net"
22+
}
23+
],
24+
"bugs": "https://github.com/blueimp/jQuery-Image-Gallery/issues",
25+
"licenses": [
26+
{
27+
"type": "MIT",
28+
"url": "http://www.opensource.org/licenses/MIT"
29+
}
30+
],
31+
"dependencies": {
32+
"jquery": ">=1.7",
33+
"jquery-ui": ">=1.10",
34+
"blueimp-gallery": ">=2.12.0"
35+
},
36+
"docs": "https://github.com/blueimp/jQuery-Image-Gallery/blob/master/README.md",
37+
"demo": "http://blueimp.github.io/jQuery-Image-Gallery/"
38+
}

‎bower.json

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
11
{
2-
"name": "blueimp-image-gallery",
3-
"version": "2.5.1",
4-
"title": "jQuery Image Gallery",
5-
"description": "jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.",
6-
"keywords": [
7-
"image",
8-
"gallery",
9-
"lightbox",
10-
"dialog",
11-
"transition",
12-
"effects",
13-
"fullscreen",
14-
"slideshow"
15-
],
16-
"homepage": "https://github.com/blueimp/jQuery-Image-Gallery",
17-
"author": {
18-
"name": "Sebastian Tschan",
19-
"url": "https://blueimp.net"
20-
},
21-
"repository": {
22-
"type": "git",
23-
"url": "git://github.com/blueimp/jQuery-Image-Gallery.git"
24-
},
25-
"licenses": [
26-
{
27-
"type": "MIT",
28-
"url": "http://www.opensource.org/licenses/MIT"
29-
}
30-
],
31-
"devDependencies": {
32-
"uglify-js": "2.3.6",
33-
"less": "1.4.0"
34-
},
35-
"dependencies": {
36-
"jquery": ">=1.6",
37-
"jquery-ui": ">=1.8"
2+
"name": "blueimp-image-gallery",
3+
"version": "3.0.0",
4+
"title": "jQuery Image Gallery",
5+
"description": "jQuery Image Gallery displays images with the touch-enabled, responsive and customizable blueimp Gallery carousel in the dialog component of jQuery UI. It features swipe, mouse and keyboard navigation, transition effects and on-demand content loading and can be extended to display additional content types.",
6+
"keywords": [
7+
"image",
8+
"gallery",
9+
"dialog",
10+
"transition",
11+
"effects"
12+
],
13+
"homepage": "https://github.com/blueimp/jQuery-Image-Gallery",
14+
"author": {
15+
"name": "Sebastian Tschan",
16+
"url": "https://blueimp.net"
17+
},
18+
"repository": {
19+
"type": "git",
20+
"url": "git://github.com/blueimp/jQuery-Image-Gallery.git"
21+
},
22+
"bugs": "https://github.com/blueimp/jQuery-Image-Gallery/issues",
23+
"licenses": [
24+
{
25+
"type": "MIT",
26+
"url": "http://www.opensource.org/licenses/MIT"
3827
}
28+
],
29+
"dependencies": {
30+
"jquery": ">=1.7",
31+
"jquery-ui": ">=1.10",
32+
"blueimp-gallery": ">=2.12.0"
33+
},
34+
"main": [
35+
"js/jquery.image-gallery.js"
36+
],
37+
"ignore": [
38+
"/*.*",
39+
"css/demo.css",
40+
"js/demo.js"
41+
]
3942
}

‎css/demo.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@charset "UTF-8";
2+
/*
3+
* jQuery Image Gallery Demo CSS 3.0.0
4+
* https://github.com/blueimp/jQuery-Image-Gallery
5+
*
6+
* Copyright 2013, Sebastian Tschan
7+
* https://blueimp.net
8+
*
9+
* Licensed under the MIT license:
10+
* http://www.opensource.org/licenses/MIT
11+
*/
12+
13+
body {
14+
margin: 0;
15+
padding: 15px 30px;
16+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
17+
font-size: 1em;
18+
line-height: 1.4;
19+
background: #222;
20+
color: #fff;
21+
}
22+
h1 {
23+
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
24+
}
25+
a {
26+
color: orange;
27+
text-decoration: none;
28+
}
29+
a:hover {
30+
color: lightblue;
31+
}
32+
img {
33+
border: 0;
34+
vertical-align: middle;
35+
}
36+
blockquote {
37+
padding: 0 20px;
38+
margin: 0 0 20px;
39+
border-left: 5px solid lightblue;
40+
}
41+
42+
@media (min-width: 481px) {
43+
body {
44+
padding: 30px 60px;
45+
}
46+
.navigation {
47+
list-style: none;
48+
padding: 0;
49+
}
50+
.navigation li {
51+
display: inline-block;
52+
}
53+
.navigation li:not(:first-child):before {
54+
content: "| ";
55+
margin: 0 5px;
56+
}
57+
}

0 commit comments

Comments
 (0)