light_gallery_rails 1.2.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +156 -0
- data/Rakefile +34 -0
- data/lib/light_gallery_rails.rb +4 -0
- data/lib/light_gallery_rails/version.rb +3 -0
- data/vendor/assets/fonts/lg.eot +0 -0
- data/vendor/assets/fonts/lg.svg +41 -0
- data/vendor/assets/fonts/lg.ttf +0 -0
- data/vendor/assets/fonts/lg.woff +0 -0
- data/vendor/assets/images/light-gallery/loading.gif +0 -0
- data/vendor/assets/images/light-gallery/video-play.png +0 -0
- data/vendor/assets/images/light-gallery/vimeo-play.png +0 -0
- data/vendor/assets/images/light-gallery/youtube-play.png +0 -0
- data/vendor/assets/javascripts/light-gallery.js +2907 -0
- data/vendor/assets/stylesheets/light-gallery.css +1617 -0
- metadata +61 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 40a41a2e140b57d39d168a5a9aa8737e5957ac79
|
4
|
+
data.tar.gz: b103ba0e452ed9102e50f976670b5205308aa2db
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 5cd01425f2df8a5471e8ae3b732d9e15c638a1a6ef5b247816f734974913db2571b16a52998760d5cc8e425b78ea0d53349c4069e357ddcb483484e4310cc7a1
|
7
|
+
data.tar.gz: a64bc7be36bb796ffc2b1705c3f3e62924e7e3e2a64099b14c04dc0b216f0dff150b09a806bbbda2e40fc526bfe8f5527097ae4f0212d5e1bb18536e0d7b560b
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2015 Nicolaas
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,156 @@
|
|
1
|
+
# jQuery lightGallery Rails
|
2
|
+
Ruby on Rails wrapper for [jQuery lightGallery](https://github.com/sachinchoolur/lightGallery)
|
3
|
+
|
4
|
+
Description
|
5
|
+
----------------
|
6
|
+
JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video galleries
|
7
|
+
|
8
|
+
How to use lightGallery?
|
9
|
+
--------------------
|
10
|
+
|
11
|
+
## Installation
|
12
|
+
|
13
|
+
Add the following code to your Gemfile:
|
14
|
+
|
15
|
+
```ruby
|
16
|
+
gem 'light_gallery_rails', git: 'https://github.com/lucmousinho/light-gallery-rails.git'
|
17
|
+
```
|
18
|
+
|
19
|
+
Include the following code into your `application.js`
|
20
|
+
|
21
|
+
```javascript
|
22
|
+
//= require light-gallery
|
23
|
+
```
|
24
|
+
|
25
|
+
Include the following code into your `application.css`
|
26
|
+
|
27
|
+
```css
|
28
|
+
*= require light-gallery
|
29
|
+
```
|
30
|
+
|
31
|
+
### HTML Structure ###
|
32
|
+
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
|
33
|
+
```html
|
34
|
+
<ul id="lightGallery">
|
35
|
+
<li data-src="img/img1.jpg">
|
36
|
+
<img src="img/thumb1.jpg" />
|
37
|
+
</li>
|
38
|
+
<li data-src="img/img2.jpg">
|
39
|
+
<img src="img/thumb2.jpg" />
|
40
|
+
</li>
|
41
|
+
...
|
42
|
+
</ul>
|
43
|
+
```
|
44
|
+
### Data attributes ###
|
45
|
+
```html
|
46
|
+
<!-- the image/video source for mobile devices -->
|
47
|
+
<li data-responsive-src="mobile1.jpg" > </li>
|
48
|
+
<!-- the large version of your image/video -->
|
49
|
+
<li data-src="img1.jpg" > </li>
|
50
|
+
|
51
|
+
<!-- Custom html5 video html (will be inserted same like youtube vimeo videos) -->
|
52
|
+
<li data-html="video html" /> </li>
|
53
|
+
<!-- id or class name of an object(div) which contain your html. -->
|
54
|
+
<li data-html="#inlineHtml" > </li>
|
55
|
+
|
56
|
+
<!-- Custom html (Caption description comments ...) -->
|
57
|
+
<li data-sub-html="<h3>My caption</h3><p>My description..</p>" /> </li>
|
58
|
+
<!-- id or class name of an object(div) which contain your html. -->
|
59
|
+
<li data-sub-html="#inlineSubHtml" > </li>
|
60
|
+
|
61
|
+
<!-- If true your src will be displayed in an iframe.. -->
|
62
|
+
<li data-iframe="true" data-src="http://www.w3schools.com/" > </li>
|
63
|
+
```
|
64
|
+
### Call lightGallery! ###
|
65
|
+
```html
|
66
|
+
<script type="text/javascript">
|
67
|
+
$(document).ready(function() {
|
68
|
+
$("#lightGallery").lightGallery();
|
69
|
+
});
|
70
|
+
</script>
|
71
|
+
```
|
72
|
+
### Play with settings ###
|
73
|
+
```html
|
74
|
+
<script type="text/javascript">
|
75
|
+
$(document).ready(function() {
|
76
|
+
$("#lightGallery").lightGallery({
|
77
|
+
|
78
|
+
mode: 'slide',
|
79
|
+
useCSS: true,
|
80
|
+
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
|
81
|
+
easing: 'linear', //'for jquery animation',//
|
82
|
+
speed: 600,
|
83
|
+
addClass: '',
|
84
|
+
|
85
|
+
closable: true,
|
86
|
+
loop: false,
|
87
|
+
auto: false,
|
88
|
+
pause: 4000,
|
89
|
+
escKey: true,
|
90
|
+
controls: true,
|
91
|
+
hideControlOnEnd: false,
|
92
|
+
|
93
|
+
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
|
94
|
+
showAfterLoad: true,
|
95
|
+
selector: null,
|
96
|
+
index: false,
|
97
|
+
|
98
|
+
lang: {
|
99
|
+
allPhotos: 'All photos'
|
100
|
+
},
|
101
|
+
counter: false,
|
102
|
+
|
103
|
+
exThumbImage: false,
|
104
|
+
thumbnail: true,
|
105
|
+
showThumbByDefault:false,
|
106
|
+
animateThumb: true,
|
107
|
+
currentPagerPosition: 'middle',
|
108
|
+
thumbWidth: 100,
|
109
|
+
thumbMargin: 5,
|
110
|
+
|
111
|
+
|
112
|
+
mobileSrc: false,
|
113
|
+
mobileSrcMaxWidth: 640,
|
114
|
+
swipeThreshold: 50,
|
115
|
+
enableTouch: true,
|
116
|
+
enableDrag: true,
|
117
|
+
|
118
|
+
vimeoColor: 'CCCCCC',
|
119
|
+
videoAutoplay: true,
|
120
|
+
videoMaxWidth: '855px',
|
121
|
+
|
122
|
+
dynamic: false,
|
123
|
+
dynamicEl: [],
|
124
|
+
|
125
|
+
// Callbacks el = current plugin
|
126
|
+
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
|
127
|
+
onSlideBefore : function(el) {}, // Executes immediately before each transition.
|
128
|
+
onSlideAfter : function(el) {}, // Executes immediately after each transition.
|
129
|
+
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
|
130
|
+
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
|
131
|
+
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
|
132
|
+
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
|
133
|
+
|
134
|
+
});
|
135
|
+
});
|
136
|
+
</script>
|
137
|
+
```
|
138
|
+
|
139
|
+
In-depth explanation of settings can be found on a [separate page](http://sachinchoolur.github.io/lightGallery/settings.html).
|
140
|
+
|
141
|
+
### Public methods ###
|
142
|
+
```html
|
143
|
+
<script type="text/javascript">
|
144
|
+
$(document).ready(function() {
|
145
|
+
var gallery = $("#lightGallery").lightGallery();
|
146
|
+
gallery.isActive(); //check active state of lightGallery;
|
147
|
+
gallery.destroy(); //to destroy the plugin on the given element.
|
148
|
+
});
|
149
|
+
</script>
|
150
|
+
```
|
151
|
+
|
152
|
+
Versioning
|
153
|
+
--------------------
|
154
|
+
Version numbers will mirror the corresonding version of the [jQuery lightGallery](https://github.com/sachinchoolur/lightGallery) release used within this wrapper.
|
155
|
+
|
156
|
+
.
|
data/Rakefile
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'LightGalleryRails'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.rdoc')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
Bundler::GemHelper.install_tasks
|
23
|
+
|
24
|
+
require 'rake/testtask'
|
25
|
+
|
26
|
+
Rake::TestTask.new(:test) do |t|
|
27
|
+
t.libs << 'lib'
|
28
|
+
t.libs << 'test'
|
29
|
+
t.pattern = 'test/**/*_test.rb'
|
30
|
+
t.verbose = false
|
31
|
+
end
|
32
|
+
|
33
|
+
|
34
|
+
task default: :test
|
Binary file
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<?xml version="1.0" standalone="no"?>
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
4
|
+
<metadata>
|
5
|
+
<json>
|
6
|
+
<![CDATA[
|
7
|
+
{
|
8
|
+
"fontFamily": "lg",
|
9
|
+
"majorVersion": 1,
|
10
|
+
"minorVersion": 0,
|
11
|
+
"fontURL": "https://github.com/sachinchoolur/lightGallery",
|
12
|
+
"copyright": "sachin",
|
13
|
+
"license": "MLT",
|
14
|
+
"licenseURL": "http://opensource.org/licenses/MIT",
|
15
|
+
"version": "Version 1.0",
|
16
|
+
"fontId": "lg",
|
17
|
+
"psName": "lg",
|
18
|
+
"subFamily": "Regular",
|
19
|
+
"fullName": "lg",
|
20
|
+
"description": "Font generated by IcoMoon."
|
21
|
+
}
|
22
|
+
]]>
|
23
|
+
</json>
|
24
|
+
</metadata>
|
25
|
+
<defs>
|
26
|
+
<font id="lg" horiz-adv-x="1024">
|
27
|
+
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
28
|
+
<missing-glyph horiz-adv-x="1024" />
|
29
|
+
<glyph unicode=" " horiz-adv-x="512" d="" />
|
30
|
+
<glyph unicode="" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
|
31
|
+
<glyph unicode="" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
|
32
|
+
<glyph unicode="" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
|
33
|
+
<glyph unicode="" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
|
34
|
+
<glyph unicode="" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
|
35
|
+
<glyph unicode="" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
|
36
|
+
<glyph unicode="" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
|
37
|
+
<glyph unicode="" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
|
38
|
+
<glyph unicode="" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
|
39
|
+
<glyph unicode="" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
|
40
|
+
<glyph unicode="" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
|
41
|
+
</font></defs></svg>
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,2907 @@
|
|
1
|
+
/*! lightgallery - v1.2.14 - 2016-01-20
|
2
|
+
* http://sachinchoolur.github.io/lightGallery/
|
3
|
+
* Copyright (c) 2016 Sachin N; Licensed Apache 2.0 */
|
4
|
+
(function($, window, document, undefined) {
|
5
|
+
|
6
|
+
'use strict';
|
7
|
+
|
8
|
+
var defaults = {
|
9
|
+
|
10
|
+
mode: 'lg-slide',
|
11
|
+
|
12
|
+
// Ex : 'ease'
|
13
|
+
cssEasing: 'ease',
|
14
|
+
|
15
|
+
//'for jquery animation'
|
16
|
+
easing: 'linear',
|
17
|
+
speed: 600,
|
18
|
+
height: '100%',
|
19
|
+
width: '100%',
|
20
|
+
addClass: '',
|
21
|
+
startClass: 'lg-start-zoom',
|
22
|
+
backdropDuration: 150,
|
23
|
+
hideBarsDelay: 6000,
|
24
|
+
|
25
|
+
useLeft: false,
|
26
|
+
|
27
|
+
closable: true,
|
28
|
+
loop: true,
|
29
|
+
escKey: true,
|
30
|
+
keyPress: true,
|
31
|
+
controls: true,
|
32
|
+
slideEndAnimatoin: true,
|
33
|
+
hideControlOnEnd: false,
|
34
|
+
mousewheel: true,
|
35
|
+
|
36
|
+
// .lg-item || '.lg-sub-html'
|
37
|
+
appendSubHtmlTo: '.lg-sub-html',
|
38
|
+
|
39
|
+
/**
|
40
|
+
* @desc number of preload slides
|
41
|
+
* will exicute only after the current slide is fully loaded.
|
42
|
+
*
|
43
|
+
* @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
|
44
|
+
* slide will be loaded in the background after the 4th slide is fully loaded..
|
45
|
+
* if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
|
46
|
+
*
|
47
|
+
*/
|
48
|
+
preload: 1,
|
49
|
+
showAfterLoad: true,
|
50
|
+
selector: '',
|
51
|
+
selectWithin: '',
|
52
|
+
nextHtml: '',
|
53
|
+
prevHtml: '',
|
54
|
+
|
55
|
+
// 0, 1
|
56
|
+
index: false,
|
57
|
+
|
58
|
+
iframeMaxWidth: '100%',
|
59
|
+
|
60
|
+
download: true,
|
61
|
+
counter: true,
|
62
|
+
appendCounterTo: '.lg-toolbar',
|
63
|
+
|
64
|
+
swipeThreshold: 50,
|
65
|
+
enableSwipe: true,
|
66
|
+
enableDrag: true,
|
67
|
+
|
68
|
+
dynamic: false,
|
69
|
+
dynamicEl: [],
|
70
|
+
galleryId: 1
|
71
|
+
};
|
72
|
+
|
73
|
+
function Plugin(element, options) {
|
74
|
+
|
75
|
+
// Current lightGallery element
|
76
|
+
this.el = element;
|
77
|
+
|
78
|
+
// Current jquery element
|
79
|
+
this.$el = $(element);
|
80
|
+
|
81
|
+
// lightGallery settings
|
82
|
+
this.s = $.extend({}, defaults, options);
|
83
|
+
|
84
|
+
// When using dynamic mode, ensure dynamicEl is an array
|
85
|
+
if (this.s.dynamic && this.s.dynamicEl !== 'undefined' && this.s.dynamicEl.constructor === Array && !this.s.dynamicEl.length) {
|
86
|
+
throw ('When using dynamic mode, you must also define dynamicEl as an Array.');
|
87
|
+
}
|
88
|
+
|
89
|
+
// lightGallery modules
|
90
|
+
this.modules = {};
|
91
|
+
|
92
|
+
// false when lightgallery complete first slide;
|
93
|
+
this.lGalleryOn = false;
|
94
|
+
|
95
|
+
this.lgBusy = false;
|
96
|
+
|
97
|
+
// Timeout function for hiding controls;
|
98
|
+
this.hideBartimeout = false;
|
99
|
+
|
100
|
+
// To determine browser supports for touch events;
|
101
|
+
this.isTouch = ('ontouchstart' in document.documentElement);
|
102
|
+
|
103
|
+
// Disable hideControlOnEnd if sildeEndAnimation is true
|
104
|
+
if (this.s.slideEndAnimatoin) {
|
105
|
+
this.s.hideControlOnEnd = false;
|
106
|
+
}
|
107
|
+
|
108
|
+
// Gallery items
|
109
|
+
if (this.s.dynamic) {
|
110
|
+
this.$items = this.s.dynamicEl;
|
111
|
+
} else {
|
112
|
+
if (this.s.selector === 'this') {
|
113
|
+
this.$items = this.$el;
|
114
|
+
} else if (this.s.selector !== '') {
|
115
|
+
if (this.s.selectWithin) {
|
116
|
+
this.$items = $(this.s.selectWithin).find(this.s.selector);
|
117
|
+
} else {
|
118
|
+
this.$items = this.$el.find($(this.s.selector));
|
119
|
+
}
|
120
|
+
} else {
|
121
|
+
this.$items = this.$el.children();
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
// .lg-item
|
126
|
+
this.$slide = '';
|
127
|
+
|
128
|
+
// .lg-outer
|
129
|
+
this.$outer = '';
|
130
|
+
|
131
|
+
this.init();
|
132
|
+
|
133
|
+
return this;
|
134
|
+
}
|
135
|
+
|
136
|
+
Plugin.prototype.init = function() {
|
137
|
+
|
138
|
+
var _this = this;
|
139
|
+
|
140
|
+
// s.preload should not be more than $item.length
|
141
|
+
if (_this.s.preload > _this.$items.length) {
|
142
|
+
_this.s.preload = _this.$items.length;
|
143
|
+
}
|
144
|
+
|
145
|
+
// if dynamic option is enabled execute immediately
|
146
|
+
var _hash = window.location.hash;
|
147
|
+
if (_hash.indexOf('lg=' + this.s.galleryId) > 0) {
|
148
|
+
|
149
|
+
_this.index = parseInt(_hash.split('&slide=')[1], 10);
|
150
|
+
|
151
|
+
$('body').addClass('lg-from-hash');
|
152
|
+
if (!$('body').hasClass('lg-on')) {
|
153
|
+
setTimeout(function() {
|
154
|
+
_this.build(_this.index);
|
155
|
+
$('body').addClass('lg-on');
|
156
|
+
});
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
if (_this.s.dynamic) {
|
161
|
+
|
162
|
+
_this.$el.trigger('onBeforeOpen.lg');
|
163
|
+
|
164
|
+
_this.index = _this.s.index || 0;
|
165
|
+
|
166
|
+
// prevent accidental double execution
|
167
|
+
if (!$('body').hasClass('lg-on')) {
|
168
|
+
setTimeout(function() {
|
169
|
+
_this.build(_this.index);
|
170
|
+
$('body').addClass('lg-on');
|
171
|
+
});
|
172
|
+
}
|
173
|
+
} else {
|
174
|
+
|
175
|
+
// Using different namespace for click because click event should not unbind if selector is same object('this')
|
176
|
+
_this.$items.on('click.lgcustom', function(event) {
|
177
|
+
|
178
|
+
// For IE8
|
179
|
+
try {
|
180
|
+
event.preventDefault();
|
181
|
+
event.preventDefault();
|
182
|
+
} catch (er) {
|
183
|
+
event.returnValue = false;
|
184
|
+
}
|
185
|
+
|
186
|
+
_this.$el.trigger('onBeforeOpen.lg');
|
187
|
+
|
188
|
+
_this.index = _this.s.index || _this.$items.index(this);
|
189
|
+
|
190
|
+
// prevent accidental double execution
|
191
|
+
if (!$('body').hasClass('lg-on')) {
|
192
|
+
_this.build(_this.index);
|
193
|
+
$('body').addClass('lg-on');
|
194
|
+
}
|
195
|
+
});
|
196
|
+
}
|
197
|
+
|
198
|
+
};
|
199
|
+
|
200
|
+
Plugin.prototype.build = function(index) {
|
201
|
+
|
202
|
+
var _this = this;
|
203
|
+
|
204
|
+
_this.structure();
|
205
|
+
|
206
|
+
// module constructor
|
207
|
+
$.each($.fn.lightGallery.modules, function(key) {
|
208
|
+
_this.modules[key] = new $.fn.lightGallery.modules[key](_this.el);
|
209
|
+
});
|
210
|
+
|
211
|
+
// initiate slide function
|
212
|
+
_this.slide(index, false, false);
|
213
|
+
|
214
|
+
if (_this.s.keyPress) {
|
215
|
+
_this.keyPress();
|
216
|
+
}
|
217
|
+
|
218
|
+
if (_this.$items.length > 1) {
|
219
|
+
|
220
|
+
_this.arrow();
|
221
|
+
|
222
|
+
setTimeout(function() {
|
223
|
+
_this.enableDrag();
|
224
|
+
_this.enableSwipe();
|
225
|
+
}, 50);
|
226
|
+
|
227
|
+
if (_this.s.mousewheel) {
|
228
|
+
_this.mousewheel();
|
229
|
+
}
|
230
|
+
}
|
231
|
+
|
232
|
+
_this.counter();
|
233
|
+
|
234
|
+
_this.closeGallery();
|
235
|
+
|
236
|
+
_this.$el.trigger('onAfterOpen.lg');
|
237
|
+
|
238
|
+
// Hide controllers if mouse doesn't move for some period
|
239
|
+
_this.$outer.on('mousemove.lg click.lg touchstart.lg', function() {
|
240
|
+
|
241
|
+
_this.$outer.removeClass('lg-hide-items');
|
242
|
+
|
243
|
+
clearTimeout(_this.hideBartimeout);
|
244
|
+
|
245
|
+
// Timeout will be cleared on each slide movement also
|
246
|
+
_this.hideBartimeout = setTimeout(function() {
|
247
|
+
_this.$outer.addClass('lg-hide-items');
|
248
|
+
}, _this.s.hideBarsDelay);
|
249
|
+
|
250
|
+
});
|
251
|
+
|
252
|
+
};
|
253
|
+
|
254
|
+
Plugin.prototype.structure = function() {
|
255
|
+
var list = '';
|
256
|
+
var controls = '';
|
257
|
+
var i = 0;
|
258
|
+
var subHtmlCont = '';
|
259
|
+
var template;
|
260
|
+
var _this = this;
|
261
|
+
|
262
|
+
$('body').append('<div class="lg-backdrop"></div>');
|
263
|
+
$('.lg-backdrop').css('transition-duration', this.s.backdropDuration + 'ms');
|
264
|
+
|
265
|
+
// Create gallery items
|
266
|
+
for (i = 0; i < this.$items.length; i++) {
|
267
|
+
list += '<div class="lg-item"></div>';
|
268
|
+
}
|
269
|
+
|
270
|
+
// Create controlls
|
271
|
+
if (this.s.controls && this.$items.length > 1) {
|
272
|
+
controls = '<div class="lg-actions">' +
|
273
|
+
'<div class="lg-prev lg-icon">' + this.s.prevHtml + '</div>' +
|
274
|
+
'<div class="lg-next lg-icon">' + this.s.nextHtml + '</div>' +
|
275
|
+
'</div>';
|
276
|
+
}
|
277
|
+
|
278
|
+
if (this.s.appendSubHtmlTo === '.lg-sub-html') {
|
279
|
+
subHtmlCont = '<div class="lg-sub-html"></div>';
|
280
|
+
}
|
281
|
+
|
282
|
+
template = '<div class="lg-outer ' + this.s.addClass + ' ' + this.s.startClass + '">' +
|
283
|
+
'<div class="lg" style="width:' + this.s.width + '; height:' + this.s.height + '">' +
|
284
|
+
'<div class="lg-inner">' + list + '</div>' +
|
285
|
+
'<div class="lg-toolbar group">' +
|
286
|
+
'<span class="lg-close lg-icon"></span>' +
|
287
|
+
'</div>' +
|
288
|
+
controls +
|
289
|
+
subHtmlCont +
|
290
|
+
'</div>' +
|
291
|
+
'</div>';
|
292
|
+
|
293
|
+
$('body').append(template);
|
294
|
+
this.$outer = $('.lg-outer');
|
295
|
+
this.$slide = this.$outer.find('.lg-item');
|
296
|
+
|
297
|
+
if (this.s.useLeft) {
|
298
|
+
this.$outer.addClass('lg-use-left');
|
299
|
+
|
300
|
+
// Set mode lg-slide if use left is true;
|
301
|
+
this.s.mode = 'lg-slide';
|
302
|
+
} else {
|
303
|
+
this.$outer.addClass('lg-use-css3');
|
304
|
+
}
|
305
|
+
|
306
|
+
// For fixed height gallery
|
307
|
+
_this.setTop();
|
308
|
+
$(window).on('resize.lg orientationchange.lg', function() {
|
309
|
+
setTimeout(function() {
|
310
|
+
_this.setTop();
|
311
|
+
}, 100);
|
312
|
+
});
|
313
|
+
|
314
|
+
// add class lg-current to remove initial transition
|
315
|
+
this.$slide.eq(this.index).addClass('lg-current');
|
316
|
+
|
317
|
+
// add Class for css support and transition mode
|
318
|
+
if (this.doCss()) {
|
319
|
+
this.$outer.addClass('lg-css3');
|
320
|
+
} else {
|
321
|
+
this.$outer.addClass('lg-css');
|
322
|
+
|
323
|
+
// Set speed 0 because no animation will happen if browser doesn't support css3
|
324
|
+
this.s.speed = 0;
|
325
|
+
}
|
326
|
+
|
327
|
+
this.$outer.addClass(this.s.mode);
|
328
|
+
|
329
|
+
if (this.s.enableDrag && this.$items.length > 1) {
|
330
|
+
this.$outer.addClass('lg-grab');
|
331
|
+
}
|
332
|
+
|
333
|
+
if (this.s.showAfterLoad) {
|
334
|
+
this.$outer.addClass('lg-show-after-load');
|
335
|
+
}
|
336
|
+
|
337
|
+
if (this.doCss()) {
|
338
|
+
var $inner = this.$outer.find('.lg-inner');
|
339
|
+
$inner.css('transition-timing-function', this.s.cssEasing);
|
340
|
+
$inner.css('transition-duration', this.s.speed + 'ms');
|
341
|
+
}
|
342
|
+
|
343
|
+
$('.lg-backdrop').addClass('in');
|
344
|
+
|
345
|
+
setTimeout(function() {
|
346
|
+
_this.$outer.addClass('lg-visible');
|
347
|
+
}, this.s.backdropDuration);
|
348
|
+
|
349
|
+
if (this.s.download) {
|
350
|
+
this.$outer.find('.lg-toolbar').append('<a id="lg-download" target="_blank" download class="lg-download lg-icon"></a>');
|
351
|
+
}
|
352
|
+
|
353
|
+
// Store the current scroll top value to scroll back after closing the gallery..
|
354
|
+
this.prevScrollTop = $(window).scrollTop();
|
355
|
+
|
356
|
+
};
|
357
|
+
|
358
|
+
// For fixed height gallery
|
359
|
+
Plugin.prototype.setTop = function() {
|
360
|
+
if (this.s.height !== '100%') {
|
361
|
+
var wH = $(window).height();
|
362
|
+
var top = (wH - parseInt(this.s.height, 10)) / 2;
|
363
|
+
var $lGallery = this.$outer.find('.lg');
|
364
|
+
if (wH >= parseInt(this.s.height, 10)) {
|
365
|
+
$lGallery.css('top', top + 'px');
|
366
|
+
} else {
|
367
|
+
$lGallery.css('top', '0px');
|
368
|
+
}
|
369
|
+
}
|
370
|
+
};
|
371
|
+
|
372
|
+
// Find css3 support
|
373
|
+
Plugin.prototype.doCss = function() {
|
374
|
+
// check for css animation support
|
375
|
+
var support = function() {
|
376
|
+
var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
|
377
|
+
var root = document.documentElement;
|
378
|
+
var i = 0;
|
379
|
+
for (i = 0; i < transition.length; i++) {
|
380
|
+
if (transition[i] in root.style) {
|
381
|
+
return true;
|
382
|
+
}
|
383
|
+
}
|
384
|
+
};
|
385
|
+
|
386
|
+
if (support()) {
|
387
|
+
return true;
|
388
|
+
}
|
389
|
+
|
390
|
+
return false;
|
391
|
+
};
|
392
|
+
|
393
|
+
/**
|
394
|
+
* @desc Check the given src is video
|
395
|
+
* @param {String} src
|
396
|
+
* @return {Object} video type
|
397
|
+
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
398
|
+
*/
|
399
|
+
Plugin.prototype.isVideo = function(src, index) {
|
400
|
+
|
401
|
+
var html;
|
402
|
+
if (this.s.dynamic) {
|
403
|
+
html = this.s.dynamicEl[index].html;
|
404
|
+
} else {
|
405
|
+
html = this.$items.eq(index).attr('data-html');
|
406
|
+
}
|
407
|
+
|
408
|
+
if (!src && html) {
|
409
|
+
return {
|
410
|
+
html5: true
|
411
|
+
};
|
412
|
+
}
|
413
|
+
|
414
|
+
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);
|
415
|
+
var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
|
416
|
+
var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
|
417
|
+
|
418
|
+
if (youtube) {
|
419
|
+
return {
|
420
|
+
youtube: youtube
|
421
|
+
};
|
422
|
+
} else if (vimeo) {
|
423
|
+
return {
|
424
|
+
vimeo: vimeo
|
425
|
+
};
|
426
|
+
} else if (dailymotion) {
|
427
|
+
return {
|
428
|
+
dailymotion: dailymotion
|
429
|
+
};
|
430
|
+
}
|
431
|
+
};
|
432
|
+
|
433
|
+
/**
|
434
|
+
* @desc Create image counter
|
435
|
+
* Ex: 1/10
|
436
|
+
*/
|
437
|
+
Plugin.prototype.counter = function() {
|
438
|
+
if (this.s.counter) {
|
439
|
+
$(this.s.appendCounterTo).append('<div id="lg-counter"><span id="lg-counter-current">' + (parseInt(this.index, 10) + 1) + '</span> / <span id="lg-counter-all">' + this.$items.length + '</span></div>');
|
440
|
+
}
|
441
|
+
};
|
442
|
+
|
443
|
+
/**
|
444
|
+
* @desc add sub-html into the slide
|
445
|
+
* @param {Number} index - index of the slide
|
446
|
+
*/
|
447
|
+
Plugin.prototype.addHtml = function(index) {
|
448
|
+
var subHtml = null;
|
449
|
+
var subHtmlUrl;
|
450
|
+
if (this.s.dynamic) {
|
451
|
+
if (this.s.dynamicEl[index].subHtmlUrl) {
|
452
|
+
subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
|
453
|
+
} else {
|
454
|
+
subHtml = this.s.dynamicEl[index].subHtml;
|
455
|
+
}
|
456
|
+
} else {
|
457
|
+
if (this.$items.eq(index).attr('data-sub-html-url')) {
|
458
|
+
subHtmlUrl = this.$items.eq(index).attr('data-sub-html-url');
|
459
|
+
} else {
|
460
|
+
subHtml = this.$items.eq(index).attr('data-sub-html');
|
461
|
+
}
|
462
|
+
}
|
463
|
+
|
464
|
+
if (!subHtmlUrl) {
|
465
|
+
if (typeof subHtml !== 'undefined' && subHtml !== null) {
|
466
|
+
|
467
|
+
// get first letter of subhtml
|
468
|
+
// if first letter starts with . or # get the html form the jQuery object
|
469
|
+
var fL = subHtml.substring(0, 1);
|
470
|
+
if (fL === '.' || fL === '#') {
|
471
|
+
subHtml = $(subHtml).html();
|
472
|
+
} else {
|
473
|
+
subHtml = subHtml;
|
474
|
+
}
|
475
|
+
} else {
|
476
|
+
subHtml = '';
|
477
|
+
}
|
478
|
+
}
|
479
|
+
|
480
|
+
if (this.s.appendSubHtmlTo === '.lg-sub-html') {
|
481
|
+
|
482
|
+
if (subHtmlUrl) {
|
483
|
+
this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
|
484
|
+
} else {
|
485
|
+
this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
|
486
|
+
}
|
487
|
+
|
488
|
+
} else {
|
489
|
+
|
490
|
+
if (subHtmlUrl) {
|
491
|
+
this.$slide.eq(index).load(subHtmlUrl);
|
492
|
+
} else {
|
493
|
+
this.$slide.eq(index).append(subHtml);
|
494
|
+
}
|
495
|
+
}
|
496
|
+
|
497
|
+
// Add lg-empty-html class if title doesn't exist
|
498
|
+
if (typeof subHtml !== 'undefined' && subHtml !== null) {
|
499
|
+
if (subHtml === '') {
|
500
|
+
this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
|
501
|
+
} else {
|
502
|
+
this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
|
503
|
+
}
|
504
|
+
}
|
505
|
+
|
506
|
+
this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
|
507
|
+
};
|
508
|
+
|
509
|
+
/**
|
510
|
+
* @desc Preload slides
|
511
|
+
* @param {Number} index - index of the slide
|
512
|
+
*/
|
513
|
+
Plugin.prototype.preload = function(index) {
|
514
|
+
var i = 1;
|
515
|
+
var j = 1;
|
516
|
+
for (i = 1; i <= this.s.preload; i++) {
|
517
|
+
if (i >= this.$items.length - index) {
|
518
|
+
break;
|
519
|
+
}
|
520
|
+
|
521
|
+
this.loadContent(index + i, false, 0);
|
522
|
+
}
|
523
|
+
|
524
|
+
for (j = 1; j <= this.s.preload; j++) {
|
525
|
+
if (index - j < 0) {
|
526
|
+
break;
|
527
|
+
}
|
528
|
+
|
529
|
+
this.loadContent(index - j, false, 0);
|
530
|
+
}
|
531
|
+
};
|
532
|
+
|
533
|
+
/**
|
534
|
+
* @desc Load slide content into slide.
|
535
|
+
* @param {Number} index - index of the slide.
|
536
|
+
* @param {Boolean} rec - if true call loadcontent() function again.
|
537
|
+
* @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
|
538
|
+
*/
|
539
|
+
Plugin.prototype.loadContent = function(index, rec, delay) {
|
540
|
+
|
541
|
+
var _this = this;
|
542
|
+
var _hasPoster = false;
|
543
|
+
var _$img;
|
544
|
+
var _src;
|
545
|
+
var _poster;
|
546
|
+
var _srcset;
|
547
|
+
var _sizes;
|
548
|
+
var _html;
|
549
|
+
var getResponsiveSrc = function(srcItms) {
|
550
|
+
var rsWidth = [];
|
551
|
+
var rsSrc = [];
|
552
|
+
for (var i = 0; i < srcItms.length; i++) {
|
553
|
+
var __src = srcItms[i].split(' ');
|
554
|
+
|
555
|
+
// Manage empty space
|
556
|
+
if (__src[0] === '') {
|
557
|
+
__src.splice(0, 1);
|
558
|
+
}
|
559
|
+
|
560
|
+
rsSrc.push(__src[0]);
|
561
|
+
rsWidth.push(__src[1]);
|
562
|
+
}
|
563
|
+
|
564
|
+
var wWidth = $(window).width();
|
565
|
+
for (var j = 0; j < rsWidth.length; j++) {
|
566
|
+
if (parseInt(rsWidth[j], 10) > wWidth) {
|
567
|
+
_src = rsSrc[j];
|
568
|
+
break;
|
569
|
+
}
|
570
|
+
}
|
571
|
+
};
|
572
|
+
|
573
|
+
if (_this.s.dynamic) {
|
574
|
+
|
575
|
+
if (_this.s.dynamicEl[index].poster) {
|
576
|
+
_hasPoster = true;
|
577
|
+
_poster = _this.s.dynamicEl[index].poster;
|
578
|
+
}
|
579
|
+
|
580
|
+
_html = _this.s.dynamicEl[index].html;
|
581
|
+
_src = _this.s.dynamicEl[index].src;
|
582
|
+
|
583
|
+
if (_this.s.dynamicEl[index].responsive) {
|
584
|
+
var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
|
585
|
+
getResponsiveSrc(srcDyItms);
|
586
|
+
}
|
587
|
+
|
588
|
+
_srcset = _this.s.dynamicEl[index].srcset;
|
589
|
+
_sizes = _this.s.dynamicEl[index].sizes;
|
590
|
+
|
591
|
+
} else {
|
592
|
+
|
593
|
+
if (_this.$items.eq(index).attr('data-poster')) {
|
594
|
+
_hasPoster = true;
|
595
|
+
_poster = _this.$items.eq(index).attr('data-poster');
|
596
|
+
}
|
597
|
+
|
598
|
+
_html = _this.$items.eq(index).attr('data-html');
|
599
|
+
_src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
|
600
|
+
|
601
|
+
if (_this.$items.eq(index).attr('data-responsive')) {
|
602
|
+
var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
|
603
|
+
getResponsiveSrc(srcItms);
|
604
|
+
}
|
605
|
+
|
606
|
+
_srcset = _this.$items.eq(index).attr('data-srcset');
|
607
|
+
_sizes = _this.$items.eq(index).attr('data-sizes');
|
608
|
+
|
609
|
+
}
|
610
|
+
|
611
|
+
//if (_src || _srcset || _sizes || _poster) {
|
612
|
+
|
613
|
+
var iframe = false;
|
614
|
+
if (_this.s.dynamic) {
|
615
|
+
if (_this.s.dynamicEl[index].iframe) {
|
616
|
+
iframe = true;
|
617
|
+
}
|
618
|
+
} else {
|
619
|
+
if (_this.$items.eq(index).attr('data-iframe') === 'true') {
|
620
|
+
iframe = true;
|
621
|
+
}
|
622
|
+
}
|
623
|
+
|
624
|
+
var _isVideo = _this.isVideo(_src, index);
|
625
|
+
if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
|
626
|
+
if (iframe) {
|
627
|
+
_this.$slide.eq(index).prepend('<div class="lg-video-cont" style="max-width:' + _this.s.iframeMaxWidth + '"><div class="lg-video"><iframe class="lg-object" frameborder="0" src="' + _src + '" allowfullscreen="true"></iframe></div></div>');
|
628
|
+
} else if (_hasPoster) {
|
629
|
+
var videoClass = '';
|
630
|
+
if (_isVideo && _isVideo.youtube) {
|
631
|
+
videoClass = 'lg-has-youtube';
|
632
|
+
} else if (_isVideo && _isVideo.vimeo) {
|
633
|
+
videoClass = 'lg-has-vimeo';
|
634
|
+
} else {
|
635
|
+
videoClass = 'lg-has-html5';
|
636
|
+
}
|
637
|
+
|
638
|
+
_this.$slide.eq(index).prepend('<div class="lg-video-cont ' + videoClass + ' "><div class="lg-video"><span class="lg-video-play"></span><img class="lg-object lg-has-poster" src="' + _poster + '" /></div></div>');
|
639
|
+
|
640
|
+
} else if (_isVideo) {
|
641
|
+
_this.$slide.eq(index).prepend('<div class="lg-video-cont "><div class="lg-video"></div></div>');
|
642
|
+
_this.$el.trigger('hasVideo.lg', [index, _src, _html]);
|
643
|
+
} else {
|
644
|
+
_this.$slide.eq(index).prepend('<div class="lg-img-wrap"><img class="lg-object lg-image" src="' + _src + '" /></div>');
|
645
|
+
}
|
646
|
+
|
647
|
+
_this.$el.trigger('onAferAppendSlide.lg', [index]);
|
648
|
+
|
649
|
+
_$img = _this.$slide.eq(index).find('.lg-object');
|
650
|
+
if (_sizes) {
|
651
|
+
_$img.attr('sizes', _sizes);
|
652
|
+
}
|
653
|
+
|
654
|
+
if (_srcset) {
|
655
|
+
_$img.attr('srcset', _srcset);
|
656
|
+
try {
|
657
|
+
picturefill({
|
658
|
+
elements: [_$img[0]]
|
659
|
+
});
|
660
|
+
} catch (e) {
|
661
|
+
console.error('Make sure you have included Picturefill version 2');
|
662
|
+
}
|
663
|
+
}
|
664
|
+
|
665
|
+
if (this.s.appendSubHtmlTo !== '.lg-sub-html') {
|
666
|
+
_this.addHtml(index);
|
667
|
+
}
|
668
|
+
|
669
|
+
_this.$slide.eq(index).addClass('lg-loaded');
|
670
|
+
}
|
671
|
+
|
672
|
+
_this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
|
673
|
+
|
674
|
+
// For first time add some delay for displaying the start animation.
|
675
|
+
var _speed = 0;
|
676
|
+
|
677
|
+
// Do not change the delay value because it is required for zoom plugin.
|
678
|
+
// If gallery opened from direct url (hash) speed value should be 0
|
679
|
+
if (delay && !$('body').hasClass('lg-from-hash')) {
|
680
|
+
_speed = delay;
|
681
|
+
}
|
682
|
+
|
683
|
+
setTimeout(function() {
|
684
|
+
_this.$slide.eq(index).addClass('lg-complete');
|
685
|
+
_this.$el.trigger('onSlideItemLoad.lg', [index, delay || 0]);
|
686
|
+
}, _speed);
|
687
|
+
|
688
|
+
});
|
689
|
+
|
690
|
+
// @todo check load state for html5 videos
|
691
|
+
if (_isVideo && _isVideo.html5 && !_hasPoster) {
|
692
|
+
_this.$slide.eq(index).addClass('lg-complete');
|
693
|
+
}
|
694
|
+
|
695
|
+
if (rec === true) {
|
696
|
+
if (!_this.$slide.eq(index).hasClass('lg-complete')) {
|
697
|
+
_this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
|
698
|
+
_this.preload(index);
|
699
|
+
});
|
700
|
+
} else {
|
701
|
+
_this.preload(index);
|
702
|
+
}
|
703
|
+
}
|
704
|
+
|
705
|
+
//}
|
706
|
+
};
|
707
|
+
|
708
|
+
/**
|
709
|
+
* @desc slide function for lightgallery
|
710
|
+
** Slide() gets call on start
|
711
|
+
** ** Set lg.on true once slide() function gets called.
|
712
|
+
** Call loadContent() on slide() function inside setTimeout
|
713
|
+
** ** On first slide we do not want any animation like slide of fade
|
714
|
+
** ** So on first slide( if lg.on if false that is first slide) loadContent() should start loading immediately
|
715
|
+
** ** Else loadContent() should wait for the transition to complete.
|
716
|
+
** ** So set timeout s.speed + 50
|
717
|
+
<=> ** loadContent() will load slide content in to the particular slide
|
718
|
+
** ** It has recursion (rec) parameter. if rec === true loadContent() will call preload() function.
|
719
|
+
** ** preload will execute only when the previous slide is fully loaded (images iframe)
|
720
|
+
** ** avoid simultaneous image load
|
721
|
+
<=> ** Preload() will check for s.preload value and call loadContent() again accoring to preload value
|
722
|
+
** loadContent() <====> Preload();
|
723
|
+
|
724
|
+
* @param {Number} index - index of the slide
|
725
|
+
* @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
|
726
|
+
* @param {Boolean} fromThumb - true if slide function called via thumbnail click
|
727
|
+
*/
|
728
|
+
Plugin.prototype.slide = function(index, fromTouch, fromThumb) {
|
729
|
+
|
730
|
+
var _prevIndex = this.$outer.find('.lg-current').index();
|
731
|
+
var _this = this;
|
732
|
+
|
733
|
+
// Prevent if multiple call
|
734
|
+
// Required for hsh plugin
|
735
|
+
if (_this.lGalleryOn && (_prevIndex === index)) {
|
736
|
+
return;
|
737
|
+
}
|
738
|
+
|
739
|
+
var _length = this.$slide.length;
|
740
|
+
var _time = _this.lGalleryOn ? this.s.speed : 0;
|
741
|
+
var _next = false;
|
742
|
+
var _prev = false;
|
743
|
+
|
744
|
+
if (!_this.lgBusy) {
|
745
|
+
|
746
|
+
if (this.s.download) {
|
747
|
+
var _src;
|
748
|
+
if (_this.s.dynamic) {
|
749
|
+
_src = _this.s.dynamicEl[index].downloadUrl !== false && (_this.s.dynamicEl[index].downloadUrl || _this.s.dynamicEl[index].src);
|
750
|
+
} else {
|
751
|
+
_src = _this.$items.eq(index).attr('data-download-url') !== 'false' && (_this.$items.eq(index).attr('data-download-url') || _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src'));
|
752
|
+
|
753
|
+
}
|
754
|
+
|
755
|
+
if (_src) {
|
756
|
+
$('#lg-download').attr('href', _src);
|
757
|
+
_this.$outer.removeClass('lg-hide-download');
|
758
|
+
} else {
|
759
|
+
_this.$outer.addClass('lg-hide-download');
|
760
|
+
}
|
761
|
+
}
|
762
|
+
|
763
|
+
this.$el.trigger('onBeforeSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
|
764
|
+
|
765
|
+
_this.lgBusy = true;
|
766
|
+
|
767
|
+
clearTimeout(_this.hideBartimeout);
|
768
|
+
|
769
|
+
// Add title if this.s.appendSubHtmlTo === lg-sub-html
|
770
|
+
if (this.s.appendSubHtmlTo === '.lg-sub-html') {
|
771
|
+
|
772
|
+
// wait for slide animation to complete
|
773
|
+
setTimeout(function() {
|
774
|
+
_this.addHtml(index);
|
775
|
+
}, _time);
|
776
|
+
}
|
777
|
+
|
778
|
+
this.arrowDisable(index);
|
779
|
+
|
780
|
+
if (!fromTouch) {
|
781
|
+
|
782
|
+
// remove all transitions
|
783
|
+
_this.$outer.addClass('lg-no-trans');
|
784
|
+
|
785
|
+
this.$slide.removeClass('lg-prev-slide lg-next-slide');
|
786
|
+
|
787
|
+
if (index < _prevIndex) {
|
788
|
+
_prev = true;
|
789
|
+
if ((index === 0) && (_prevIndex === _length - 1) && !fromThumb) {
|
790
|
+
_prev = false;
|
791
|
+
_next = true;
|
792
|
+
}
|
793
|
+
} else if (index > _prevIndex) {
|
794
|
+
_next = true;
|
795
|
+
if ((index === _length - 1) && (_prevIndex === 0) && !fromThumb) {
|
796
|
+
_prev = true;
|
797
|
+
_next = false;
|
798
|
+
}
|
799
|
+
}
|
800
|
+
|
801
|
+
if (_prev) {
|
802
|
+
|
803
|
+
//prevslide
|
804
|
+
this.$slide.eq(index).addClass('lg-prev-slide');
|
805
|
+
this.$slide.eq(_prevIndex).addClass('lg-next-slide');
|
806
|
+
} else if (_next) {
|
807
|
+
|
808
|
+
// next slide
|
809
|
+
this.$slide.eq(index).addClass('lg-next-slide');
|
810
|
+
this.$slide.eq(_prevIndex).addClass('lg-prev-slide');
|
811
|
+
}
|
812
|
+
|
813
|
+
// give 50 ms for browser to add/remove class
|
814
|
+
setTimeout(function() {
|
815
|
+
_this.$slide.removeClass('lg-current');
|
816
|
+
|
817
|
+
//_this.$slide.eq(_prevIndex).removeClass('lg-current');
|
818
|
+
_this.$slide.eq(index).addClass('lg-current');
|
819
|
+
|
820
|
+
// reset all transitions
|
821
|
+
_this.$outer.removeClass('lg-no-trans');
|
822
|
+
}, 50);
|
823
|
+
} else {
|
824
|
+
|
825
|
+
var touchPrev = index - 1;
|
826
|
+
var touchNext = index + 1;
|
827
|
+
|
828
|
+
if ((index === 0) && (_prevIndex === _length - 1)) {
|
829
|
+
|
830
|
+
// next slide
|
831
|
+
touchNext = 0;
|
832
|
+
touchPrev = _length - 1;
|
833
|
+
} else if ((index === _length - 1) && (_prevIndex === 0)) {
|
834
|
+
|
835
|
+
// prev slide
|
836
|
+
touchNext = 0;
|
837
|
+
touchPrev = _length - 1;
|
838
|
+
}
|
839
|
+
|
840
|
+
this.$slide.removeClass('lg-prev-slide lg-current lg-next-slide');
|
841
|
+
_this.$slide.eq(touchPrev).addClass('lg-prev-slide');
|
842
|
+
_this.$slide.eq(touchNext).addClass('lg-next-slide');
|
843
|
+
_this.$slide.eq(index).addClass('lg-current');
|
844
|
+
}
|
845
|
+
|
846
|
+
if (_this.lGalleryOn) {
|
847
|
+
setTimeout(function() {
|
848
|
+
_this.loadContent(index, true, 0);
|
849
|
+
}, this.s.speed + 50);
|
850
|
+
|
851
|
+
setTimeout(function() {
|
852
|
+
_this.lgBusy = false;
|
853
|
+
_this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
|
854
|
+
}, this.s.speed);
|
855
|
+
|
856
|
+
} else {
|
857
|
+
_this.loadContent(index, true, _this.s.backdropDuration);
|
858
|
+
|
859
|
+
_this.lgBusy = false;
|
860
|
+
_this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
|
861
|
+
}
|
862
|
+
|
863
|
+
_this.lGalleryOn = true;
|
864
|
+
|
865
|
+
if (this.s.counter) {
|
866
|
+
$('#lg-counter-current').text(index + 1);
|
867
|
+
}
|
868
|
+
|
869
|
+
}
|
870
|
+
|
871
|
+
};
|
872
|
+
|
873
|
+
/**
|
874
|
+
* @desc Go to next slide
|
875
|
+
* @param {Boolean} fromTouch - true if slide function called via touch event
|
876
|
+
*/
|
877
|
+
Plugin.prototype.goToNextSlide = function(fromTouch) {
|
878
|
+
var _this = this;
|
879
|
+
if (!_this.lgBusy) {
|
880
|
+
if ((_this.index + 1) < _this.$slide.length) {
|
881
|
+
_this.index++;
|
882
|
+
_this.$el.trigger('onBeforeNextSlide.lg', [_this.index]);
|
883
|
+
_this.slide(_this.index, fromTouch, false);
|
884
|
+
} else {
|
885
|
+
if (_this.s.loop) {
|
886
|
+
_this.index = 0;
|
887
|
+
_this.$el.trigger('onBeforeNextSlide.lg', [_this.index]);
|
888
|
+
_this.slide(_this.index, fromTouch, false);
|
889
|
+
} else if (_this.s.slideEndAnimatoin) {
|
890
|
+
_this.$outer.addClass('lg-right-end');
|
891
|
+
setTimeout(function() {
|
892
|
+
_this.$outer.removeClass('lg-right-end');
|
893
|
+
}, 400);
|
894
|
+
}
|
895
|
+
}
|
896
|
+
}
|
897
|
+
};
|
898
|
+
|
899
|
+
/**
|
900
|
+
* @desc Go to previous slide
|
901
|
+
* @param {Boolean} fromTouch - true if slide function called via touch event
|
902
|
+
*/
|
903
|
+
Plugin.prototype.goToPrevSlide = function(fromTouch) {
|
904
|
+
var _this = this;
|
905
|
+
if (!_this.lgBusy) {
|
906
|
+
if (_this.index > 0) {
|
907
|
+
_this.index--;
|
908
|
+
_this.$el.trigger('onBeforePrevSlide.lg', [_this.index, fromTouch]);
|
909
|
+
_this.slide(_this.index, fromTouch, false);
|
910
|
+
} else {
|
911
|
+
if (_this.s.loop) {
|
912
|
+
_this.index = _this.$items.length - 1;
|
913
|
+
_this.$el.trigger('onBeforePrevSlide.lg', [_this.index, fromTouch]);
|
914
|
+
_this.slide(_this.index, fromTouch, false);
|
915
|
+
} else if (_this.s.slideEndAnimatoin) {
|
916
|
+
_this.$outer.addClass('lg-left-end');
|
917
|
+
setTimeout(function() {
|
918
|
+
_this.$outer.removeClass('lg-left-end');
|
919
|
+
}, 400);
|
920
|
+
}
|
921
|
+
}
|
922
|
+
}
|
923
|
+
};
|
924
|
+
|
925
|
+
Plugin.prototype.keyPress = function() {
|
926
|
+
var _this = this;
|
927
|
+
if (this.$items.length > 1) {
|
928
|
+
$(window).on('keyup.lg', function(e) {
|
929
|
+
if (_this.$items.length > 1) {
|
930
|
+
if (e.keyCode === 37) {
|
931
|
+
e.preventDefault();
|
932
|
+
_this.goToPrevSlide();
|
933
|
+
}
|
934
|
+
|
935
|
+
if (e.keyCode === 39) {
|
936
|
+
e.preventDefault();
|
937
|
+
_this.goToNextSlide();
|
938
|
+
}
|
939
|
+
}
|
940
|
+
});
|
941
|
+
}
|
942
|
+
|
943
|
+
$(window).on('keydown.lg', function(e) {
|
944
|
+
if (_this.s.escKey === true && e.keyCode === 27) {
|
945
|
+
e.preventDefault();
|
946
|
+
if (!_this.$outer.hasClass('lg-thumb-open')) {
|
947
|
+
_this.destroy();
|
948
|
+
} else {
|
949
|
+
_this.$outer.removeClass('lg-thumb-open');
|
950
|
+
}
|
951
|
+
}
|
952
|
+
});
|
953
|
+
};
|
954
|
+
|
955
|
+
Plugin.prototype.arrow = function() {
|
956
|
+
var _this = this;
|
957
|
+
this.$outer.find('.lg-prev').on('click.lg', function() {
|
958
|
+
_this.goToPrevSlide();
|
959
|
+
});
|
960
|
+
|
961
|
+
this.$outer.find('.lg-next').on('click.lg', function() {
|
962
|
+
_this.goToNextSlide();
|
963
|
+
});
|
964
|
+
};
|
965
|
+
|
966
|
+
Plugin.prototype.arrowDisable = function(index) {
|
967
|
+
|
968
|
+
// Disable arrows if s.hideControlOnEnd is true
|
969
|
+
if (!this.s.loop && this.s.hideControlOnEnd) {
|
970
|
+
if ((index + 1) < this.$slide.length) {
|
971
|
+
this.$outer.find('.lg-next').removeAttr('disabled').removeClass('disabled');
|
972
|
+
} else {
|
973
|
+
this.$outer.find('.lg-next').attr('disabled', 'disabled').addClass('disabled');
|
974
|
+
}
|
975
|
+
|
976
|
+
if (index > 0) {
|
977
|
+
this.$outer.find('.lg-prev').removeAttr('disabled').removeClass('disabled');
|
978
|
+
} else {
|
979
|
+
this.$outer.find('.lg-prev').attr('disabled', 'disabled').addClass('disabled');
|
980
|
+
}
|
981
|
+
}
|
982
|
+
};
|
983
|
+
|
984
|
+
Plugin.prototype.setTranslate = function($el, xValue, yValue) {
|
985
|
+
// jQuery supports Automatic CSS prefixing since jQuery 1.8.0
|
986
|
+
if (this.s.useLeft) {
|
987
|
+
$el.css('left', xValue);
|
988
|
+
} else {
|
989
|
+
$el.css({
|
990
|
+
transform: 'translate3d(' + (xValue) + 'px, ' + yValue + 'px, 0px)'
|
991
|
+
});
|
992
|
+
}
|
993
|
+
};
|
994
|
+
|
995
|
+
Plugin.prototype.touchMove = function(startCoords, endCoords) {
|
996
|
+
|
997
|
+
var distance = endCoords - startCoords;
|
998
|
+
|
999
|
+
if (Math.abs(distance) > 15) {
|
1000
|
+
// reset opacity and transition duration
|
1001
|
+
this.$outer.addClass('lg-dragging');
|
1002
|
+
|
1003
|
+
// move current slide
|
1004
|
+
this.setTranslate(this.$slide.eq(this.index), distance, 0);
|
1005
|
+
|
1006
|
+
// move next and prev slide with current slide
|
1007
|
+
this.setTranslate($('.lg-prev-slide'), -this.$slide.eq(this.index).width() + distance, 0);
|
1008
|
+
this.setTranslate($('.lg-next-slide'), this.$slide.eq(this.index).width() + distance, 0);
|
1009
|
+
}
|
1010
|
+
};
|
1011
|
+
|
1012
|
+
Plugin.prototype.touchEnd = function(distance) {
|
1013
|
+
var _this = this;
|
1014
|
+
|
1015
|
+
// keep slide animation for any mode while dragg/swipe
|
1016
|
+
if (_this.s.mode !== 'lg-slide') {
|
1017
|
+
_this.$outer.addClass('lg-slide');
|
1018
|
+
}
|
1019
|
+
|
1020
|
+
this.$slide.not('.lg-current, .lg-prev-slide, .lg-next-slide').css('opacity', '0');
|
1021
|
+
|
1022
|
+
// set transition duration
|
1023
|
+
setTimeout(function() {
|
1024
|
+
_this.$outer.removeClass('lg-dragging');
|
1025
|
+
if ((distance < 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
|
1026
|
+
_this.goToNextSlide(true);
|
1027
|
+
} else if ((distance > 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
|
1028
|
+
_this.goToPrevSlide(true);
|
1029
|
+
} else if (Math.abs(distance) < 5) {
|
1030
|
+
|
1031
|
+
// Trigger click if distance is less than 5 pix
|
1032
|
+
_this.$el.trigger('onSlideClick.lg');
|
1033
|
+
}
|
1034
|
+
|
1035
|
+
_this.$slide.removeAttr('style');
|
1036
|
+
});
|
1037
|
+
|
1038
|
+
// remove slide class once drag/swipe is completed if mode is not slide
|
1039
|
+
setTimeout(function() {
|
1040
|
+
if (!_this.$outer.hasClass('lg-dragging') && _this.s.mode !== 'lg-slide') {
|
1041
|
+
_this.$outer.removeClass('lg-slide');
|
1042
|
+
}
|
1043
|
+
}, _this.s.speed + 100);
|
1044
|
+
|
1045
|
+
};
|
1046
|
+
|
1047
|
+
Plugin.prototype.enableSwipe = function() {
|
1048
|
+
var _this = this;
|
1049
|
+
var startCoords = 0;
|
1050
|
+
var endCoords = 0;
|
1051
|
+
var isMoved = false;
|
1052
|
+
|
1053
|
+
if (_this.s.enableSwipe && _this.isTouch && _this.doCss()) {
|
1054
|
+
|
1055
|
+
_this.$slide.on('touchstart.lg', function(e) {
|
1056
|
+
if (!_this.$outer.hasClass('lg-zoomed') && !_this.lgBusy) {
|
1057
|
+
e.preventDefault();
|
1058
|
+
_this.manageSwipeClass();
|
1059
|
+
startCoords = e.originalEvent.targetTouches[0].pageX;
|
1060
|
+
}
|
1061
|
+
});
|
1062
|
+
|
1063
|
+
_this.$slide.on('touchmove.lg', function(e) {
|
1064
|
+
if (!_this.$outer.hasClass('lg-zoomed')) {
|
1065
|
+
e.preventDefault();
|
1066
|
+
endCoords = e.originalEvent.targetTouches[0].pageX;
|
1067
|
+
_this.touchMove(startCoords, endCoords);
|
1068
|
+
isMoved = true;
|
1069
|
+
}
|
1070
|
+
});
|
1071
|
+
|
1072
|
+
_this.$slide.on('touchend.lg', function() {
|
1073
|
+
if (!_this.$outer.hasClass('lg-zoomed')) {
|
1074
|
+
if (isMoved) {
|
1075
|
+
isMoved = false;
|
1076
|
+
_this.touchEnd(endCoords - startCoords);
|
1077
|
+
} else {
|
1078
|
+
_this.$el.trigger('onSlideClick.lg');
|
1079
|
+
}
|
1080
|
+
}
|
1081
|
+
});
|
1082
|
+
}
|
1083
|
+
|
1084
|
+
};
|
1085
|
+
|
1086
|
+
Plugin.prototype.enableDrag = function() {
|
1087
|
+
var _this = this;
|
1088
|
+
var startCoords = 0;
|
1089
|
+
var endCoords = 0;
|
1090
|
+
var isDraging = false;
|
1091
|
+
var isMoved = false;
|
1092
|
+
if (_this.s.enableDrag && !_this.isTouch && _this.doCss()) {
|
1093
|
+
_this.$slide.on('mousedown.lg', function(e) {
|
1094
|
+
// execute only on .lg-object
|
1095
|
+
if (!_this.$outer.hasClass('lg-zoomed')) {
|
1096
|
+
if ($(e.target).hasClass('lg-object') || $(e.target).hasClass('lg-video-play')) {
|
1097
|
+
e.preventDefault();
|
1098
|
+
|
1099
|
+
if (!_this.lgBusy) {
|
1100
|
+
_this.manageSwipeClass();
|
1101
|
+
startCoords = e.pageX;
|
1102
|
+
isDraging = true;
|
1103
|
+
|
1104
|
+
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
1105
|
+
_this.$outer.scrollLeft += 1;
|
1106
|
+
_this.$outer.scrollLeft -= 1;
|
1107
|
+
|
1108
|
+
// *
|
1109
|
+
|
1110
|
+
_this.$outer.removeClass('lg-grab').addClass('lg-grabbing');
|
1111
|
+
|
1112
|
+
_this.$el.trigger('onDragstart.lg');
|
1113
|
+
}
|
1114
|
+
|
1115
|
+
}
|
1116
|
+
}
|
1117
|
+
});
|
1118
|
+
|
1119
|
+
$(window).on('mousemove.lg', function(e) {
|
1120
|
+
if (isDraging) {
|
1121
|
+
isMoved = true;
|
1122
|
+
endCoords = e.pageX;
|
1123
|
+
_this.touchMove(startCoords, endCoords);
|
1124
|
+
_this.$el.trigger('onDragmove.lg');
|
1125
|
+
}
|
1126
|
+
});
|
1127
|
+
|
1128
|
+
$(window).on('mouseup.lg', function(e) {
|
1129
|
+
if (isMoved) {
|
1130
|
+
isMoved = false;
|
1131
|
+
_this.touchEnd(endCoords - startCoords);
|
1132
|
+
_this.$el.trigger('onDragend.lg');
|
1133
|
+
} else if ($(e.target).hasClass('lg-object') || $(e.target).hasClass('lg-video-play')) {
|
1134
|
+
_this.$el.trigger('onSlideClick.lg');
|
1135
|
+
}
|
1136
|
+
|
1137
|
+
// Prevent execution on click
|
1138
|
+
if (isDraging) {
|
1139
|
+
isDraging = false;
|
1140
|
+
_this.$outer.removeClass('lg-grabbing').addClass('lg-grab');
|
1141
|
+
}
|
1142
|
+
});
|
1143
|
+
|
1144
|
+
}
|
1145
|
+
};
|
1146
|
+
|
1147
|
+
Plugin.prototype.manageSwipeClass = function() {
|
1148
|
+
var touchNext = this.index + 1;
|
1149
|
+
var touchPrev = this.index - 1;
|
1150
|
+
var length = this.$slide.length;
|
1151
|
+
if (this.s.loop) {
|
1152
|
+
if (this.index === 0) {
|
1153
|
+
touchPrev = length - 1;
|
1154
|
+
} else if (this.index === length - 1) {
|
1155
|
+
touchNext = 0;
|
1156
|
+
}
|
1157
|
+
}
|
1158
|
+
|
1159
|
+
this.$slide.removeClass('lg-next-slide lg-prev-slide');
|
1160
|
+
if (touchPrev > -1) {
|
1161
|
+
this.$slide.eq(touchPrev).addClass('lg-prev-slide');
|
1162
|
+
}
|
1163
|
+
|
1164
|
+
this.$slide.eq(touchNext).addClass('lg-next-slide');
|
1165
|
+
};
|
1166
|
+
|
1167
|
+
Plugin.prototype.mousewheel = function() {
|
1168
|
+
var _this = this;
|
1169
|
+
_this.$outer.on('mousewheel.lg', function(e) {
|
1170
|
+
|
1171
|
+
if (!e.deltaY) {
|
1172
|
+
return;
|
1173
|
+
}
|
1174
|
+
|
1175
|
+
if (e.deltaY > 0) {
|
1176
|
+
_this.goToPrevSlide();
|
1177
|
+
} else {
|
1178
|
+
_this.goToNextSlide();
|
1179
|
+
}
|
1180
|
+
|
1181
|
+
e.preventDefault();
|
1182
|
+
});
|
1183
|
+
|
1184
|
+
};
|
1185
|
+
|
1186
|
+
Plugin.prototype.closeGallery = function() {
|
1187
|
+
|
1188
|
+
var _this = this;
|
1189
|
+
var mousedown = false;
|
1190
|
+
this.$outer.find('.lg-close').on('click.lg', function() {
|
1191
|
+
_this.destroy();
|
1192
|
+
});
|
1193
|
+
|
1194
|
+
if (_this.s.closable) {
|
1195
|
+
|
1196
|
+
// If you drag the slide and release outside gallery gets close on chrome
|
1197
|
+
// for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
|
1198
|
+
_this.$outer.on('mousedown.lg', function(e) {
|
1199
|
+
|
1200
|
+
if ($(e.target).is('.lg-outer') || $(e.target).is('.lg-item ') || $(e.target).is('.lg-img-wrap')) {
|
1201
|
+
mousedown = true;
|
1202
|
+
} else {
|
1203
|
+
mousedown = false;
|
1204
|
+
}
|
1205
|
+
|
1206
|
+
});
|
1207
|
+
|
1208
|
+
_this.$outer.on('mouseup.lg', function(e) {
|
1209
|
+
|
1210
|
+
if ($(e.target).is('.lg-outer') || $(e.target).is('.lg-item ') || $(e.target).is('.lg-img-wrap') && mousedown) {
|
1211
|
+
if (!_this.$outer.hasClass('lg-dragging')) {
|
1212
|
+
_this.destroy();
|
1213
|
+
}
|
1214
|
+
}
|
1215
|
+
|
1216
|
+
});
|
1217
|
+
|
1218
|
+
}
|
1219
|
+
|
1220
|
+
};
|
1221
|
+
|
1222
|
+
Plugin.prototype.destroy = function(d) {
|
1223
|
+
|
1224
|
+
var _this = this;
|
1225
|
+
|
1226
|
+
if (!d) {
|
1227
|
+
_this.$el.trigger('onBeforeClose.lg');
|
1228
|
+
}
|
1229
|
+
|
1230
|
+
$(window).scrollTop(_this.prevScrollTop);
|
1231
|
+
|
1232
|
+
/**
|
1233
|
+
* if d is false or undefined destroy will only close the gallery
|
1234
|
+
* plugins instance remains with the element
|
1235
|
+
*
|
1236
|
+
* if d is true destroy will completely remove the plugin
|
1237
|
+
*/
|
1238
|
+
|
1239
|
+
if (d) {
|
1240
|
+
if (!_this.s.dynamic) {
|
1241
|
+
// only when not using dynamic mode is $items a jquery collection
|
1242
|
+
this.$items.off('click.lg click.lgcustom');
|
1243
|
+
}
|
1244
|
+
|
1245
|
+
$.removeData(_this.el, 'lightGallery');
|
1246
|
+
}
|
1247
|
+
|
1248
|
+
// Unbind all events added by lightGallery
|
1249
|
+
this.$el.off('.lg.tm');
|
1250
|
+
|
1251
|
+
// Distroy all lightGallery modules
|
1252
|
+
$.each($.fn.lightGallery.modules, function(key) {
|
1253
|
+
if (_this.modules[key]) {
|
1254
|
+
_this.modules[key].destroy();
|
1255
|
+
}
|
1256
|
+
});
|
1257
|
+
|
1258
|
+
this.lGalleryOn = false;
|
1259
|
+
|
1260
|
+
clearTimeout(_this.hideBartimeout);
|
1261
|
+
this.hideBartimeout = false;
|
1262
|
+
$(window).off('.lg');
|
1263
|
+
$('body').removeClass('lg-on lg-from-hash');
|
1264
|
+
|
1265
|
+
if (_this.$outer) {
|
1266
|
+
_this.$outer.removeClass('lg-visible');
|
1267
|
+
}
|
1268
|
+
|
1269
|
+
$('.lg-backdrop').removeClass('in');
|
1270
|
+
|
1271
|
+
setTimeout(function() {
|
1272
|
+
if (_this.$outer) {
|
1273
|
+
_this.$outer.remove();
|
1274
|
+
}
|
1275
|
+
|
1276
|
+
$('.lg-backdrop').remove();
|
1277
|
+
|
1278
|
+
if (!d) {
|
1279
|
+
_this.$el.trigger('onCloseAfter.lg');
|
1280
|
+
}
|
1281
|
+
|
1282
|
+
}, _this.s.backdropDuration + 50);
|
1283
|
+
};
|
1284
|
+
|
1285
|
+
$.fn.lightGallery = function(options) {
|
1286
|
+
return this.each(function() {
|
1287
|
+
if (!$.data(this, 'lightGallery')) {
|
1288
|
+
$.data(this, 'lightGallery', new Plugin(this, options));
|
1289
|
+
} else {
|
1290
|
+
try {
|
1291
|
+
$(this).data('lightGallery').init();
|
1292
|
+
} catch (err) {
|
1293
|
+
console.error('lightGallery has not initiated properly');
|
1294
|
+
}
|
1295
|
+
}
|
1296
|
+
});
|
1297
|
+
};
|
1298
|
+
|
1299
|
+
$.fn.lightGallery.modules = {};
|
1300
|
+
|
1301
|
+
})(jQuery, window, document);
|
1302
|
+
|
1303
|
+
/**
|
1304
|
+
* Autoplay Plugin
|
1305
|
+
* @version 1.2.0
|
1306
|
+
* @author Sachin N - @sachinchoolur
|
1307
|
+
* @license MIT License (MIT)
|
1308
|
+
*/
|
1309
|
+
|
1310
|
+
(function($, window, document, undefined) {
|
1311
|
+
|
1312
|
+
'use strict';
|
1313
|
+
|
1314
|
+
var defaults = {
|
1315
|
+
autoplay: false,
|
1316
|
+
pause: 5000,
|
1317
|
+
progressBar: true,
|
1318
|
+
fourceAutoplay: false,
|
1319
|
+
autoplayControls: true,
|
1320
|
+
appendAutoplayControlsTo: '.lg-toolbar'
|
1321
|
+
};
|
1322
|
+
|
1323
|
+
/**
|
1324
|
+
* Creates the autoplay plugin.
|
1325
|
+
* @param {object} element - lightGallery element
|
1326
|
+
*/
|
1327
|
+
var Autoplay = function(element) {
|
1328
|
+
|
1329
|
+
this.core = $(element).data('lightGallery');
|
1330
|
+
|
1331
|
+
this.$el = $(element);
|
1332
|
+
|
1333
|
+
// Execute only if items are above 1
|
1334
|
+
if (this.core.$items.length < 2) {
|
1335
|
+
return false;
|
1336
|
+
}
|
1337
|
+
|
1338
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
1339
|
+
this.interval = false;
|
1340
|
+
|
1341
|
+
// Identify if slide happened from autoplay
|
1342
|
+
this.fromAuto = true;
|
1343
|
+
|
1344
|
+
// Identify if autoplay canceled from touch/drag
|
1345
|
+
this.canceledOnTouch = false;
|
1346
|
+
|
1347
|
+
// save fourceautoplay value
|
1348
|
+
this.fourceAutoplayTemp = this.core.s.fourceAutoplay;
|
1349
|
+
|
1350
|
+
// do not allow progress bar if browser does not support css3 transitions
|
1351
|
+
if (!this.core.doCss()) {
|
1352
|
+
this.core.s.progressBar = false;
|
1353
|
+
}
|
1354
|
+
|
1355
|
+
this.init();
|
1356
|
+
|
1357
|
+
return this;
|
1358
|
+
};
|
1359
|
+
|
1360
|
+
Autoplay.prototype.init = function() {
|
1361
|
+
var _this = this;
|
1362
|
+
|
1363
|
+
// append autoplay controls
|
1364
|
+
if (_this.core.s.autoplayControls) {
|
1365
|
+
_this.controls();
|
1366
|
+
}
|
1367
|
+
|
1368
|
+
// Create progress bar
|
1369
|
+
if (_this.core.s.progressBar) {
|
1370
|
+
_this.core.$outer.find('.lg').append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
|
1371
|
+
}
|
1372
|
+
|
1373
|
+
// set progress
|
1374
|
+
_this.progress();
|
1375
|
+
|
1376
|
+
// Start autoplay
|
1377
|
+
if (_this.core.s.autoplay) {
|
1378
|
+
_this.startlAuto();
|
1379
|
+
}
|
1380
|
+
|
1381
|
+
// cancel interval on touchstart and dragstart
|
1382
|
+
_this.$el.on('onDragstart.lg.tm touchstart.lg.tm', function() {
|
1383
|
+
if (_this.interval) {
|
1384
|
+
_this.cancelAuto();
|
1385
|
+
_this.canceledOnTouch = true;
|
1386
|
+
}
|
1387
|
+
});
|
1388
|
+
|
1389
|
+
// restore autoplay if autoplay canceled from touchstart / dragstart
|
1390
|
+
_this.$el.on('onDragend.lg.tm touchend.lg.tm onSlideClick.lg.tm', function() {
|
1391
|
+
if (!_this.interval && _this.canceledOnTouch) {
|
1392
|
+
_this.startlAuto();
|
1393
|
+
_this.canceledOnTouch = false;
|
1394
|
+
}
|
1395
|
+
});
|
1396
|
+
|
1397
|
+
};
|
1398
|
+
|
1399
|
+
Autoplay.prototype.progress = function() {
|
1400
|
+
|
1401
|
+
var _this = this;
|
1402
|
+
var _$progressBar;
|
1403
|
+
var _$progress;
|
1404
|
+
|
1405
|
+
_this.$el.on('onBeforeSlide.lg.tm', function() {
|
1406
|
+
|
1407
|
+
// start progress bar animation
|
1408
|
+
if (_this.core.s.progressBar && _this.fromAuto) {
|
1409
|
+
_$progressBar = _this.core.$outer.find('.lg-progress-bar');
|
1410
|
+
_$progress = _this.core.$outer.find('.lg-progress');
|
1411
|
+
if (_this.interval) {
|
1412
|
+
_$progress.removeAttr('style');
|
1413
|
+
_$progressBar.removeClass('lg-start');
|
1414
|
+
setTimeout(function() {
|
1415
|
+
_$progress.css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
|
1416
|
+
_$progressBar.addClass('lg-start');
|
1417
|
+
}, 20);
|
1418
|
+
}
|
1419
|
+
}
|
1420
|
+
|
1421
|
+
// Remove setinterval if slide is triggered manually and fourceautoplay is false
|
1422
|
+
if (!_this.fromAuto && !_this.core.s.fourceAutoplay) {
|
1423
|
+
_this.cancelAuto();
|
1424
|
+
}
|
1425
|
+
|
1426
|
+
_this.fromAuto = false;
|
1427
|
+
|
1428
|
+
});
|
1429
|
+
};
|
1430
|
+
|
1431
|
+
// Manage autoplay via play/stop buttons
|
1432
|
+
Autoplay.prototype.controls = function() {
|
1433
|
+
var _this = this;
|
1434
|
+
var _html = '<span class="lg-autoplay-button lg-icon"></span>';
|
1435
|
+
|
1436
|
+
// Append autoplay controls
|
1437
|
+
$(this.core.s.appendAutoplayControlsTo).append(_html);
|
1438
|
+
|
1439
|
+
_this.core.$outer.find('.lg-autoplay-button').on('click.lg', function() {
|
1440
|
+
if ($(_this.core.$outer).hasClass('lg-show-autoplay')) {
|
1441
|
+
_this.cancelAuto();
|
1442
|
+
_this.core.s.fourceAutoplay = false;
|
1443
|
+
} else {
|
1444
|
+
if (!_this.interval) {
|
1445
|
+
_this.startlAuto();
|
1446
|
+
_this.core.s.fourceAutoplay = _this.fourceAutoplayTemp;
|
1447
|
+
}
|
1448
|
+
}
|
1449
|
+
});
|
1450
|
+
};
|
1451
|
+
|
1452
|
+
// Autostart gallery
|
1453
|
+
Autoplay.prototype.startlAuto = function() {
|
1454
|
+
var _this = this;
|
1455
|
+
|
1456
|
+
_this.core.$outer.find('.lg-progress').css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
|
1457
|
+
_this.core.$outer.addClass('lg-show-autoplay');
|
1458
|
+
_this.core.$outer.find('.lg-progress-bar').addClass('lg-start');
|
1459
|
+
|
1460
|
+
_this.interval = setInterval(function() {
|
1461
|
+
if (_this.core.index + 1 < _this.core.$items.length) {
|
1462
|
+
_this.core.index = _this.core.index;
|
1463
|
+
} else {
|
1464
|
+
_this.core.index = -1;
|
1465
|
+
}
|
1466
|
+
|
1467
|
+
_this.core.index++;
|
1468
|
+
_this.fromAuto = true;
|
1469
|
+
_this.core.slide(_this.core.index, false, false);
|
1470
|
+
}, _this.core.s.speed + _this.core.s.pause);
|
1471
|
+
};
|
1472
|
+
|
1473
|
+
// cancel Autostart
|
1474
|
+
Autoplay.prototype.cancelAuto = function() {
|
1475
|
+
clearInterval(this.interval);
|
1476
|
+
this.interval = false;
|
1477
|
+
this.core.$outer.find('.lg-progress').removeAttr('style');
|
1478
|
+
this.core.$outer.removeClass('lg-show-autoplay');
|
1479
|
+
this.core.$outer.find('.lg-progress-bar').removeClass('lg-start');
|
1480
|
+
};
|
1481
|
+
|
1482
|
+
Autoplay.prototype.destroy = function() {
|
1483
|
+
|
1484
|
+
this.cancelAuto();
|
1485
|
+
this.core.$outer.find('.lg-progress-bar').remove();
|
1486
|
+
};
|
1487
|
+
|
1488
|
+
$.fn.lightGallery.modules.autoplay = Autoplay;
|
1489
|
+
|
1490
|
+
})(jQuery, window, document);
|
1491
|
+
|
1492
|
+
(function($, window, document, undefined) {
|
1493
|
+
|
1494
|
+
'use strict';
|
1495
|
+
|
1496
|
+
var defaults = {
|
1497
|
+
fullScreen: true
|
1498
|
+
};
|
1499
|
+
|
1500
|
+
var Fullscreen = function(element) {
|
1501
|
+
|
1502
|
+
// get lightGallery core plugin data
|
1503
|
+
this.core = $(element).data('lightGallery');
|
1504
|
+
|
1505
|
+
this.$el = $(element);
|
1506
|
+
|
1507
|
+
// extend module defalut settings with lightGallery core settings
|
1508
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
1509
|
+
|
1510
|
+
this.init();
|
1511
|
+
|
1512
|
+
return this;
|
1513
|
+
};
|
1514
|
+
|
1515
|
+
Fullscreen.prototype.init = function() {
|
1516
|
+
var fullScreen = '';
|
1517
|
+
if (this.core.s.fullScreen) {
|
1518
|
+
|
1519
|
+
// check for fullscreen browser support
|
1520
|
+
if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled &&
|
1521
|
+
!document.mozFullScreenEnabled && !document.msFullscreenEnabled) {
|
1522
|
+
return;
|
1523
|
+
} else {
|
1524
|
+
fullScreen = '<span class="lg-fullscreen lg-icon"></span>';
|
1525
|
+
this.core.$outer.find('.lg-toolbar').append(fullScreen);
|
1526
|
+
this.fullScreen();
|
1527
|
+
}
|
1528
|
+
}
|
1529
|
+
};
|
1530
|
+
|
1531
|
+
Fullscreen.prototype.requestFullscreen = function() {
|
1532
|
+
var el = document.documentElement;
|
1533
|
+
if (el.requestFullscreen) {
|
1534
|
+
el.requestFullscreen();
|
1535
|
+
} else if (el.msRequestFullscreen) {
|
1536
|
+
el.msRequestFullscreen();
|
1537
|
+
} else if (el.mozRequestFullScreen) {
|
1538
|
+
el.mozRequestFullScreen();
|
1539
|
+
} else if (el.webkitRequestFullscreen) {
|
1540
|
+
el.webkitRequestFullscreen();
|
1541
|
+
}
|
1542
|
+
};
|
1543
|
+
|
1544
|
+
Fullscreen.prototype.exitFullscreen = function() {
|
1545
|
+
if (document.exitFullscreen) {
|
1546
|
+
document.exitFullscreen();
|
1547
|
+
} else if (document.msExitFullscreen) {
|
1548
|
+
document.msExitFullscreen();
|
1549
|
+
} else if (document.mozCancelFullScreen) {
|
1550
|
+
document.mozCancelFullScreen();
|
1551
|
+
} else if (document.webkitExitFullscreen) {
|
1552
|
+
document.webkitExitFullscreen();
|
1553
|
+
}
|
1554
|
+
};
|
1555
|
+
|
1556
|
+
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
|
1557
|
+
Fullscreen.prototype.fullScreen = function() {
|
1558
|
+
var _this = this;
|
1559
|
+
|
1560
|
+
$(document).on('fullscreenchange.lg webkitfullscreenchange.lg mozfullscreenchange.lg MSFullscreenChange.lg', function() {
|
1561
|
+
_this.core.$outer.toggleClass('lg-fullscreen-on');
|
1562
|
+
});
|
1563
|
+
|
1564
|
+
this.core.$outer.find('.lg-fullscreen').on('click.lg', function() {
|
1565
|
+
if (!document.fullscreenElement &&
|
1566
|
+
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
|
1567
|
+
_this.requestFullscreen();
|
1568
|
+
} else {
|
1569
|
+
_this.exitFullscreen();
|
1570
|
+
}
|
1571
|
+
});
|
1572
|
+
|
1573
|
+
};
|
1574
|
+
|
1575
|
+
Fullscreen.prototype.destroy = function() {
|
1576
|
+
|
1577
|
+
// exit from fullscreen if activated
|
1578
|
+
this.exitFullscreen();
|
1579
|
+
|
1580
|
+
$(document).off('fullscreenchange.lg webkitfullscreenchange.lg mozfullscreenchange.lg MSFullscreenChange.lg');
|
1581
|
+
};
|
1582
|
+
|
1583
|
+
$.fn.lightGallery.modules.fullscreen = Fullscreen;
|
1584
|
+
|
1585
|
+
})(jQuery, window, document);
|
1586
|
+
|
1587
|
+
(function($, window, document, undefined) {
|
1588
|
+
|
1589
|
+
'use strict';
|
1590
|
+
|
1591
|
+
var defaults = {
|
1592
|
+
pager: false
|
1593
|
+
};
|
1594
|
+
|
1595
|
+
var Pager = function(element) {
|
1596
|
+
|
1597
|
+
this.core = $(element).data('lightGallery');
|
1598
|
+
|
1599
|
+
this.$el = $(element);
|
1600
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
1601
|
+
if (this.core.s.pager && this.core.$items.length > 1) {
|
1602
|
+
this.init();
|
1603
|
+
}
|
1604
|
+
|
1605
|
+
return this;
|
1606
|
+
};
|
1607
|
+
|
1608
|
+
Pager.prototype.init = function() {
|
1609
|
+
var _this = this;
|
1610
|
+
var pagerList = '';
|
1611
|
+
var $pagerCont;
|
1612
|
+
var $pagerOuter;
|
1613
|
+
var timeout;
|
1614
|
+
|
1615
|
+
_this.core.$outer.find('.lg').append('<div class="lg-pager-outer"></div>');
|
1616
|
+
|
1617
|
+
if (_this.core.s.dynamic) {
|
1618
|
+
for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
|
1619
|
+
pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + _this.core.s.dynamicEl[i].thumb + '" /></div></span>';
|
1620
|
+
}
|
1621
|
+
} else {
|
1622
|
+
_this.core.$items.each(function() {
|
1623
|
+
|
1624
|
+
if (!_this.core.s.exThumbImage) {
|
1625
|
+
pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + $(this).find('img').attr('src') + '" /></div></span>';
|
1626
|
+
} else {
|
1627
|
+
pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + $(this).attr(_this.core.s.exThumbImage) + '" /></div></span>';
|
1628
|
+
}
|
1629
|
+
|
1630
|
+
});
|
1631
|
+
}
|
1632
|
+
|
1633
|
+
$pagerOuter = _this.core.$outer.find('.lg-pager-outer');
|
1634
|
+
|
1635
|
+
$pagerOuter.html(pagerList);
|
1636
|
+
|
1637
|
+
$pagerCont = _this.core.$outer.find('.lg-pager-cont');
|
1638
|
+
$pagerCont.on('click.lg touchend.lg', function() {
|
1639
|
+
var _$this = $(this);
|
1640
|
+
_this.core.index = _$this.index();
|
1641
|
+
_this.core.slide(_this.core.index, false, false);
|
1642
|
+
});
|
1643
|
+
|
1644
|
+
$pagerOuter.on('mouseover.lg', function() {
|
1645
|
+
clearTimeout(timeout);
|
1646
|
+
$pagerOuter.addClass('lg-pager-hover');
|
1647
|
+
});
|
1648
|
+
|
1649
|
+
$pagerOuter.on('mouseout.lg', function() {
|
1650
|
+
timeout = setTimeout(function() {
|
1651
|
+
$pagerOuter.removeClass('lg-pager-hover');
|
1652
|
+
});
|
1653
|
+
});
|
1654
|
+
|
1655
|
+
_this.core.$el.on('onBeforeSlide.lg.tm', function(e, prevIndex, index) {
|
1656
|
+
$pagerCont.removeClass('lg-pager-active');
|
1657
|
+
$pagerCont.eq(index).addClass('lg-pager-active');
|
1658
|
+
});
|
1659
|
+
|
1660
|
+
};
|
1661
|
+
|
1662
|
+
Pager.prototype.destroy = function() {
|
1663
|
+
|
1664
|
+
};
|
1665
|
+
|
1666
|
+
$.fn.lightGallery.modules.pager = Pager;
|
1667
|
+
|
1668
|
+
})(jQuery, window, document);
|
1669
|
+
|
1670
|
+
(function($, window, document, undefined) {
|
1671
|
+
|
1672
|
+
'use strict';
|
1673
|
+
|
1674
|
+
var defaults = {
|
1675
|
+
thumbnail: true,
|
1676
|
+
|
1677
|
+
animateThumb: true,
|
1678
|
+
currentPagerPosition: 'middle',
|
1679
|
+
|
1680
|
+
thumbWidth: 100,
|
1681
|
+
thumbContHeight: 100,
|
1682
|
+
thumbMargin: 5,
|
1683
|
+
|
1684
|
+
exThumbImage: false,
|
1685
|
+
showThumbByDefault: true,
|
1686
|
+
toogleThumb: true,
|
1687
|
+
pullCaptionUp: true,
|
1688
|
+
|
1689
|
+
enableThumbDrag: true,
|
1690
|
+
enableThumbSwipe: true,
|
1691
|
+
swipeThreshold: 50,
|
1692
|
+
|
1693
|
+
loadYoutubeThumbnail: true,
|
1694
|
+
youtubeThumbSize: 1,
|
1695
|
+
|
1696
|
+
loadVimeoThumbnail: true,
|
1697
|
+
vimeoThumbSize: 'thumbnail_small',
|
1698
|
+
|
1699
|
+
loadDailymotionThumbnail: true
|
1700
|
+
};
|
1701
|
+
|
1702
|
+
var Thumbnail = function(element) {
|
1703
|
+
|
1704
|
+
// get lightGallery core plugin data
|
1705
|
+
this.core = $(element).data('lightGallery');
|
1706
|
+
|
1707
|
+
// extend module default settings with lightGallery core settings
|
1708
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
1709
|
+
|
1710
|
+
this.$el = $(element);
|
1711
|
+
this.$thumbOuter = null;
|
1712
|
+
this.thumbOuterWidth = 0;
|
1713
|
+
this.thumbTotalWidth = (this.core.$items.length * (this.core.s.thumbWidth + this.core.s.thumbMargin));
|
1714
|
+
this.thumbIndex = this.core.index;
|
1715
|
+
|
1716
|
+
// Thumbnail animation value
|
1717
|
+
this.left = 0;
|
1718
|
+
|
1719
|
+
this.init();
|
1720
|
+
|
1721
|
+
return this;
|
1722
|
+
};
|
1723
|
+
|
1724
|
+
Thumbnail.prototype.init = function() {
|
1725
|
+
var _this = this;
|
1726
|
+
if (this.core.s.thumbnail && this.core.$items.length > 1) {
|
1727
|
+
if (this.core.s.showThumbByDefault) {
|
1728
|
+
setTimeout(function(){
|
1729
|
+
_this.core.$outer.addClass('lg-thumb-open');
|
1730
|
+
}, 700);
|
1731
|
+
}
|
1732
|
+
|
1733
|
+
if (this.core.s.pullCaptionUp) {
|
1734
|
+
this.core.$outer.addClass('lg-pull-caption-up');
|
1735
|
+
}
|
1736
|
+
|
1737
|
+
this.build();
|
1738
|
+
if (this.core.s.animateThumb) {
|
1739
|
+
if (this.core.s.enableThumbDrag && !this.core.isTouch && this.core.doCss()) {
|
1740
|
+
this.enableThumbDrag();
|
1741
|
+
}
|
1742
|
+
|
1743
|
+
if (this.core.s.enableThumbSwipe && this.core.isTouch && this.core.doCss()) {
|
1744
|
+
this.enableThumbSwipe();
|
1745
|
+
}
|
1746
|
+
|
1747
|
+
this.thumbClickable = false;
|
1748
|
+
} else {
|
1749
|
+
this.thumbClickable = true;
|
1750
|
+
}
|
1751
|
+
|
1752
|
+
this.toogle();
|
1753
|
+
this.thumbkeyPress();
|
1754
|
+
}
|
1755
|
+
};
|
1756
|
+
|
1757
|
+
Thumbnail.prototype.build = function() {
|
1758
|
+
var _this = this;
|
1759
|
+
var thumbList = '';
|
1760
|
+
var vimeoErrorThumbSize = '';
|
1761
|
+
var $thumb;
|
1762
|
+
var html = '<div class="lg-thumb-outer">' +
|
1763
|
+
'<div class="lg-thumb group">' +
|
1764
|
+
'</div>' +
|
1765
|
+
'</div>';
|
1766
|
+
|
1767
|
+
switch (this.core.s.vimeoThumbSize) {
|
1768
|
+
case 'thumbnail_large':
|
1769
|
+
vimeoErrorThumbSize = '640';
|
1770
|
+
break;
|
1771
|
+
case 'thumbnail_medium':
|
1772
|
+
vimeoErrorThumbSize = '200x150';
|
1773
|
+
break;
|
1774
|
+
case 'thumbnail_small':
|
1775
|
+
vimeoErrorThumbSize = '100x75';
|
1776
|
+
}
|
1777
|
+
|
1778
|
+
_this.core.$outer.addClass('lg-has-thumb');
|
1779
|
+
|
1780
|
+
_this.core.$outer.find('.lg').append(html);
|
1781
|
+
|
1782
|
+
_this.$thumbOuter = _this.core.$outer.find('.lg-thumb-outer');
|
1783
|
+
_this.thumbOuterWidth = _this.$thumbOuter.width();
|
1784
|
+
|
1785
|
+
if (_this.core.s.animateThumb) {
|
1786
|
+
_this.core.$outer.find('.lg-thumb').css({
|
1787
|
+
width: _this.thumbTotalWidth + 'px',
|
1788
|
+
position: 'relative'
|
1789
|
+
});
|
1790
|
+
}
|
1791
|
+
|
1792
|
+
if (this.core.s.animateThumb) {
|
1793
|
+
_this.$thumbOuter.css('height', _this.core.s.thumbContHeight + 'px');
|
1794
|
+
}
|
1795
|
+
|
1796
|
+
function getThumb(src, thumb, index) {
|
1797
|
+
var isVideo = _this.core.isVideo(src, index) || {};
|
1798
|
+
var thumbImg;
|
1799
|
+
var vimeoId = '';
|
1800
|
+
|
1801
|
+
if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) {
|
1802
|
+
if (isVideo.youtube) {
|
1803
|
+
if (_this.core.s.loadYoutubeThumbnail) {
|
1804
|
+
thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg';
|
1805
|
+
} else {
|
1806
|
+
thumbImg = thumb;
|
1807
|
+
}
|
1808
|
+
} else if (isVideo.vimeo) {
|
1809
|
+
if (_this.core.s.loadVimeoThumbnail) {
|
1810
|
+
thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
|
1811
|
+
vimeoId = isVideo.vimeo[1];
|
1812
|
+
} else {
|
1813
|
+
thumbImg = thumb;
|
1814
|
+
}
|
1815
|
+
} else if (isVideo.dailymotion) {
|
1816
|
+
if (_this.core.s.loadDailymotionThumbnail) {
|
1817
|
+
thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
|
1818
|
+
} else {
|
1819
|
+
thumbImg = thumb;
|
1820
|
+
}
|
1821
|
+
}
|
1822
|
+
} else {
|
1823
|
+
thumbImg = thumb;
|
1824
|
+
}
|
1825
|
+
|
1826
|
+
thumbList += '<div data-vimeo-id="' + vimeoId + '" class="lg-thumb-item" style="width:' + _this.core.s.thumbWidth + 'px; margin-right: ' + _this.core.s.thumbMargin + 'px"><img src="' + thumbImg + '" /></div>';
|
1827
|
+
vimeoId = '';
|
1828
|
+
}
|
1829
|
+
|
1830
|
+
if (_this.core.s.dynamic) {
|
1831
|
+
for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
|
1832
|
+
getThumb(_this.core.s.dynamicEl[i].src, _this.core.s.dynamicEl[i].thumb, i);
|
1833
|
+
}
|
1834
|
+
} else {
|
1835
|
+
_this.core.$items.each(function(i) {
|
1836
|
+
|
1837
|
+
if (!_this.core.s.exThumbImage) {
|
1838
|
+
getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i);
|
1839
|
+
} else {
|
1840
|
+
getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exThumbImage), i);
|
1841
|
+
}
|
1842
|
+
|
1843
|
+
});
|
1844
|
+
}
|
1845
|
+
|
1846
|
+
_this.core.$outer.find('.lg-thumb').html(thumbList);
|
1847
|
+
|
1848
|
+
$thumb = _this.core.$outer.find('.lg-thumb-item');
|
1849
|
+
|
1850
|
+
// Load vimeo thumbnails
|
1851
|
+
$thumb.each(function() {
|
1852
|
+
var $this = $(this);
|
1853
|
+
var vimeoVideoId = $this.attr('data-vimeo-id');
|
1854
|
+
|
1855
|
+
if (vimeoVideoId) {
|
1856
|
+
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoId + '.json?callback=?', {
|
1857
|
+
format: 'json'
|
1858
|
+
}, function(data) {
|
1859
|
+
$this.find('img').attr('src', data[0][_this.core.s.vimeoThumbSize]);
|
1860
|
+
});
|
1861
|
+
}
|
1862
|
+
});
|
1863
|
+
|
1864
|
+
// manage active class for thumbnail
|
1865
|
+
$thumb.eq(_this.core.index).addClass('active');
|
1866
|
+
_this.core.$el.on('onBeforeSlide.lg.tm', function() {
|
1867
|
+
$thumb.removeClass('active');
|
1868
|
+
$thumb.eq(_this.core.index).addClass('active');
|
1869
|
+
});
|
1870
|
+
|
1871
|
+
$thumb.on('click.lg touchend.lg', function() {
|
1872
|
+
var _$this = $(this);
|
1873
|
+
setTimeout(function() {
|
1874
|
+
|
1875
|
+
// In IE9 and bellow touch does not support
|
1876
|
+
// Go to slide if browser does not support css transitions
|
1877
|
+
if ((_this.thumbClickable && !_this.core.lgBusy) || !_this.core.doCss()) {
|
1878
|
+
_this.core.index = _$this.index();
|
1879
|
+
_this.core.slide(_this.core.index, false, true);
|
1880
|
+
}
|
1881
|
+
}, 50);
|
1882
|
+
});
|
1883
|
+
|
1884
|
+
_this.core.$el.on('onBeforeSlide.lg.tm', function() {
|
1885
|
+
_this.animateThumb(_this.core.index);
|
1886
|
+
});
|
1887
|
+
|
1888
|
+
$(window).on('resize.lg.thumb orientationchange.lg.thumb', function() {
|
1889
|
+
setTimeout(function() {
|
1890
|
+
_this.animateThumb(_this.core.index);
|
1891
|
+
_this.thumbOuterWidth = _this.$thumbOuter.width();
|
1892
|
+
}, 200);
|
1893
|
+
});
|
1894
|
+
|
1895
|
+
};
|
1896
|
+
|
1897
|
+
Thumbnail.prototype.setTranslate = function(value) {
|
1898
|
+
// jQuery supports Automatic CSS prefixing since jQuery 1.8.0
|
1899
|
+
this.core.$outer.find('.lg-thumb').css({
|
1900
|
+
transform: 'translate3d(-' + (value) + 'px, 0px, 0px)'
|
1901
|
+
});
|
1902
|
+
};
|
1903
|
+
|
1904
|
+
Thumbnail.prototype.animateThumb = function(index) {
|
1905
|
+
var $thumb = this.core.$outer.find('.lg-thumb');
|
1906
|
+
if (this.core.s.animateThumb) {
|
1907
|
+
var position;
|
1908
|
+
switch (this.core.s.currentPagerPosition) {
|
1909
|
+
case 'left':
|
1910
|
+
position = 0;
|
1911
|
+
break;
|
1912
|
+
case 'middle':
|
1913
|
+
position = (this.thumbOuterWidth / 2) - (this.core.s.thumbWidth / 2);
|
1914
|
+
break;
|
1915
|
+
case 'right':
|
1916
|
+
position = this.thumbOuterWidth - this.core.s.thumbWidth;
|
1917
|
+
}
|
1918
|
+
this.left = ((this.core.s.thumbWidth + this.core.s.thumbMargin) * index - 1) - position;
|
1919
|
+
if (this.left > (this.thumbTotalWidth - this.thumbOuterWidth)) {
|
1920
|
+
this.left = this.thumbTotalWidth - this.thumbOuterWidth;
|
1921
|
+
}
|
1922
|
+
|
1923
|
+
if (this.left < 0) {
|
1924
|
+
this.left = 0;
|
1925
|
+
}
|
1926
|
+
|
1927
|
+
if (this.core.lGalleryOn) {
|
1928
|
+
if (!$thumb.hasClass('on')) {
|
1929
|
+
this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
|
1930
|
+
}
|
1931
|
+
|
1932
|
+
if (!this.core.doCss()) {
|
1933
|
+
$thumb.animate({
|
1934
|
+
left: -this.left + 'px'
|
1935
|
+
}, this.core.s.speed);
|
1936
|
+
}
|
1937
|
+
} else {
|
1938
|
+
if (!this.core.doCss()) {
|
1939
|
+
$thumb.css('left', -this.left + 'px');
|
1940
|
+
}
|
1941
|
+
}
|
1942
|
+
|
1943
|
+
this.setTranslate(this.left);
|
1944
|
+
|
1945
|
+
}
|
1946
|
+
};
|
1947
|
+
|
1948
|
+
// Enable thumbnail dragging and swiping
|
1949
|
+
Thumbnail.prototype.enableThumbDrag = function() {
|
1950
|
+
|
1951
|
+
var _this = this;
|
1952
|
+
var startCoords = 0;
|
1953
|
+
var endCoords = 0;
|
1954
|
+
var isDraging = false;
|
1955
|
+
var isMoved = false;
|
1956
|
+
var tempLeft = 0;
|
1957
|
+
|
1958
|
+
_this.$thumbOuter.addClass('lg-grab');
|
1959
|
+
|
1960
|
+
_this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) {
|
1961
|
+
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
1962
|
+
// execute only on .lg-object
|
1963
|
+
e.preventDefault();
|
1964
|
+
startCoords = e.pageX;
|
1965
|
+
isDraging = true;
|
1966
|
+
|
1967
|
+
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
1968
|
+
_this.core.$outer.scrollLeft += 1;
|
1969
|
+
_this.core.$outer.scrollLeft -= 1;
|
1970
|
+
|
1971
|
+
// *
|
1972
|
+
_this.thumbClickable = false;
|
1973
|
+
_this.$thumbOuter.removeClass('lg-grab').addClass('lg-grabbing');
|
1974
|
+
}
|
1975
|
+
});
|
1976
|
+
|
1977
|
+
$(window).on('mousemove.lg.thumb', function(e) {
|
1978
|
+
if (isDraging) {
|
1979
|
+
tempLeft = _this.left;
|
1980
|
+
isMoved = true;
|
1981
|
+
endCoords = e.pageX;
|
1982
|
+
|
1983
|
+
_this.$thumbOuter.addClass('lg-dragging');
|
1984
|
+
|
1985
|
+
tempLeft = tempLeft - (endCoords - startCoords);
|
1986
|
+
|
1987
|
+
if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
|
1988
|
+
tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
|
1989
|
+
}
|
1990
|
+
|
1991
|
+
if (tempLeft < 0) {
|
1992
|
+
tempLeft = 0;
|
1993
|
+
}
|
1994
|
+
|
1995
|
+
// move current slide
|
1996
|
+
_this.setTranslate(tempLeft);
|
1997
|
+
|
1998
|
+
}
|
1999
|
+
});
|
2000
|
+
|
2001
|
+
$(window).on('mouseup.lg.thumb', function() {
|
2002
|
+
if (isMoved) {
|
2003
|
+
isMoved = false;
|
2004
|
+
_this.$thumbOuter.removeClass('lg-dragging');
|
2005
|
+
|
2006
|
+
_this.left = tempLeft;
|
2007
|
+
|
2008
|
+
if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
|
2009
|
+
_this.thumbClickable = true;
|
2010
|
+
}
|
2011
|
+
|
2012
|
+
} else {
|
2013
|
+
_this.thumbClickable = true;
|
2014
|
+
}
|
2015
|
+
|
2016
|
+
if (isDraging) {
|
2017
|
+
isDraging = false;
|
2018
|
+
_this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
|
2019
|
+
}
|
2020
|
+
});
|
2021
|
+
|
2022
|
+
};
|
2023
|
+
|
2024
|
+
Thumbnail.prototype.enableThumbSwipe = function() {
|
2025
|
+
var _this = this;
|
2026
|
+
var startCoords = 0;
|
2027
|
+
var endCoords = 0;
|
2028
|
+
var isMoved = false;
|
2029
|
+
var tempLeft = 0;
|
2030
|
+
|
2031
|
+
_this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) {
|
2032
|
+
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
2033
|
+
e.preventDefault();
|
2034
|
+
startCoords = e.originalEvent.targetTouches[0].pageX;
|
2035
|
+
_this.thumbClickable = false;
|
2036
|
+
}
|
2037
|
+
});
|
2038
|
+
|
2039
|
+
_this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) {
|
2040
|
+
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
2041
|
+
e.preventDefault();
|
2042
|
+
endCoords = e.originalEvent.targetTouches[0].pageX;
|
2043
|
+
isMoved = true;
|
2044
|
+
|
2045
|
+
_this.$thumbOuter.addClass('lg-dragging');
|
2046
|
+
|
2047
|
+
tempLeft = _this.left;
|
2048
|
+
|
2049
|
+
tempLeft = tempLeft - (endCoords - startCoords);
|
2050
|
+
|
2051
|
+
if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
|
2052
|
+
tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
|
2053
|
+
}
|
2054
|
+
|
2055
|
+
if (tempLeft < 0) {
|
2056
|
+
tempLeft = 0;
|
2057
|
+
}
|
2058
|
+
|
2059
|
+
// move current slide
|
2060
|
+
_this.setTranslate(tempLeft);
|
2061
|
+
|
2062
|
+
}
|
2063
|
+
});
|
2064
|
+
|
2065
|
+
_this.core.$outer.find('.lg-thumb').on('touchend.lg', function() {
|
2066
|
+
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
2067
|
+
|
2068
|
+
if (isMoved) {
|
2069
|
+
isMoved = false;
|
2070
|
+
_this.$thumbOuter.removeClass('lg-dragging');
|
2071
|
+
if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
|
2072
|
+
_this.thumbClickable = true;
|
2073
|
+
}
|
2074
|
+
|
2075
|
+
_this.left = tempLeft;
|
2076
|
+
} else {
|
2077
|
+
_this.thumbClickable = true;
|
2078
|
+
}
|
2079
|
+
} else {
|
2080
|
+
_this.thumbClickable = true;
|
2081
|
+
}
|
2082
|
+
});
|
2083
|
+
|
2084
|
+
};
|
2085
|
+
|
2086
|
+
Thumbnail.prototype.toogle = function() {
|
2087
|
+
var _this = this;
|
2088
|
+
if (_this.core.s.toogleThumb) {
|
2089
|
+
_this.core.$outer.addClass('lg-can-toggle');
|
2090
|
+
_this.$thumbOuter.append('<span class="lg-toogle-thumb lg-icon"></span>');
|
2091
|
+
_this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() {
|
2092
|
+
_this.core.$outer.toggleClass('lg-thumb-open');
|
2093
|
+
});
|
2094
|
+
}
|
2095
|
+
};
|
2096
|
+
|
2097
|
+
Thumbnail.prototype.thumbkeyPress = function() {
|
2098
|
+
var _this = this;
|
2099
|
+
$(window).on('keydown.lg.thumb', function(e) {
|
2100
|
+
if (e.keyCode === 38) {
|
2101
|
+
e.preventDefault();
|
2102
|
+
_this.core.$outer.addClass('lg-thumb-open');
|
2103
|
+
} else if (e.keyCode === 40) {
|
2104
|
+
e.preventDefault();
|
2105
|
+
_this.core.$outer.removeClass('lg-thumb-open');
|
2106
|
+
}
|
2107
|
+
});
|
2108
|
+
};
|
2109
|
+
|
2110
|
+
Thumbnail.prototype.destroy = function() {
|
2111
|
+
if (this.core.s.thumbnail && this.core.$items.length > 1) {
|
2112
|
+
$(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb');
|
2113
|
+
this.$thumbOuter.remove();
|
2114
|
+
this.core.$outer.removeClass('lg-has-thumb');
|
2115
|
+
}
|
2116
|
+
};
|
2117
|
+
|
2118
|
+
$.fn.lightGallery.modules.Thumbnail = Thumbnail;
|
2119
|
+
|
2120
|
+
})(jQuery, window, document);
|
2121
|
+
|
2122
|
+
(function($, window, document, undefined) {
|
2123
|
+
|
2124
|
+
'use strict';
|
2125
|
+
|
2126
|
+
var defaults = {
|
2127
|
+
videoMaxWidth: '855px',
|
2128
|
+
youtubePlayerParams: false,
|
2129
|
+
vimeoPlayerParams: false,
|
2130
|
+
dailymotionPlayerParams: false,
|
2131
|
+
videojs: false
|
2132
|
+
};
|
2133
|
+
|
2134
|
+
var Video = function(element) {
|
2135
|
+
|
2136
|
+
this.core = $(element).data('lightGallery');
|
2137
|
+
|
2138
|
+
this.$el = $(element);
|
2139
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
2140
|
+
this.videoLoaded = false;
|
2141
|
+
|
2142
|
+
this.init();
|
2143
|
+
|
2144
|
+
return this;
|
2145
|
+
};
|
2146
|
+
|
2147
|
+
Video.prototype.init = function() {
|
2148
|
+
var _this = this;
|
2149
|
+
|
2150
|
+
// Event triggered when video url found without poster
|
2151
|
+
_this.core.$el.on('hasVideo.lg.tm', function(event, index, src, html) {
|
2152
|
+
_this.core.$slide.eq(index).find('.lg-video').append(_this.loadVideo(src, 'lg-object', true, index, html));
|
2153
|
+
if (html) {
|
2154
|
+
if (_this.core.s.videojs) {
|
2155
|
+
try {
|
2156
|
+
videojs(_this.core.$slide.eq(index).find('.lg-html5').get(0), {}, function() {
|
2157
|
+
if (!_this.videoLoaded) {
|
2158
|
+
this.play();
|
2159
|
+
}
|
2160
|
+
});
|
2161
|
+
} catch (e) {
|
2162
|
+
console.error('Make sure you have included videojs');
|
2163
|
+
}
|
2164
|
+
} else {
|
2165
|
+
_this.core.$slide.eq(index).find('.lg-html5').get(0).play();
|
2166
|
+
}
|
2167
|
+
}
|
2168
|
+
});
|
2169
|
+
|
2170
|
+
// Set max width for video
|
2171
|
+
_this.core.$el.on('onAferAppendSlide.lg.tm', function(event, index) {
|
2172
|
+
_this.core.$slide.eq(index).find('.lg-video-cont').css('max-width', _this.core.s.videoMaxWidth);
|
2173
|
+
_this.videoLoaded = true;
|
2174
|
+
});
|
2175
|
+
|
2176
|
+
var loadOnClick = function($el) {
|
2177
|
+
// check slide has poster
|
2178
|
+
if ($el.find('.lg-object').hasClass('lg-has-poster') && $el.find('.lg-object').is(':visible')) {
|
2179
|
+
|
2180
|
+
// check already video element present
|
2181
|
+
if (!$el.hasClass('lg-has-video')) {
|
2182
|
+
|
2183
|
+
$el.addClass('lg-video-playing lg-has-video');
|
2184
|
+
|
2185
|
+
var _src;
|
2186
|
+
var _html;
|
2187
|
+
var _loadVideo = function(_src, _html) {
|
2188
|
+
|
2189
|
+
$el.find('.lg-video').append(_this.loadVideo(_src, '', false, _this.core.index, _html));
|
2190
|
+
|
2191
|
+
if (_html) {
|
2192
|
+
if (_this.core.s.videojs) {
|
2193
|
+
try {
|
2194
|
+
videojs(_this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0), {}, function() {
|
2195
|
+
this.play();
|
2196
|
+
});
|
2197
|
+
} catch (e) {
|
2198
|
+
console.error('Make sure you have included videojs');
|
2199
|
+
}
|
2200
|
+
} else {
|
2201
|
+
_this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0).play();
|
2202
|
+
}
|
2203
|
+
}
|
2204
|
+
|
2205
|
+
};
|
2206
|
+
|
2207
|
+
if (_this.core.s.dynamic) {
|
2208
|
+
|
2209
|
+
_src = _this.core.s.dynamicEl[_this.core.index].src;
|
2210
|
+
_html = _this.core.s.dynamicEl[_this.core.index].html;
|
2211
|
+
|
2212
|
+
_loadVideo(_src, _html);
|
2213
|
+
|
2214
|
+
} else {
|
2215
|
+
|
2216
|
+
_src = _this.core.$items.eq(_this.core.index).attr('href') || _this.core.$items.eq(_this.core.index).attr('data-src');
|
2217
|
+
_html = _this.core.$items.eq(_this.core.index).attr('data-html');
|
2218
|
+
|
2219
|
+
_loadVideo(_src, _html);
|
2220
|
+
|
2221
|
+
}
|
2222
|
+
|
2223
|
+
var $tempImg = $el.find('.lg-object');
|
2224
|
+
$el.find('.lg-video').append($tempImg);
|
2225
|
+
|
2226
|
+
// @todo loading icon for html5 videos also
|
2227
|
+
// for showing the loading indicator while loading video
|
2228
|
+
if (!$el.find('.lg-video-object').hasClass('lg-html5')) {
|
2229
|
+
$el.removeClass('lg-complete');
|
2230
|
+
$el.find('.lg-video-object').on('load.lg error.lg', function() {
|
2231
|
+
$el.addClass('lg-complete');
|
2232
|
+
});
|
2233
|
+
}
|
2234
|
+
|
2235
|
+
} else {
|
2236
|
+
|
2237
|
+
var youtubePlayer = $el.find('.lg-youtube').get(0);
|
2238
|
+
var vimeoPlayer = $el.find('.lg-vimeo').get(0);
|
2239
|
+
var dailymotionPlayer = $el.find('.lg-dailymotion').get(0);
|
2240
|
+
var html5Player = $el.find('.lg-html5').get(0);
|
2241
|
+
if (youtubePlayer) {
|
2242
|
+
youtubePlayer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
2243
|
+
} else if (vimeoPlayer) {
|
2244
|
+
try {
|
2245
|
+
$f(vimeoPlayer).api('play');
|
2246
|
+
} catch (e) {
|
2247
|
+
console.error('Make sure you have included froogaloop2 js');
|
2248
|
+
}
|
2249
|
+
} else if (dailymotionPlayer) {
|
2250
|
+
dailymotionPlayer.contentWindow.postMessage('play', '*');
|
2251
|
+
|
2252
|
+
} else if (html5Player) {
|
2253
|
+
if (_this.core.s.videojs) {
|
2254
|
+
try {
|
2255
|
+
videojs(html5Player).play();
|
2256
|
+
} catch (e) {
|
2257
|
+
console.error('Make sure you have included videojs');
|
2258
|
+
}
|
2259
|
+
} else {
|
2260
|
+
html5Player.play();
|
2261
|
+
}
|
2262
|
+
}
|
2263
|
+
|
2264
|
+
$el.addClass('lg-video-palying');
|
2265
|
+
|
2266
|
+
}
|
2267
|
+
}
|
2268
|
+
};
|
2269
|
+
|
2270
|
+
if (_this.core.doCss() && _this.core.$items.length > 1 && ((_this.core.s.enableSwipe && _this.core.isTouch) || (_this.core.s.enableDrag && !_this.core.isTouch))) {
|
2271
|
+
_this.core.$el.on('onSlideClick.lg.tm', function() {
|
2272
|
+
var $el = _this.core.$slide.eq(_this.core.index);
|
2273
|
+
loadOnClick($el);
|
2274
|
+
});
|
2275
|
+
} else {
|
2276
|
+
|
2277
|
+
// For IE 9 and bellow
|
2278
|
+
_this.core.$slide.on('click.lg', function() {
|
2279
|
+
loadOnClick($(this));
|
2280
|
+
});
|
2281
|
+
}
|
2282
|
+
|
2283
|
+
_this.core.$el.on('onBeforeSlide.lg.tm', function(event, prevIndex, index) {
|
2284
|
+
|
2285
|
+
var $videoSlide = _this.core.$slide.eq(prevIndex);
|
2286
|
+
var youtubePlayer = $videoSlide.find('.lg-youtube').get(0);
|
2287
|
+
var vimeoPlayer = $videoSlide.find('.lg-vimeo').get(0);
|
2288
|
+
var dailymotionPlayer = $videoSlide.find('.lg-dailymotion').get(0);
|
2289
|
+
var html5Player = $videoSlide.find('.lg-html5').get(0);
|
2290
|
+
if (youtubePlayer) {
|
2291
|
+
youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
2292
|
+
} else if (vimeoPlayer) {
|
2293
|
+
try {
|
2294
|
+
$f(vimeoPlayer).api('pause');
|
2295
|
+
} catch (e) {
|
2296
|
+
console.error('Make sure you have included froogaloop2 js');
|
2297
|
+
}
|
2298
|
+
} else if (dailymotionPlayer) {
|
2299
|
+
dailymotionPlayer.contentWindow.postMessage('pause', '*');
|
2300
|
+
|
2301
|
+
} else if (html5Player) {
|
2302
|
+
if (_this.core.s.videojs) {
|
2303
|
+
try {
|
2304
|
+
videojs(html5Player).pause();
|
2305
|
+
} catch (e) {
|
2306
|
+
console.error('Make sure you have included videojs');
|
2307
|
+
}
|
2308
|
+
} else {
|
2309
|
+
html5Player.pause();
|
2310
|
+
}
|
2311
|
+
}
|
2312
|
+
|
2313
|
+
var _src;
|
2314
|
+
if (_this.core.s.dynamic) {
|
2315
|
+
_src = _this.core.s.dynamicEl[index].src;
|
2316
|
+
} else {
|
2317
|
+
_src = _this.core.$items.eq(index).attr('href') || _this.core.$items.eq(index).attr('data-src');
|
2318
|
+
|
2319
|
+
}
|
2320
|
+
|
2321
|
+
var _isVideo = _this.core.isVideo(_src, index) || {};
|
2322
|
+
if (_isVideo.youtube || _isVideo.vimeo || _isVideo.dailymotion) {
|
2323
|
+
_this.core.$outer.addClass('lg-hide-download');
|
2324
|
+
}
|
2325
|
+
|
2326
|
+
//$videoSlide.addClass('lg-complete');
|
2327
|
+
|
2328
|
+
});
|
2329
|
+
|
2330
|
+
_this.core.$el.on('onAfterSlide.lg.tm', function(event, prevIndex) {
|
2331
|
+
_this.core.$slide.eq(prevIndex).removeClass('lg-video-palying');
|
2332
|
+
});
|
2333
|
+
};
|
2334
|
+
|
2335
|
+
Video.prototype.loadVideo = function(src, addClass, noposter, index, html) {
|
2336
|
+
var video = '';
|
2337
|
+
var autoplay = 1;
|
2338
|
+
var a = '';
|
2339
|
+
var isVideo = this.core.isVideo(src, index) || {};
|
2340
|
+
|
2341
|
+
// Enable autoplay for first video if poster doesn't exist
|
2342
|
+
if (noposter) {
|
2343
|
+
if (this.videoLoaded) {
|
2344
|
+
autoplay = 0;
|
2345
|
+
} else {
|
2346
|
+
autoplay = 1;
|
2347
|
+
}
|
2348
|
+
}
|
2349
|
+
|
2350
|
+
if (isVideo.youtube) {
|
2351
|
+
|
2352
|
+
a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
|
2353
|
+
if (this.core.s.youtubePlayerParams) {
|
2354
|
+
a = a + '&' + $.param(this.core.s.youtubePlayerParams);
|
2355
|
+
}
|
2356
|
+
|
2357
|
+
video = '<iframe class="lg-video-object lg-youtube ' + addClass + '" width="560" height="315" src="//www.youtube.com/embed/' + isVideo.youtube[1] + a + '" frameborder="0" allowfullscreen></iframe>';
|
2358
|
+
|
2359
|
+
} else if (isVideo.vimeo) {
|
2360
|
+
|
2361
|
+
a = '?autoplay=' + autoplay + '&api=1';
|
2362
|
+
if (this.core.s.vimeoPlayerParams) {
|
2363
|
+
a = a + '&' + $.param(this.core.s.vimeoPlayerParams);
|
2364
|
+
}
|
2365
|
+
|
2366
|
+
video = '<iframe class="lg-video-object lg-vimeo ' + addClass + '" width="560" height="315" src="//player.vimeo.com/video/' + isVideo.vimeo[1] + a + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
|
2367
|
+
|
2368
|
+
} else if (isVideo.dailymotion) {
|
2369
|
+
|
2370
|
+
a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
|
2371
|
+
if (this.core.s.dailymotionPlayerParams) {
|
2372
|
+
a = a + '&' + $.param(this.core.s.dailymotionPlayerParams);
|
2373
|
+
}
|
2374
|
+
|
2375
|
+
video = '<iframe class="lg-video-object lg-dailymotion ' + addClass + '" width="560" height="315" src="//www.dailymotion.com/embed/video/' + isVideo.dailymotion[1] + a + '" frameborder="0" allowfullscreen></iframe>';
|
2376
|
+
|
2377
|
+
} else if (isVideo.html5) {
|
2378
|
+
var fL = html.substring(0, 1);
|
2379
|
+
if (fL === '.' || fL === '#') {
|
2380
|
+
html = $(html).html();
|
2381
|
+
}
|
2382
|
+
|
2383
|
+
video = html;
|
2384
|
+
}
|
2385
|
+
|
2386
|
+
return video;
|
2387
|
+
};
|
2388
|
+
|
2389
|
+
Video.prototype.destroy = function() {
|
2390
|
+
this.videoLoaded = false;
|
2391
|
+
};
|
2392
|
+
|
2393
|
+
$.fn.lightGallery.modules.video = Video;
|
2394
|
+
|
2395
|
+
})(jQuery, window, document);
|
2396
|
+
|
2397
|
+
(function($, window, document, undefined) {
|
2398
|
+
|
2399
|
+
'use strict';
|
2400
|
+
|
2401
|
+
var defaults = {
|
2402
|
+
scale: 1,
|
2403
|
+
zoom: true,
|
2404
|
+
enableZoomAfter: 300
|
2405
|
+
};
|
2406
|
+
|
2407
|
+
var Zoom = function(element) {
|
2408
|
+
|
2409
|
+
this.core = $(element).data('lightGallery');
|
2410
|
+
|
2411
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
2412
|
+
|
2413
|
+
if (this.core.s.zoom && this.core.doCss()) {
|
2414
|
+
this.init();
|
2415
|
+
|
2416
|
+
// Store the zoomable timeout value just to clear it while closing
|
2417
|
+
this.zoomabletimeout = false;
|
2418
|
+
|
2419
|
+
// Set the initial value center
|
2420
|
+
this.pageX = $(window).width() / 2;
|
2421
|
+
this.pageY = ($(window).height() / 2) + $(window).scrollTop();
|
2422
|
+
}
|
2423
|
+
|
2424
|
+
return this;
|
2425
|
+
};
|
2426
|
+
|
2427
|
+
Zoom.prototype.init = function() {
|
2428
|
+
|
2429
|
+
var _this = this;
|
2430
|
+
var zoomIcons = '<span id="lg-zoom-in" class="lg-icon"></span><span id="lg-zoom-out" class="lg-icon"></span>';
|
2431
|
+
|
2432
|
+
this.core.$outer.find('.lg-toolbar').append(zoomIcons);
|
2433
|
+
|
2434
|
+
// Add zoomable class
|
2435
|
+
_this.core.$el.on('onSlideItemLoad.lg.tm.zoom', function(event, index, delay) {
|
2436
|
+
|
2437
|
+
// delay will be 0 except first time
|
2438
|
+
var _speed = _this.core.s.enableZoomAfter + delay;
|
2439
|
+
|
2440
|
+
// set _speed value 0 if gallery opened from direct url and if it is first slide
|
2441
|
+
if ($('body').hasClass('lg-from-hash') && delay) {
|
2442
|
+
|
2443
|
+
// will execute only once
|
2444
|
+
_speed = 0;
|
2445
|
+
} else {
|
2446
|
+
|
2447
|
+
// Remove lg-from-hash to enable starting animation.
|
2448
|
+
$('body').removeClass('lg-from-hash');
|
2449
|
+
}
|
2450
|
+
|
2451
|
+
_this.zoomabletimeout = setTimeout(function() {
|
2452
|
+
_this.core.$slide.eq(index).addClass('lg-zoomable');
|
2453
|
+
}, _speed + 30);
|
2454
|
+
});
|
2455
|
+
|
2456
|
+
var scale = 1;
|
2457
|
+
/**
|
2458
|
+
* @desc Image zoom
|
2459
|
+
* Translate the wrap and scale the image to get better user experience
|
2460
|
+
*
|
2461
|
+
* @param {String} scaleVal - Zoom decrement/increment value
|
2462
|
+
*/
|
2463
|
+
var zoom = function(scaleVal) {
|
2464
|
+
|
2465
|
+
var $image = _this.core.$outer.find('.lg-current .lg-image');
|
2466
|
+
var _x;
|
2467
|
+
var _y;
|
2468
|
+
|
2469
|
+
// Find offset manually to avoid issue after zoom
|
2470
|
+
var offsetX = ($(window).width() - $image.width()) / 2;
|
2471
|
+
var offsetY = (($(window).height() - $image.height()) / 2) + $(window).scrollTop();
|
2472
|
+
|
2473
|
+
_x = _this.pageX - offsetX;
|
2474
|
+
_y = _this.pageY - offsetY;
|
2475
|
+
|
2476
|
+
var x = (scaleVal - 1) * (_x);
|
2477
|
+
var y = (scaleVal - 1) * (_y);
|
2478
|
+
|
2479
|
+
$image.css('transform', 'scale3d(' + scaleVal + ', ' + scaleVal + ', 1)').attr('data-scale', scaleVal);
|
2480
|
+
|
2481
|
+
$image.parent().css('transform', 'translate3d(-' + x + 'px, -' + y + 'px, 0)').attr('data-x', x).attr('data-y', y);
|
2482
|
+
};
|
2483
|
+
|
2484
|
+
var callScale = function() {
|
2485
|
+
if (scale > 1) {
|
2486
|
+
_this.core.$outer.addClass('lg-zoomed');
|
2487
|
+
} else {
|
2488
|
+
_this.resetZoom();
|
2489
|
+
}
|
2490
|
+
|
2491
|
+
if (scale < 1) {
|
2492
|
+
scale = 1;
|
2493
|
+
}
|
2494
|
+
|
2495
|
+
zoom(scale);
|
2496
|
+
};
|
2497
|
+
|
2498
|
+
var actualSize = function(event, $image, index) {
|
2499
|
+
var w = $image.width();
|
2500
|
+
var nw;
|
2501
|
+
if (_this.core.s.dynamic) {
|
2502
|
+
nw = _this.core.s.dynamicEl[index].width || $image[0].naturalWidth || w;
|
2503
|
+
} else {
|
2504
|
+
nw = _this.core.$items.eq(index).attr('data-width') || $image[0].naturalWidth || w;
|
2505
|
+
}
|
2506
|
+
|
2507
|
+
var _scale;
|
2508
|
+
|
2509
|
+
if (_this.core.$outer.hasClass('lg-zoomed')) {
|
2510
|
+
scale = 1;
|
2511
|
+
} else {
|
2512
|
+
if (nw > w) {
|
2513
|
+
_scale = nw / w;
|
2514
|
+
scale = _scale || 2;
|
2515
|
+
}
|
2516
|
+
}
|
2517
|
+
|
2518
|
+
_this.pageX = event.pageX || event.originalEvent.targetTouches[0].pageX;
|
2519
|
+
_this.pageY = event.pageY || event.originalEvent.targetTouches[0].pageY;
|
2520
|
+
callScale();
|
2521
|
+
setTimeout(function() {
|
2522
|
+
_this.core.$outer.removeClass('lg-grabbing').addClass('lg-grab');
|
2523
|
+
}, 10);
|
2524
|
+
};
|
2525
|
+
|
2526
|
+
var tapped = false;
|
2527
|
+
|
2528
|
+
// event triggered after appending slide content
|
2529
|
+
_this.core.$el.on('onAferAppendSlide.lg.tm.zoom', function(event, index) {
|
2530
|
+
|
2531
|
+
// Get the current element
|
2532
|
+
var $image = _this.core.$slide.eq(index).find('.lg-image');
|
2533
|
+
|
2534
|
+
$image.on('dblclick', function(event) {
|
2535
|
+
actualSize(event, $image, index);
|
2536
|
+
});
|
2537
|
+
|
2538
|
+
$image.on('touchstart', function(event) {
|
2539
|
+
if (!tapped) {
|
2540
|
+
tapped = setTimeout(function() {
|
2541
|
+
tapped = null;
|
2542
|
+
}, 300);
|
2543
|
+
} else {
|
2544
|
+
clearTimeout(tapped);
|
2545
|
+
tapped = null;
|
2546
|
+
actualSize(event, $image, index);
|
2547
|
+
}
|
2548
|
+
|
2549
|
+
event.preventDefault();
|
2550
|
+
});
|
2551
|
+
|
2552
|
+
});
|
2553
|
+
|
2554
|
+
// Update zoom on resize and orientationchange
|
2555
|
+
$(window).on('resize.lg.zoom scroll.lg.zoom orientationchange.lg.zoom', function() {
|
2556
|
+
_this.pageX = $(window).width() / 2;
|
2557
|
+
_this.pageY = ($(window).height() / 2) + $(window).scrollTop();
|
2558
|
+
zoom(scale);
|
2559
|
+
});
|
2560
|
+
|
2561
|
+
$('#lg-zoom-out').on('click.lg', function() {
|
2562
|
+
if (_this.core.$outer.find('.lg-current .lg-image').length) {
|
2563
|
+
scale -= _this.core.s.scale;
|
2564
|
+
callScale();
|
2565
|
+
}
|
2566
|
+
});
|
2567
|
+
|
2568
|
+
$('#lg-zoom-in').on('click.lg', function() {
|
2569
|
+
if (_this.core.$outer.find('.lg-current .lg-image').length) {
|
2570
|
+
scale += _this.core.s.scale;
|
2571
|
+
callScale();
|
2572
|
+
}
|
2573
|
+
});
|
2574
|
+
|
2575
|
+
// Reset zoom on slide change
|
2576
|
+
_this.core.$el.on('onBeforeSlide.lg.tm', function() {
|
2577
|
+
scale = 1;
|
2578
|
+
_this.resetZoom();
|
2579
|
+
});
|
2580
|
+
|
2581
|
+
// Drag option after zoom
|
2582
|
+
if (!_this.core.isTouch) {
|
2583
|
+
_this.zoomDrag();
|
2584
|
+
}
|
2585
|
+
|
2586
|
+
if (_this.core.isTouch) {
|
2587
|
+
_this.zoomSwipe();
|
2588
|
+
}
|
2589
|
+
|
2590
|
+
};
|
2591
|
+
|
2592
|
+
// Reset zoom effect
|
2593
|
+
Zoom.prototype.resetZoom = function() {
|
2594
|
+
this.core.$outer.removeClass('lg-zoomed');
|
2595
|
+
this.core.$slide.find('.lg-img-wrap').removeAttr('style data-x data-y');
|
2596
|
+
this.core.$slide.find('.lg-image').removeAttr('style data-scale');
|
2597
|
+
|
2598
|
+
// Reset pagx pagy values to center
|
2599
|
+
this.pageX = $(window).width() / 2;
|
2600
|
+
this.pageY = ($(window).height() / 2) + $(window).scrollTop();
|
2601
|
+
};
|
2602
|
+
|
2603
|
+
Zoom.prototype.zoomSwipe = function() {
|
2604
|
+
var _this = this;
|
2605
|
+
var startCoords = {};
|
2606
|
+
var endCoords = {};
|
2607
|
+
var isMoved = false;
|
2608
|
+
|
2609
|
+
// Allow x direction drag
|
2610
|
+
var allowX = false;
|
2611
|
+
|
2612
|
+
// Allow Y direction drag
|
2613
|
+
var allowY = false;
|
2614
|
+
|
2615
|
+
_this.core.$slide.on('touchstart.lg', function(e) {
|
2616
|
+
|
2617
|
+
if (_this.core.$outer.hasClass('lg-zoomed')) {
|
2618
|
+
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
|
2619
|
+
|
2620
|
+
allowY = $image.outerHeight() * $image.attr('data-scale') > _this.core.$outer.find('.lg').height();
|
2621
|
+
allowX = $image.outerWidth() * $image.attr('data-scale') > _this.core.$outer.find('.lg').width();
|
2622
|
+
if ((allowX || allowY)) {
|
2623
|
+
e.preventDefault();
|
2624
|
+
startCoords = {
|
2625
|
+
x: e.originalEvent.targetTouches[0].pageX,
|
2626
|
+
y: e.originalEvent.targetTouches[0].pageY
|
2627
|
+
};
|
2628
|
+
}
|
2629
|
+
}
|
2630
|
+
|
2631
|
+
});
|
2632
|
+
|
2633
|
+
_this.core.$slide.on('touchmove.lg', function(e) {
|
2634
|
+
|
2635
|
+
if (_this.core.$outer.hasClass('lg-zoomed')) {
|
2636
|
+
|
2637
|
+
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
|
2638
|
+
var distanceX;
|
2639
|
+
var distanceY;
|
2640
|
+
|
2641
|
+
e.preventDefault();
|
2642
|
+
isMoved = true;
|
2643
|
+
|
2644
|
+
endCoords = {
|
2645
|
+
x: e.originalEvent.targetTouches[0].pageX,
|
2646
|
+
y: e.originalEvent.targetTouches[0].pageY
|
2647
|
+
};
|
2648
|
+
|
2649
|
+
// reset opacity and transition duration
|
2650
|
+
_this.core.$outer.addClass('lg-zoom-dragging');
|
2651
|
+
|
2652
|
+
if (allowY) {
|
2653
|
+
distanceY = (-Math.abs(_$el.attr('data-y'))) + (endCoords.y - startCoords.y);
|
2654
|
+
} else {
|
2655
|
+
distanceY = -Math.abs(_$el.attr('data-y'));
|
2656
|
+
}
|
2657
|
+
|
2658
|
+
if (allowX) {
|
2659
|
+
distanceX = (-Math.abs(_$el.attr('data-x'))) + (endCoords.x - startCoords.x);
|
2660
|
+
} else {
|
2661
|
+
distanceX = -Math.abs(_$el.attr('data-x'));
|
2662
|
+
}
|
2663
|
+
|
2664
|
+
if ((Math.abs(endCoords.x - startCoords.x) > 15) || (Math.abs(endCoords.y - startCoords.y) > 15)) {
|
2665
|
+
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
|
2666
|
+
}
|
2667
|
+
|
2668
|
+
}
|
2669
|
+
|
2670
|
+
});
|
2671
|
+
|
2672
|
+
_this.core.$slide.on('touchend.lg', function() {
|
2673
|
+
if (_this.core.$outer.hasClass('lg-zoomed')) {
|
2674
|
+
if (isMoved) {
|
2675
|
+
isMoved = false;
|
2676
|
+
_this.core.$outer.removeClass('lg-zoom-dragging');
|
2677
|
+
_this.touchendZoom(startCoords, endCoords, allowX, allowY);
|
2678
|
+
|
2679
|
+
}
|
2680
|
+
}
|
2681
|
+
});
|
2682
|
+
|
2683
|
+
};
|
2684
|
+
|
2685
|
+
Zoom.prototype.zoomDrag = function() {
|
2686
|
+
|
2687
|
+
var _this = this;
|
2688
|
+
var startCoords = {};
|
2689
|
+
var endCoords = {};
|
2690
|
+
var isDraging = false;
|
2691
|
+
var isMoved = false;
|
2692
|
+
|
2693
|
+
// Allow x direction drag
|
2694
|
+
var allowX = false;
|
2695
|
+
|
2696
|
+
// Allow Y direction drag
|
2697
|
+
var allowY = false;
|
2698
|
+
|
2699
|
+
_this.core.$slide.on('mousedown.lg.zoom', function(e) {
|
2700
|
+
|
2701
|
+
// execute only on .lg-object
|
2702
|
+
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
|
2703
|
+
|
2704
|
+
allowY = $image.outerHeight() * $image.attr('data-scale') > _this.core.$outer.find('.lg').height();
|
2705
|
+
allowX = $image.outerWidth() * $image.attr('data-scale') > _this.core.$outer.find('.lg').width();
|
2706
|
+
|
2707
|
+
if (_this.core.$outer.hasClass('lg-zoomed')) {
|
2708
|
+
if ($(e.target).hasClass('lg-object') && (allowX || allowY)) {
|
2709
|
+
e.preventDefault();
|
2710
|
+
startCoords = {
|
2711
|
+
x: e.pageX,
|
2712
|
+
y: e.pageY
|
2713
|
+
};
|
2714
|
+
|
2715
|
+
isDraging = true;
|
2716
|
+
|
2717
|
+
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
2718
|
+
_this.core.$outer.scrollLeft += 1;
|
2719
|
+
_this.core.$outer.scrollLeft -= 1;
|
2720
|
+
|
2721
|
+
_this.core.$outer.removeClass('lg-grab').addClass('lg-grabbing');
|
2722
|
+
}
|
2723
|
+
}
|
2724
|
+
});
|
2725
|
+
|
2726
|
+
$(window).on('mousemove.lg.zoom', function(e) {
|
2727
|
+
if (isDraging) {
|
2728
|
+
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
|
2729
|
+
var distanceX;
|
2730
|
+
var distanceY;
|
2731
|
+
|
2732
|
+
isMoved = true;
|
2733
|
+
endCoords = {
|
2734
|
+
x: e.pageX,
|
2735
|
+
y: e.pageY
|
2736
|
+
};
|
2737
|
+
|
2738
|
+
// reset opacity and transition duration
|
2739
|
+
_this.core.$outer.addClass('lg-zoom-dragging');
|
2740
|
+
|
2741
|
+
if (allowY) {
|
2742
|
+
distanceY = (-Math.abs(_$el.attr('data-y'))) + (endCoords.y - startCoords.y);
|
2743
|
+
} else {
|
2744
|
+
distanceY = -Math.abs(_$el.attr('data-y'));
|
2745
|
+
}
|
2746
|
+
|
2747
|
+
if (allowX) {
|
2748
|
+
distanceX = (-Math.abs(_$el.attr('data-x'))) + (endCoords.x - startCoords.x);
|
2749
|
+
} else {
|
2750
|
+
distanceX = -Math.abs(_$el.attr('data-x'));
|
2751
|
+
}
|
2752
|
+
|
2753
|
+
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
|
2754
|
+
}
|
2755
|
+
});
|
2756
|
+
|
2757
|
+
$(window).on('mouseup.lg.zoom', function(e) {
|
2758
|
+
|
2759
|
+
if (isDraging) {
|
2760
|
+
isDraging = false;
|
2761
|
+
_this.core.$outer.removeClass('lg-zoom-dragging');
|
2762
|
+
|
2763
|
+
// Fix for chrome mouse move on click
|
2764
|
+
if (isMoved && ((startCoords.x !== endCoords.x) || (startCoords.y !== endCoords.y))) {
|
2765
|
+
endCoords = {
|
2766
|
+
x: e.pageX,
|
2767
|
+
y: e.pageY
|
2768
|
+
};
|
2769
|
+
_this.touchendZoom(startCoords, endCoords, allowX, allowY);
|
2770
|
+
|
2771
|
+
}
|
2772
|
+
|
2773
|
+
isMoved = false;
|
2774
|
+
}
|
2775
|
+
|
2776
|
+
_this.core.$outer.removeClass('lg-grabbing').addClass('lg-grab');
|
2777
|
+
|
2778
|
+
});
|
2779
|
+
};
|
2780
|
+
|
2781
|
+
Zoom.prototype.touchendZoom = function(startCoords, endCoords, allowX, allowY) {
|
2782
|
+
|
2783
|
+
var _this = this;
|
2784
|
+
var _$el = _this.core.$slide.eq(_this.core.index).find('.lg-img-wrap');
|
2785
|
+
var $image = _this.core.$slide.eq(_this.core.index).find('.lg-object');
|
2786
|
+
var distanceX = (-Math.abs(_$el.attr('data-x'))) + (endCoords.x - startCoords.x);
|
2787
|
+
var distanceY = (-Math.abs(_$el.attr('data-y'))) + (endCoords.y - startCoords.y);
|
2788
|
+
var minY = (_this.core.$outer.find('.lg').height() - $image.outerHeight()) / 2;
|
2789
|
+
var maxY = Math.abs(($image.outerHeight() * Math.abs($image.attr('data-scale'))) - _this.core.$outer.find('.lg').height() + minY);
|
2790
|
+
var minX = (_this.core.$outer.find('.lg').width() - $image.outerWidth()) / 2;
|
2791
|
+
var maxX = Math.abs(($image.outerWidth() * Math.abs($image.attr('data-scale'))) - _this.core.$outer.find('.lg').width() + minX);
|
2792
|
+
|
2793
|
+
if ((Math.abs(endCoords.x - startCoords.x) > 15) || (Math.abs(endCoords.y - startCoords.y) > 15)) {
|
2794
|
+
if (allowY) {
|
2795
|
+
if (distanceY <= -maxY) {
|
2796
|
+
distanceY = -maxY;
|
2797
|
+
} else if (distanceY >= -minY) {
|
2798
|
+
distanceY = -minY;
|
2799
|
+
}
|
2800
|
+
}
|
2801
|
+
|
2802
|
+
if (allowX) {
|
2803
|
+
if (distanceX <= -maxX) {
|
2804
|
+
distanceX = -maxX;
|
2805
|
+
} else if (distanceX >= -minX) {
|
2806
|
+
distanceX = -minX;
|
2807
|
+
}
|
2808
|
+
}
|
2809
|
+
|
2810
|
+
if (allowY) {
|
2811
|
+
_$el.attr('data-y', Math.abs(distanceY));
|
2812
|
+
} else {
|
2813
|
+
distanceY = -Math.abs(_$el.attr('data-y'));
|
2814
|
+
}
|
2815
|
+
|
2816
|
+
if (allowX) {
|
2817
|
+
_$el.attr('data-x', Math.abs(distanceX));
|
2818
|
+
} else {
|
2819
|
+
distanceX = -Math.abs(_$el.attr('data-x'));
|
2820
|
+
}
|
2821
|
+
|
2822
|
+
_$el.css('transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
|
2823
|
+
}
|
2824
|
+
};
|
2825
|
+
|
2826
|
+
Zoom.prototype.destroy = function() {
|
2827
|
+
|
2828
|
+
var _this = this;
|
2829
|
+
|
2830
|
+
// Unbind all events added by lightGallery zoom plugin
|
2831
|
+
_this.core.$el.off('.lg.zoom');
|
2832
|
+
$(window).off('.lg.zoom');
|
2833
|
+
_this.core.$slide.off('.lg.zoom');
|
2834
|
+
_this.core.$el.off('.lg.tm.zoom');
|
2835
|
+
_this.resetZoom();
|
2836
|
+
clearTimeout(_this.zoomabletimeout);
|
2837
|
+
_this.zoomabletimeout = false;
|
2838
|
+
};
|
2839
|
+
|
2840
|
+
$.fn.lightGallery.modules.zoom = Zoom;
|
2841
|
+
|
2842
|
+
})(jQuery, window, document);
|
2843
|
+
|
2844
|
+
(function($, window, document, undefined) {
|
2845
|
+
|
2846
|
+
'use strict';
|
2847
|
+
|
2848
|
+
var defaults = {
|
2849
|
+
hash: true
|
2850
|
+
};
|
2851
|
+
|
2852
|
+
var Hash = function(element) {
|
2853
|
+
|
2854
|
+
this.core = $(element).data('lightGallery');
|
2855
|
+
|
2856
|
+
this.core.s = $.extend({}, defaults, this.core.s);
|
2857
|
+
|
2858
|
+
if (this.core.s.hash) {
|
2859
|
+
this.oldHash = window.location.hash;
|
2860
|
+
this.init();
|
2861
|
+
}
|
2862
|
+
|
2863
|
+
return this;
|
2864
|
+
};
|
2865
|
+
|
2866
|
+
Hash.prototype.init = function() {
|
2867
|
+
var _this = this;
|
2868
|
+
var _hash;
|
2869
|
+
|
2870
|
+
// Change hash value on after each slide transition
|
2871
|
+
_this.core.$el.on('onAfterSlide.lg.tm', function(event, prevIndex, index) {
|
2872
|
+
window.location.hash = 'lg=' + _this.core.s.galleryId + '&slide=' + index;
|
2873
|
+
});
|
2874
|
+
|
2875
|
+
// Listen hash change and change the slide according to slide value
|
2876
|
+
$(window).on('hashchange', function() {
|
2877
|
+
_hash = window.location.hash;
|
2878
|
+
var _idx = parseInt(_hash.split('&slide=')[1], 10);
|
2879
|
+
|
2880
|
+
// it galleryId doesn't exist in the url close the gallery
|
2881
|
+
if ((_hash.indexOf('lg=' + _this.core.s.galleryId) > -1)) {
|
2882
|
+
_this.core.slide(_idx);
|
2883
|
+
} else if (_this.core.lGalleryOn) {
|
2884
|
+
_this.core.destroy();
|
2885
|
+
}
|
2886
|
+
|
2887
|
+
});
|
2888
|
+
};
|
2889
|
+
|
2890
|
+
Hash.prototype.destroy = function() {
|
2891
|
+
|
2892
|
+
// Reset to old hash value
|
2893
|
+
if (this.oldHash && this.oldHash.indexOf('lg=' + this.core.s.galleryId) < 0) {
|
2894
|
+
window.location.hash = this.oldHash;
|
2895
|
+
} else {
|
2896
|
+
if (history.pushState) {
|
2897
|
+
history.pushState('', document.title, window.location.pathname + window.location.search);
|
2898
|
+
} else {
|
2899
|
+
window.location.hash = '';
|
2900
|
+
}
|
2901
|
+
}
|
2902
|
+
|
2903
|
+
};
|
2904
|
+
|
2905
|
+
$.fn.lightGallery.modules.hash = Hash;
|
2906
|
+
|
2907
|
+
})(jQuery, window, document);
|