Bootstrap-Image-Gallery-rails 1.0.0.3.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +123 -0
- data/lib/Bootstrap/Image/Gallery/rails.rb +12 -0
- data/lib/Bootstrap/Image/Gallery/rails/version.rb +9 -0
- data/vendor/assets/javascripts/blueimp-gallery-fullscreen.js +90 -0
- data/vendor/assets/javascripts/blueimp-gallery-indicator.js +153 -0
- data/vendor/assets/javascripts/blueimp-gallery-video.js +171 -0
- data/vendor/assets/javascripts/blueimp-gallery-vimeo.js +215 -0
- data/vendor/assets/javascripts/blueimp-gallery-youtube.js +229 -0
- data/vendor/assets/javascripts/blueimp-gallery.js +1341 -0
- data/vendor/assets/javascripts/blueimp-helper.js +191 -0
- data/vendor/assets/javascripts/bootstrap-image-gallery.js +88 -0
- data/vendor/assets/javascripts/jquery.blueimp-gallery.js +84 -0
- data/vendor/assets/stylesheets/blueimp-gallery-indicator.css +71 -0
- data/vendor/assets/stylesheets/blueimp-gallery-video.css +87 -0
- data/vendor/assets/stylesheets/blueimp-gallery.css +226 -0
- data/vendor/assets/stylesheets/bootstrap-image-gallery.css +87 -0
- metadata +89 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: fec5ae06e0a86ee24bc15acc8f52e78875743684
|
4
|
+
data.tar.gz: 645e701a154c2f137fec3dbe92e9915bd75fd1d3
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: da7b5635812d3f79eb803d687820d73dc044ec5f40980150b028884dabbf653d3827fe7f1964afb1fc59c95c4d76d0f9a4b5c3cfd387ef497bb8987d2a66123b
|
7
|
+
data.tar.gz: c63d9445808f4dd954259c6df65814ac598b09f2249d2dcb1ad26489fd154a8723a0570f4dc32262f63cf9e999647383e51ec630dea4e200f884bd1aa658eb62
|
data/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2014 dogwood008
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,123 @@
|
|
1
|
+
# Bootstrap-Image-Gallery-Rails
|
2
|
+
This is a Ruby on Rails gem for [Bootstrap-Image-Gallery](https://github.com/blueimp/Bootstrap-Image-Gallery).
|
3
|
+
|
4
|
+
## Installation
|
5
|
+
|
6
|
+
Add this line to your application's Gemfile:
|
7
|
+
|
8
|
+
gem 'Bootstrap-Image-Gallery-rails', github: 'dogwood008/Bootstrap-Image-Gallery-rails'
|
9
|
+
|
10
|
+
And then execute:
|
11
|
+
|
12
|
+
$ bundle
|
13
|
+
|
14
|
+
Or install it yourself as:
|
15
|
+
|
16
|
+
$ gem install Bootstrap-Image-Gallery-rails
|
17
|
+
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
Add "require" in css/js.
|
22
|
+
|
23
|
+
```
|
24
|
+
CSS:
|
25
|
+
*= require blueimp-gallery
|
26
|
+
*= require bootstrap-image-gallery
|
27
|
+
*= require blueimp-gallery-indicator
|
28
|
+
*= require blueimp-gallery-video
|
29
|
+
|
30
|
+
JS:
|
31
|
+
//= require blueimp-gallery
|
32
|
+
//= require blueimp-gallery-fullscreen
|
33
|
+
//= require blueimp-gallery-indicator
|
34
|
+
//= require blueimp-gallery-video
|
35
|
+
//= require blueimp-gallery-youtube
|
36
|
+
//= require jquery.blueimp-gallery
|
37
|
+
//= require bootstrap-image-galler
|
38
|
+
```
|
39
|
+
|
40
|
+
Do asset compiling.
|
41
|
+
|
42
|
+
```
|
43
|
+
$ rake assets:precompile
|
44
|
+
```
|
45
|
+
|
46
|
+
Add the following HTML snippet with the Gallery widget to the body of your webpage:
|
47
|
+
|
48
|
+
```html
|
49
|
+
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
|
50
|
+
<div id="blueimp-gallery" class="blueimp-gallery">
|
51
|
+
<!-- The container for the modal slides -->
|
52
|
+
<div class="slides"></div>
|
53
|
+
<!-- Controls for the borderless lightbox -->
|
54
|
+
<h3 class="title"></h3>
|
55
|
+
<a class="prev">‹</a>
|
56
|
+
<a class="next">›</a>
|
57
|
+
<a class="close">×</a>
|
58
|
+
<a class="play-pause"></a>
|
59
|
+
<ol class="indicator"></ol>
|
60
|
+
<!-- The modal dialog, which will be used to wrap the lightbox content -->
|
61
|
+
<div class="modal fade">
|
62
|
+
<div class="modal-dialog">
|
63
|
+
<div class="modal-content">
|
64
|
+
<div class="modal-header">
|
65
|
+
<button type="button" class="close" aria-hidden="true">×</button>
|
66
|
+
<h4 class="modal-title"></h4>
|
67
|
+
</div>
|
68
|
+
<div class="modal-body next"></div>
|
69
|
+
<div class="modal-footer">
|
70
|
+
<button type="button" class="btn btn-default pull-left prev">
|
71
|
+
<i class="glyphicon glyphicon-chevron-left"></i>
|
72
|
+
Previous
|
73
|
+
</button>
|
74
|
+
<button type="button" class="btn btn-primary next">
|
75
|
+
Next
|
76
|
+
<i class="glyphicon glyphicon-chevron-right"></i>
|
77
|
+
</button>
|
78
|
+
</div>
|
79
|
+
</div>
|
80
|
+
</div>
|
81
|
+
</div>
|
82
|
+
</div>
|
83
|
+
```
|
84
|
+
|
85
|
+
Create a list of links to image files with the attribute **data-gallery** (optionally with enclosed thumbnails) and add them to the body of your webpage:
|
86
|
+
|
87
|
+
```html
|
88
|
+
<div id="links">
|
89
|
+
<a href="images/banana.jpg" title="Banana" data-gallery>
|
90
|
+
<img src="images/thumbnails/banana.jpg" alt="Banana">
|
91
|
+
</a>
|
92
|
+
<a href="images/apple.jpg" title="Apple" data-gallery>
|
93
|
+
<img src="images/thumbnails/apple.jpg" alt="Apple">
|
94
|
+
</a>
|
95
|
+
<a href="images/orange.jpg" title="Orange" data-gallery>
|
96
|
+
<img src="images/thumbnails/orange.jpg" alt="Orange">
|
97
|
+
</a>
|
98
|
+
</div>
|
99
|
+
```
|
100
|
+
|
101
|
+
|
102
|
+
## Requirements
|
103
|
+
* [jQuery](http://jquery.com/) v. 1.9.0+
|
104
|
+
* [Bootstrap](http://getbootstrap.com/) v. 3.0.0+
|
105
|
+
|
106
|
+
## License
|
107
|
+
Released under the [MIT license](http://www.opensource.org/licenses/MIT).
|
108
|
+
|
109
|
+
## Thanks
|
110
|
+
* [blueimp](https://github.com/blueimp)
|
111
|
+
* [twbs](https://github.com/twbs)
|
112
|
+
|
113
|
+
## Contributing
|
114
|
+
|
115
|
+
1. Fork it ( https://github.com/[my-github-username]/Bootstrap-Image-Gallery-rails/fork )
|
116
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
117
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
118
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
119
|
+
5. Create a new Pull Request
|
120
|
+
|
121
|
+
=======
|
122
|
+
|
123
|
+
Bootstrap-Image-Gallery-rails
|
@@ -0,0 +1,90 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Fullscreen JS 1.2.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
|
+
document.msFullscreenElement;
|
47
|
+
},
|
48
|
+
|
49
|
+
requestFullScreen: function (element) {
|
50
|
+
if (element.requestFullscreen) {
|
51
|
+
element.requestFullscreen();
|
52
|
+
} else if (element.webkitRequestFullscreen) {
|
53
|
+
element.webkitRequestFullscreen();
|
54
|
+
} else if (element.mozRequestFullScreen) {
|
55
|
+
element.mozRequestFullScreen();
|
56
|
+
} else if (element.msRequestFullscreen) {
|
57
|
+
element.msRequestFullscreen();
|
58
|
+
}
|
59
|
+
},
|
60
|
+
|
61
|
+
exitFullScreen: function () {
|
62
|
+
if (document.exitFullscreen) {
|
63
|
+
document.exitFullscreen();
|
64
|
+
} else if (document.webkitCancelFullScreen) {
|
65
|
+
document.webkitCancelFullScreen();
|
66
|
+
} else if (document.mozCancelFullScreen) {
|
67
|
+
document.mozCancelFullScreen();
|
68
|
+
} else if (document.msExitFullscreen) {
|
69
|
+
document.msExitFullscreen();
|
70
|
+
}
|
71
|
+
},
|
72
|
+
|
73
|
+
initialize: function () {
|
74
|
+
initialize.call(this);
|
75
|
+
if (this.options.fullScreen && !this.getFullScreenElement()) {
|
76
|
+
this.requestFullScreen(this.container[0]);
|
77
|
+
}
|
78
|
+
},
|
79
|
+
|
80
|
+
close: function () {
|
81
|
+
if (this.getFullScreenElement() === this.container[0]) {
|
82
|
+
this.exitFullScreen();
|
83
|
+
}
|
84
|
+
close.call(this);
|
85
|
+
}
|
86
|
+
|
87
|
+
});
|
88
|
+
|
89
|
+
return Gallery;
|
90
|
+
}));
|
@@ -0,0 +1,153 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Indicator JS 1.1.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
|
+
handleClose = Gallery.prototype.handleClose;
|
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
|
+
handleClose: function () {
|
143
|
+
if (this.activeIndicator) {
|
144
|
+
this.activeIndicator
|
145
|
+
.removeClass(this.options.activeIndicatorClass);
|
146
|
+
}
|
147
|
+
handleClose.call(this);
|
148
|
+
}
|
149
|
+
|
150
|
+
});
|
151
|
+
|
152
|
+
return Gallery;
|
153
|
+
}));
|
@@ -0,0 +1,171 @@
|
|
1
|
+
/*
|
2
|
+
* blueimp Gallery Video Factory JS 1.1.1
|
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
|
+
var handleSlide = Gallery.prototype.handleSlide;
|
46
|
+
|
47
|
+
$.extend(Gallery.prototype, {
|
48
|
+
|
49
|
+
handleSlide: function (index) {
|
50
|
+
handleSlide.call(this, index);
|
51
|
+
if (this.playingVideo) {
|
52
|
+
this.playingVideo.pause();
|
53
|
+
}
|
54
|
+
},
|
55
|
+
|
56
|
+
videoFactory: function (obj, callback, videoInterface) {
|
57
|
+
var that = this,
|
58
|
+
options = this.options,
|
59
|
+
videoContainerNode = this.elementPrototype.cloneNode(false),
|
60
|
+
videoContainer = $(videoContainerNode),
|
61
|
+
errorArgs = [{
|
62
|
+
type: 'error',
|
63
|
+
target: videoContainerNode
|
64
|
+
}],
|
65
|
+
video = videoInterface || document.createElement('video'),
|
66
|
+
url = this.getItemProperty(obj, options.urlProperty),
|
67
|
+
type = this.getItemProperty(obj, options.typeProperty),
|
68
|
+
title = this.getItemProperty(obj, options.titleProperty),
|
69
|
+
posterUrl = this.getItemProperty(obj, options.videoPosterProperty),
|
70
|
+
posterImage,
|
71
|
+
sources = this.getItemProperty(
|
72
|
+
obj,
|
73
|
+
options.videoSourcesProperty
|
74
|
+
),
|
75
|
+
source,
|
76
|
+
playMediaControl,
|
77
|
+
isLoading,
|
78
|
+
hasControls;
|
79
|
+
videoContainer.addClass(options.videoContentClass);
|
80
|
+
if (title) {
|
81
|
+
videoContainerNode.title = title;
|
82
|
+
}
|
83
|
+
if (video.canPlayType) {
|
84
|
+
if (url && type && video.canPlayType(type)) {
|
85
|
+
video.src = url;
|
86
|
+
} else {
|
87
|
+
while (sources && sources.length) {
|
88
|
+
source = sources.shift();
|
89
|
+
url = this.getItemProperty(source, options.urlProperty);
|
90
|
+
type = this.getItemProperty(source, options.typeProperty);
|
91
|
+
if (url && type && video.canPlayType(type)) {
|
92
|
+
video.src = url;
|
93
|
+
break;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
98
|
+
if (posterUrl) {
|
99
|
+
video.poster = posterUrl;
|
100
|
+
posterImage = this.imagePrototype.cloneNode(false);
|
101
|
+
$(posterImage).addClass(options.toggleClass);
|
102
|
+
posterImage.src = posterUrl;
|
103
|
+
posterImage.draggable = false;
|
104
|
+
videoContainerNode.appendChild(posterImage);
|
105
|
+
}
|
106
|
+
playMediaControl = document.createElement('a');
|
107
|
+
playMediaControl.setAttribute('target', '_blank');
|
108
|
+
if (!videoInterface) {
|
109
|
+
playMediaControl.setAttribute('download', title);
|
110
|
+
}
|
111
|
+
playMediaControl.href = url;
|
112
|
+
if (video.src) {
|
113
|
+
video.controls = true;
|
114
|
+
(videoInterface || $(video))
|
115
|
+
.on('error', function () {
|
116
|
+
that.setTimeout(callback, errorArgs);
|
117
|
+
})
|
118
|
+
.on('pause', function () {
|
119
|
+
isLoading = false;
|
120
|
+
videoContainer
|
121
|
+
.removeClass(that.options.videoLoadingClass)
|
122
|
+
.removeClass(that.options.videoPlayingClass);
|
123
|
+
if (hasControls) {
|
124
|
+
that.container.addClass(that.options.controlsClass);
|
125
|
+
}
|
126
|
+
delete that.playingVideo;
|
127
|
+
if (that.interval) {
|
128
|
+
that.play();
|
129
|
+
}
|
130
|
+
})
|
131
|
+
.on('playing', function () {
|
132
|
+
isLoading = false;
|
133
|
+
videoContainer
|
134
|
+
.removeClass(that.options.videoLoadingClass)
|
135
|
+
.addClass(that.options.videoPlayingClass);
|
136
|
+
if (that.container.hasClass(that.options.controlsClass)) {
|
137
|
+
hasControls = true;
|
138
|
+
that.container.removeClass(that.options.controlsClass);
|
139
|
+
} else {
|
140
|
+
hasControls = false;
|
141
|
+
}
|
142
|
+
})
|
143
|
+
.on('play', function () {
|
144
|
+
window.clearTimeout(that.timeout);
|
145
|
+
isLoading = true;
|
146
|
+
videoContainer.addClass(that.options.videoLoadingClass);
|
147
|
+
that.playingVideo = video;
|
148
|
+
});
|
149
|
+
$(playMediaControl).on('click', function (event) {
|
150
|
+
that.preventDefault(event);
|
151
|
+
if (isLoading) {
|
152
|
+
video.pause();
|
153
|
+
} else {
|
154
|
+
video.play();
|
155
|
+
}
|
156
|
+
});
|
157
|
+
videoContainerNode.appendChild(
|
158
|
+
(videoInterface && videoInterface.element) || video
|
159
|
+
);
|
160
|
+
}
|
161
|
+
videoContainerNode.appendChild(playMediaControl);
|
162
|
+
this.setTimeout(callback, [{
|
163
|
+
type: 'load',
|
164
|
+
target: videoContainerNode
|
165
|
+
}]);
|
166
|
+
return videoContainerNode;
|
167
|
+
}
|
168
|
+
});
|
169
|
+
|
170
|
+
return Gallery;
|
171
|
+
}));
|