blueimp-gallery 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/CHANGELOG.md +3 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +137 -0
- data/Rakefile +1 -0
- data/blueimp-gallery.gemspec +24 -0
- data/lib/blueimp/gallery/engine.rb +7 -0
- data/lib/blueimp/gallery/version.rb +5 -0
- data/lib/blueimp/gallery.rb +8 -0
- data/vendor/assets/images/error.png +0 -0
- data/vendor/assets/images/error.svg +5 -0
- data/vendor/assets/images/loading.gif +0 -0
- data/vendor/assets/images/play-pause.png +0 -0
- data/vendor/assets/images/play-pause.svg +6 -0
- data/vendor/assets/images/video-play.png +0 -0
- data/vendor/assets/images/video-play.svg +5 -0
- data/vendor/assets/javascripts/blueimp-gallery-all.js +5 -0
- data/vendor/assets/javascripts/blueimp-gallery-fullscreen.js +85 -0
- data/vendor/assets/javascripts/blueimp-gallery-indicator.js +153 -0
- data/vendor/assets/javascripts/blueimp-gallery-video.js +156 -0
- data/vendor/assets/javascripts/blueimp-gallery.js +1176 -0
- data/vendor/assets/javascripts/blueimp-helper.js +187 -0
- data/vendor/assets/javascripts/jquery.blueimp-gallery.js +75 -0
- data/vendor/assets/stylesheets/blueimp-gallery-all.css +5 -0
- data/vendor/assets/stylesheets/blueimp-gallery-indicator.css +70 -0
- data/vendor/assets/stylesheets/blueimp-gallery-video.css +69 -0
- data/vendor/assets/stylesheets/blueimp-gallery.css +219 -0
- metadata +114 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: e5a0d430a28bef2ceb7b9240a24437aa1cbcbc3d
|
4
|
+
data.tar.gz: 1f53e45fb498800372c531450f126ae09b34a5b9
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 0a2d5280fcd938595ae29f0b107aaa3ef3ab2715ec8836caffc111f96463dc48492fe44f5d57d198246690753a7a6d196d1b9545f00bbb25d97346ec25f01e7a
|
7
|
+
data.tar.gz: 7a10b4dfd24dcfab97bdcf5fb5538f1e5e633b46fe07b84409db447241e952bb8397b1451cec679a365efe5f3af86f973dfe07dcaf64f69b28d6ca02b3e324c8
|
data/.gitignore
ADDED
data/CHANGELOG.md
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Christopher Fernández
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,137 @@
|
|
1
|
+
# blueimp Gallery for Rails
|
2
|
+
|
3
|
+
blueimp Gallery is an image and video gallery featuring carousel and lightbox gallery with mouse and keyboard navigation, transition effects and more. This amazing plugin was created by [Sebastian Tschan](https://github.com/blueimp).
|
4
|
+
|
5
|
+
* blueimp Gallery version 2.7.3
|
6
|
+
* Official Website: http://blueimp.github.io/Gallery/
|
7
|
+
|
8
|
+
|
9
|
+
## Installation
|
10
|
+
|
11
|
+
Add this line to your application's Gemfile:
|
12
|
+
|
13
|
+
gem 'blueimp-gallery'
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install blueimp-gallery
|
22
|
+
|
23
|
+
Add this line to your `app/assets/javascripts/application.js`
|
24
|
+
|
25
|
+
//= require blueimp-gallery-all
|
26
|
+
|
27
|
+
Add this line to your `app/assets/stylesheets/application.css`
|
28
|
+
|
29
|
+
*= require blueimp-gallery-all
|
30
|
+
|
31
|
+
## Usage
|
32
|
+
|
33
|
+
### Lightbox
|
34
|
+
|
35
|
+
This is a basic example how create a lightbox.
|
36
|
+
|
37
|
+
Add the following HTML snippet to your view:
|
38
|
+
|
39
|
+
```html
|
40
|
+
<div id="blueimp-gallery" class="blueimp-gallery">
|
41
|
+
<div class="slides"></div>
|
42
|
+
<h3 class="title"></h3>
|
43
|
+
<a class="prev">‹</a>
|
44
|
+
<a class="next">›</a>
|
45
|
+
<a class="close">×</a>
|
46
|
+
<a class="play-pause"></a>
|
47
|
+
<ol class="indicator"></ol>
|
48
|
+
</div>
|
49
|
+
```
|
50
|
+
|
51
|
+
Add a list of image links you want to show into your gallery:
|
52
|
+
|
53
|
+
|
54
|
+
```html
|
55
|
+
<div id="links">
|
56
|
+
<a href="images/photo1.jpg" title="Photo 1">
|
57
|
+
<img src="images/thumb_photo1.jpg" alt="Photo 1">
|
58
|
+
</a>
|
59
|
+
<a href="images/photo2.jpg" title="Photo 2">
|
60
|
+
<img src="images/thumb_photo2.jpg" alt="Photo 2">
|
61
|
+
</a>
|
62
|
+
<a href="images/photo3.jpg" title="Photo 3">
|
63
|
+
<img src="images/thumb_photo3.jpg" alt="Photo 3">
|
64
|
+
</a>
|
65
|
+
</div>
|
66
|
+
```
|
67
|
+
|
68
|
+
Finally add this JavaScript to display the images in your beautiful gallery:
|
69
|
+
|
70
|
+
```html
|
71
|
+
<script>
|
72
|
+
document.getElementById('links').onclick = function (event) {
|
73
|
+
event = event || window.event;
|
74
|
+
var target = event.target || event.srcElement,
|
75
|
+
link = target.src ? target.parentNode : target,
|
76
|
+
options = {index: link, event: event},
|
77
|
+
links = this.getElementsByTagName('a');
|
78
|
+
blueimp.Gallery(links, options);
|
79
|
+
};
|
80
|
+
</script>
|
81
|
+
```
|
82
|
+
|
83
|
+
or CoffeeScript if you want to add the script as an asset:
|
84
|
+
|
85
|
+
```coffeescript
|
86
|
+
document.getElementById("links").onclick = (event) ->
|
87
|
+
event = event or window.event
|
88
|
+
target = event.target or event.srcElement
|
89
|
+
link = (if target.src then target.parentNode else target)
|
90
|
+
options =
|
91
|
+
index: link
|
92
|
+
event: event
|
93
|
+
|
94
|
+
links = @getElementsByTagName("a")
|
95
|
+
blueimp.Gallery links, options
|
96
|
+
```
|
97
|
+
|
98
|
+
### Carousel
|
99
|
+
|
100
|
+
If you want a Carousel gallery, replace the html snippet with:
|
101
|
+
|
102
|
+
```html
|
103
|
+
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
|
104
|
+
<div class="slides"></div>
|
105
|
+
<h3 class="title"></h3>
|
106
|
+
<a class="prev">‹</a>
|
107
|
+
<a class="next">›</a>
|
108
|
+
<a class="play-pause"></a>
|
109
|
+
<ol class="indicator"></ol>
|
110
|
+
</div>
|
111
|
+
```
|
112
|
+
|
113
|
+
And add this JavaScript:
|
114
|
+
|
115
|
+
```html
|
116
|
+
<script>
|
117
|
+
blueimp.Gallery(
|
118
|
+
document.getElementById('links').getElementsByTagName('a'),
|
119
|
+
{
|
120
|
+
container: '#blueimp-gallery-carousel',
|
121
|
+
carousel: true
|
122
|
+
}
|
123
|
+
);
|
124
|
+
</script>
|
125
|
+
```
|
126
|
+
|
127
|
+
## More Features
|
128
|
+
|
129
|
+
blueimp Gallery has a lot more features and options as adding control keys, fullscreen, slide interval, etc. The complete documentation is on the [blueimp Gallery site](https://github.com/blueimp/Gallery).
|
130
|
+
|
131
|
+
## Contributing
|
132
|
+
|
133
|
+
1. Fork it
|
134
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
135
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
136
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
137
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'blueimp/gallery/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "blueimp-gallery"
|
8
|
+
spec.version = Blueimp::Gallery::VERSION
|
9
|
+
spec.authors = ["Christopher Fernández"]
|
10
|
+
spec.email = ["fernandez.chl@gmail.com"]
|
11
|
+
spec.description = %q{blueimp Gallery for Rails}
|
12
|
+
spec.summary = %q{blueimp Gallery for Rails}
|
13
|
+
spec.homepage = "https://github.com/Phifo/blueimp-gallery"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files`.split($/)
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
22
|
+
spec.add_development_dependency "rake"
|
23
|
+
spec.add_development_dependency "rspec"
|
24
|
+
end
|
Binary file
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
|
3
|
+
<circle cx="32" cy="32" r="25" stroke="red" stroke-width="7" fill="black" fill-opacity="0.2"/>
|
4
|
+
<rect x="28" y="7" width="8" height="50" fill="red" transform="rotate(45, 32, 32)"/>
|
5
|
+
</svg>
|
Binary file
|
Binary file
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="15">
|
3
|
+
<polygon points="2,1 2,14 13,7" stroke="black" stroke-width="1" fill="white"/>
|
4
|
+
<rect x="17" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
|
5
|
+
<rect x="24" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
|
6
|
+
</svg>
|
Binary file
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
|
3
|
+
<circle cx="32" cy="32" r="25" stroke="white" stroke-width="7" fill="black" fill-opacity="0.2"/>
|
4
|
+
<polygon points="26,22 26,42 43,32" fill="white"/>
|
5
|
+
</svg>
|
@@ -0,0 +1,85 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Fullscreen JS 1.0.0
|
3
|
+
* https://github.com/blueimp/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 define, window, document */
|
13
|
+
|
14
|
+
(function (factory) {
|
15
|
+
'use strict';
|
16
|
+
if (typeof define === 'function' && define.amd) {
|
17
|
+
// Register as an anonymous AMD module:
|
18
|
+
define([
|
19
|
+
'./blueimp-helper',
|
20
|
+
'./blueimp-gallery'
|
21
|
+
], factory);
|
22
|
+
} else {
|
23
|
+
// Browser globals:
|
24
|
+
factory(
|
25
|
+
window.blueimp.helper || window.jQuery,
|
26
|
+
window.blueimp.Gallery
|
27
|
+
);
|
28
|
+
}
|
29
|
+
}(function ($, Gallery) {
|
30
|
+
'use strict';
|
31
|
+
|
32
|
+
$.extend(Gallery.prototype.options, {
|
33
|
+
// Defines if the gallery should open in fullscreen mode:
|
34
|
+
fullScreen: false
|
35
|
+
});
|
36
|
+
|
37
|
+
var initialize = Gallery.prototype.initialize,
|
38
|
+
close = Gallery.prototype.close;
|
39
|
+
|
40
|
+
$.extend(Gallery.prototype, {
|
41
|
+
|
42
|
+
getFullScreenElement: function () {
|
43
|
+
return document.fullscreenElement ||
|
44
|
+
document.webkitFullscreenElement ||
|
45
|
+
document.mozFullScreenElement;
|
46
|
+
},
|
47
|
+
|
48
|
+
requestFullScreen: function (element) {
|
49
|
+
if (element.requestFullscreen) {
|
50
|
+
element.requestFullscreen();
|
51
|
+
} else if (element.webkitRequestFullscreen) {
|
52
|
+
element.webkitRequestFullscreen();
|
53
|
+
} else if (element.mozRequestFullScreen) {
|
54
|
+
element.mozRequestFullScreen();
|
55
|
+
}
|
56
|
+
},
|
57
|
+
|
58
|
+
exitFullScreen: function () {
|
59
|
+
if (document.exitFullscreen) {
|
60
|
+
document.exitFullscreen();
|
61
|
+
} else if (document.webkitCancelFullScreen) {
|
62
|
+
document.webkitCancelFullScreen();
|
63
|
+
} else if (document.mozCancelFullScreen) {
|
64
|
+
document.mozCancelFullScreen();
|
65
|
+
}
|
66
|
+
},
|
67
|
+
|
68
|
+
initialize: function () {
|
69
|
+
initialize.call(this);
|
70
|
+
if (this.options.fullScreen && !this.getFullScreenElement()) {
|
71
|
+
this.requestFullScreen(this.container[0]);
|
72
|
+
}
|
73
|
+
},
|
74
|
+
|
75
|
+
close: function () {
|
76
|
+
if (this.getFullScreenElement() === this.container[0]) {
|
77
|
+
this.exitFullScreen();
|
78
|
+
}
|
79
|
+
close.call(this);
|
80
|
+
}
|
81
|
+
|
82
|
+
});
|
83
|
+
|
84
|
+
return Gallery;
|
85
|
+
}));
|
@@ -0,0 +1,153 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Indicator JS 1.0.0
|
3
|
+
* https://github.com/blueimp/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 define, window, document */
|
13
|
+
|
14
|
+
(function (factory) {
|
15
|
+
'use strict';
|
16
|
+
if (typeof define === 'function' && define.amd) {
|
17
|
+
// Register as an anonymous AMD module:
|
18
|
+
define([
|
19
|
+
'./blueimp-helper',
|
20
|
+
'./blueimp-gallery'
|
21
|
+
], factory);
|
22
|
+
} else {
|
23
|
+
// Browser globals:
|
24
|
+
factory(
|
25
|
+
window.blueimp.helper || window.jQuery,
|
26
|
+
window.blueimp.Gallery
|
27
|
+
);
|
28
|
+
}
|
29
|
+
}(function ($, Gallery) {
|
30
|
+
'use strict';
|
31
|
+
|
32
|
+
$.extend(Gallery.prototype.options, {
|
33
|
+
// The tag name, Id, element or querySelector of the indicator container:
|
34
|
+
indicatorContainer: 'ol',
|
35
|
+
// The class for the active indicator:
|
36
|
+
activeIndicatorClass: 'active',
|
37
|
+
// The list object property (or data attribute) with the thumbnail URL,
|
38
|
+
// used as alternative to a thumbnail child element:
|
39
|
+
thumbnailProperty: 'thumbnail',
|
40
|
+
// Defines if the gallery indicators should display a thumbnail:
|
41
|
+
thumbnailIndicators: true
|
42
|
+
});
|
43
|
+
|
44
|
+
var initSlides = Gallery.prototype.initSlides,
|
45
|
+
addSlide = Gallery.prototype.addSlide,
|
46
|
+
resetSlides = Gallery.prototype.resetSlides,
|
47
|
+
handleClick = Gallery.prototype.handleClick,
|
48
|
+
handleSlide = Gallery.prototype.handleSlide,
|
49
|
+
close = Gallery.prototype.close;
|
50
|
+
|
51
|
+
$.extend(Gallery.prototype, {
|
52
|
+
|
53
|
+
createIndicator: function (obj) {
|
54
|
+
var indicator = this.indicatorPrototype.cloneNode(false),
|
55
|
+
title = this.getItemProperty(obj, this.options.titleProperty),
|
56
|
+
thumbnailProperty = this.options.thumbnailProperty,
|
57
|
+
thumbnailUrl,
|
58
|
+
thumbnail;
|
59
|
+
if (this.options.thumbnailIndicators) {
|
60
|
+
thumbnail = obj.getElementsByTagName && $(obj).find('img')[0];
|
61
|
+
if (thumbnail) {
|
62
|
+
thumbnailUrl = thumbnail.src;
|
63
|
+
} else if (thumbnailProperty) {
|
64
|
+
thumbnailUrl = this.getItemProperty(obj, thumbnailProperty);
|
65
|
+
}
|
66
|
+
if (thumbnailUrl) {
|
67
|
+
indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")';
|
68
|
+
}
|
69
|
+
}
|
70
|
+
if (title) {
|
71
|
+
indicator.title = title;
|
72
|
+
}
|
73
|
+
return indicator;
|
74
|
+
},
|
75
|
+
|
76
|
+
addIndicator: function (index) {
|
77
|
+
if (this.indicatorContainer.length) {
|
78
|
+
var indicator = this.createIndicator(this.list[index]);
|
79
|
+
indicator.setAttribute('data-index', index);
|
80
|
+
this.indicatorContainer[0].appendChild(indicator);
|
81
|
+
this.indicators.push(indicator);
|
82
|
+
}
|
83
|
+
},
|
84
|
+
|
85
|
+
setActiveIndicator: function (index) {
|
86
|
+
if (this.indicators) {
|
87
|
+
if (this.activeIndicator) {
|
88
|
+
this.activeIndicator
|
89
|
+
.removeClass(this.options.activeIndicatorClass);
|
90
|
+
}
|
91
|
+
this.activeIndicator = $(this.indicators[index]);
|
92
|
+
this.activeIndicator
|
93
|
+
.addClass(this.options.activeIndicatorClass);
|
94
|
+
}
|
95
|
+
},
|
96
|
+
|
97
|
+
initSlides: function (reload) {
|
98
|
+
if (!reload) {
|
99
|
+
this.indicatorContainer = this.container.find(
|
100
|
+
this.options.indicatorContainer
|
101
|
+
);
|
102
|
+
if (this.indicatorContainer.length) {
|
103
|
+
this.indicatorPrototype = document.createElement('li');
|
104
|
+
this.indicators = this.indicatorContainer[0].children;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
initSlides.call(this, reload);
|
108
|
+
},
|
109
|
+
|
110
|
+
addSlide: function (index) {
|
111
|
+
addSlide.call(this, index);
|
112
|
+
this.addIndicator(index);
|
113
|
+
},
|
114
|
+
|
115
|
+
resetSlides: function () {
|
116
|
+
resetSlides.call(this);
|
117
|
+
this.indicatorContainer.empty();
|
118
|
+
this.indicators = [];
|
119
|
+
},
|
120
|
+
|
121
|
+
handleClick: function (event) {
|
122
|
+
var target = event.target || event.srcElement,
|
123
|
+
parent = target.parentNode;
|
124
|
+
if (parent === this.indicatorContainer[0]) {
|
125
|
+
// Click on indicator element
|
126
|
+
this.preventDefault(event);
|
127
|
+
this.slide(this.getNodeIndex(target));
|
128
|
+
} else if (parent.parentNode === this.indicatorContainer[0]) {
|
129
|
+
// Click on indicator child element
|
130
|
+
this.preventDefault(event);
|
131
|
+
this.slide(this.getNodeIndex(parent));
|
132
|
+
} else {
|
133
|
+
return handleClick.call(this, event);
|
134
|
+
}
|
135
|
+
},
|
136
|
+
|
137
|
+
handleSlide: function (index) {
|
138
|
+
handleSlide.call(this, index);
|
139
|
+
this.setActiveIndicator(index);
|
140
|
+
},
|
141
|
+
|
142
|
+
close: function () {
|
143
|
+
if (this.activeIndicator) {
|
144
|
+
this.activeIndicator
|
145
|
+
.removeClass(this.options.activeIndicatorClass);
|
146
|
+
}
|
147
|
+
close.call(this);
|
148
|
+
}
|
149
|
+
|
150
|
+
});
|
151
|
+
|
152
|
+
return Gallery;
|
153
|
+
}));
|
@@ -0,0 +1,156 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Video Factory JS 1.0.0
|
3
|
+
* https://github.com/blueimp/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 define, window, document */
|
13
|
+
|
14
|
+
(function (factory) {
|
15
|
+
'use strict';
|
16
|
+
if (typeof define === 'function' && define.amd) {
|
17
|
+
// Register as an anonymous AMD module:
|
18
|
+
define([
|
19
|
+
'./blueimp-helper',
|
20
|
+
'./blueimp-gallery'
|
21
|
+
], factory);
|
22
|
+
} else {
|
23
|
+
// Browser globals:
|
24
|
+
factory(
|
25
|
+
window.blueimp.helper || window.jQuery,
|
26
|
+
window.blueimp.Gallery
|
27
|
+
);
|
28
|
+
}
|
29
|
+
}(function ($, Gallery) {
|
30
|
+
'use strict';
|
31
|
+
|
32
|
+
$.extend(Gallery.prototype.options, {
|
33
|
+
// The class for video content elements:
|
34
|
+
videoContentClass: 'video-content',
|
35
|
+
// The class for video when it is loading:
|
36
|
+
videoLoadingClass: 'video-loading',
|
37
|
+
// The class for video when it is playing:
|
38
|
+
videoPlayingClass: 'video-playing',
|
39
|
+
// The list object property (or data attribute) for the video poster URL:
|
40
|
+
videoPosterProperty: 'poster',
|
41
|
+
// The list object property (or data attribute) for the video sources array:
|
42
|
+
videoSourcesProperty: 'sources'
|
43
|
+
});
|
44
|
+
|
45
|
+
Gallery.prototype.videoFactory = function (obj, callback) {
|
46
|
+
var that = this,
|
47
|
+
options = this.options,
|
48
|
+
videoContainerNode = this.elementPrototype.cloneNode(false),
|
49
|
+
videoContainer = $(videoContainerNode),
|
50
|
+
errorArgs = [{
|
51
|
+
type: 'error',
|
52
|
+
target: videoContainerNode
|
53
|
+
}],
|
54
|
+
video = document.createElement('video'),
|
55
|
+
url = this.getItemProperty(obj, options.urlProperty),
|
56
|
+
type = this.getItemProperty(obj, options.typeProperty),
|
57
|
+
title = this.getItemProperty(obj, options.titleProperty),
|
58
|
+
posterUrl = this.getItemProperty(obj, options.videoPosterProperty),
|
59
|
+
posterImage,
|
60
|
+
sources = this.getItemProperty(
|
61
|
+
obj,
|
62
|
+
options.videoSourcesProperty
|
63
|
+
),
|
64
|
+
source,
|
65
|
+
playMediaControl,
|
66
|
+
isLoading,
|
67
|
+
hasControls;
|
68
|
+
videoContainer.addClass(options.videoContentClass);
|
69
|
+
if (title) {
|
70
|
+
videoContainerNode.title = title;
|
71
|
+
}
|
72
|
+
if (video.canPlayType) {
|
73
|
+
if (url && type && video.canPlayType(type)) {
|
74
|
+
video.src = url;
|
75
|
+
} else if (sources) {
|
76
|
+
if (typeof sources === 'string') {
|
77
|
+
sources = $.parseJSON(sources);
|
78
|
+
}
|
79
|
+
while (sources && sources.length) {
|
80
|
+
source = sources.shift();
|
81
|
+
url = this.getItemProperty(source, options.urlProperty);
|
82
|
+
type = this.getItemProperty(source, options.typeProperty);
|
83
|
+
if (url && type && video.canPlayType(type)) {
|
84
|
+
video.src = url;
|
85
|
+
break;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
if (posterUrl) {
|
91
|
+
video.setAttribute('poster', posterUrl);
|
92
|
+
posterImage = this.imagePrototype.cloneNode(false);
|
93
|
+
$(posterImage).addClass(options.toggleClass);
|
94
|
+
posterImage.src = posterUrl;
|
95
|
+
posterImage.draggable = false;
|
96
|
+
videoContainerNode.appendChild(posterImage);
|
97
|
+
}
|
98
|
+
playMediaControl = document.createElement('a');
|
99
|
+
playMediaControl.setAttribute('target', '_blank');
|
100
|
+
playMediaControl.setAttribute('download', title);
|
101
|
+
playMediaControl.href = url;
|
102
|
+
if (video.src) {
|
103
|
+
video.controls = true;
|
104
|
+
$(video)
|
105
|
+
.on('error', function () {
|
106
|
+
that.setTimeout(callback, errorArgs);
|
107
|
+
})
|
108
|
+
.on('pause', function () {
|
109
|
+
isLoading = false;
|
110
|
+
videoContainer
|
111
|
+
.removeClass(that.options.videoLoadingClass)
|
112
|
+
.removeClass(that.options.videoPlayingClass);
|
113
|
+
if (hasControls) {
|
114
|
+
that.container.addClass(that.options.controlsClass);
|
115
|
+
}
|
116
|
+
if (that.interval) {
|
117
|
+
that.play();
|
118
|
+
}
|
119
|
+
})
|
120
|
+
.on('playing', function () {
|
121
|
+
isLoading = false;
|
122
|
+
videoContainer
|
123
|
+
.removeClass(that.options.videoLoadingClass)
|
124
|
+
.addClass(that.options.videoPlayingClass);
|
125
|
+
if (that.container.hasClass(that.options.controlsClass)) {
|
126
|
+
hasControls = true;
|
127
|
+
that.container.removeClass(that.options.controlsClass);
|
128
|
+
} else {
|
129
|
+
hasControls = false;
|
130
|
+
}
|
131
|
+
})
|
132
|
+
.on('play', function () {
|
133
|
+
window.clearTimeout(that.timeout);
|
134
|
+
isLoading = true;
|
135
|
+
videoContainer.addClass(that.options.videoLoadingClass);
|
136
|
+
});
|
137
|
+
$(playMediaControl).on('click', function (event) {
|
138
|
+
event.preventDefault();
|
139
|
+
if (isLoading) {
|
140
|
+
video.pause();
|
141
|
+
} else {
|
142
|
+
video.play();
|
143
|
+
}
|
144
|
+
});
|
145
|
+
videoContainerNode.appendChild(video);
|
146
|
+
}
|
147
|
+
videoContainerNode.appendChild(playMediaControl);
|
148
|
+
this.setTimeout(callback, [{
|
149
|
+
type: 'load',
|
150
|
+
target: videoContainerNode
|
151
|
+
}]);
|
152
|
+
return videoContainerNode;
|
153
|
+
};
|
154
|
+
|
155
|
+
return Gallery;
|
156
|
+
}));
|