]>
Commit | Line | Data |
---|---|---|
e33d95d5 SH |
1 | var initPhotoSwipeFromDOM = function(gallerySelector) { |
2 | ||
3 | // parse slide data (url, title, size ...) from DOM elements | |
4 | // (children of gallerySelector) | |
5 | var parseThumbnailElements = function(el) { | |
6 | var thumbElements = el.childNodes, | |
7 | numNodes = thumbElements.length, | |
8 | items = [], | |
9 | figureEl, | |
10 | linkEl, | |
11 | size, | |
12 | item; | |
13 | ||
14 | for(var i = 0; i < numNodes; i++) { | |
15 | ||
16 | figureEl = thumbElements[i]; // <figure> element | |
17 | ||
18 | // include only element nodes | |
19 | if(figureEl.nodeType !== 1) { | |
20 | continue; | |
21 | } | |
22 | ||
23 | linkEl = figureEl.children[0]; // <a> element | |
24 | ||
25 | size = linkEl.getAttribute('data-size').split('x'); | |
26 | ||
27 | // create slide object | |
28 | item = { | |
29 | src: linkEl.getAttribute('href'), | |
30 | w: parseInt(size[0], 10), | |
31 | h: parseInt(size[1], 10) | |
32 | }; | |
33 | ||
34 | ||
35 | ||
36 | if(figureEl.children.length > 1) { | |
37 | // <figcaption> content | |
38 | item.title = figureEl.children[1].innerHTML; | |
39 | } | |
40 | ||
41 | if(linkEl.children.length > 0) { | |
42 | // <img> thumbnail element, retrieving thumbnail url | |
43 | item.msrc = linkEl.children[0].getAttribute('src'); | |
44 | } | |
45 | ||
46 | item.el = figureEl; // save link to element for getThumbBoundsFn | |
47 | items.push(item); | |
48 | } | |
49 | ||
50 | return items; | |
51 | }; | |
52 | ||
53 | // find nearest parent element | |
54 | var closest = function closest(el, fn) { | |
55 | return el && ( fn(el) ? el : closest(el.parentNode, fn) ); | |
56 | }; | |
57 | ||
58 | // triggers when user clicks on thumbnail | |
59 | var onThumbnailsClick = function(e) { | |
60 | e = e || window.event; | |
61 | e.preventDefault ? e.preventDefault() : e.returnValue = false; | |
62 | ||
63 | var eTarget = e.target || e.srcElement; | |
64 | ||
65 | // find root element of slide | |
66 | var clickedListItem = closest(eTarget, function(el) { | |
67 | return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); | |
68 | }); | |
69 | ||
70 | if(!clickedListItem) { | |
71 | return; | |
72 | } | |
73 | ||
74 | // find index of clicked item by looping through all child nodes | |
75 | // alternatively, you may define index via data- attribute | |
76 | var clickedGallery = clickedListItem.parentNode, | |
77 | childNodes = clickedListItem.parentNode.childNodes, | |
78 | numChildNodes = childNodes.length, | |
79 | nodeIndex = 0, | |
80 | index; | |
81 | ||
82 | for (var i = 0; i < numChildNodes; i++) { | |
83 | if(childNodes[i].nodeType !== 1) { | |
84 | continue; | |
85 | } | |
86 | ||
87 | if(childNodes[i] === clickedListItem) { | |
88 | index = nodeIndex; | |
89 | break; | |
90 | } | |
91 | nodeIndex++; | |
92 | } | |
93 | ||
94 | ||
95 | ||
96 | if(index >= 0) { | |
97 | // open PhotoSwipe if valid index found | |
98 | openPhotoSwipe( index, clickedGallery ); | |
99 | } | |
100 | return false; | |
101 | }; | |
102 | ||
103 | // parse picture index and gallery index from URL (#&pid=1&gid=2) | |
104 | var photoswipeParseHash = function() { | |
105 | var hash = window.location.hash.substring(1), | |
106 | params = {}; | |
107 | ||
108 | if(hash.length < 5) { | |
109 | return params; | |
110 | } | |
111 | ||
112 | var vars = hash.split('&'); | |
113 | for (var i = 0; i < vars.length; i++) { | |
114 | if(!vars[i]) { | |
115 | continue; | |
116 | } | |
117 | var pair = vars[i].split('='); | |
118 | if(pair.length < 2) { | |
119 | continue; | |
120 | } | |
121 | params[pair[0]] = pair[1]; | |
122 | } | |
123 | ||
124 | if(params.gid) { | |
125 | params.gid = parseInt(params.gid, 10); | |
126 | } | |
127 | ||
128 | return params; | |
129 | }; | |
130 | ||
131 | var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { | |
132 | var pswpElement = document.querySelectorAll('.pswp')[0], | |
133 | gallery, | |
134 | options, | |
135 | items; | |
136 | ||
137 | items = parseThumbnailElements(galleryElement); | |
138 | ||
139 | // define options (if needed) | |
140 | options = { | |
141 | ||
142 | // define gallery index (for URL) | |
143 | galleryUID: galleryElement.getAttribute('data-pswp-uid'), | |
144 | ||
145 | getThumbBoundsFn: function(index) { | |
146 | // See Options -> getThumbBoundsFn section of documentation for more info | |
147 | var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail | |
148 | pageYScroll = window.pageYOffset || document.documentElement.scrollTop, | |
149 | rect = thumbnail.getBoundingClientRect(); | |
150 | ||
151 | return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; | |
152 | } | |
153 | ||
154 | }; | |
155 | ||
156 | // PhotoSwipe opened from URL | |
157 | if(fromURL) { | |
158 | if(options.galleryPIDs) { | |
159 | // parse real index when custom PIDs are used | |
160 | // http://photoswipe.com/documentation/faq.html#custom-pid-in-url | |
161 | for(var j = 0; j < items.length; j++) { | |
162 | if(items[j].pid == index) { | |
163 | options.index = j; | |
164 | break; | |
165 | } | |
166 | } | |
167 | } else { | |
168 | // in URL indexes start from 1 | |
169 | options.index = parseInt(index, 10) - 1; | |
170 | } | |
171 | } else { | |
172 | options.index = parseInt(index, 10); | |
173 | } | |
174 | ||
175 | // exit if index not found | |
176 | if( isNaN(options.index) ) { | |
177 | return; | |
178 | } | |
179 | ||
180 | if(disableAnimation) { | |
181 | options.showAnimationDuration = 0; | |
182 | } | |
183 | ||
184 | // Pass data to PhotoSwipe and initialize it | |
185 | gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); | |
186 | gallery.init(); | |
187 | }; | |
188 | ||
189 | // loop through all gallery elements and bind events | |
190 | var galleryElements = document.querySelectorAll( gallerySelector ); | |
191 | ||
192 | for(var i = 0, l = galleryElements.length; i < l; i++) { | |
193 | galleryElements[i].setAttribute('data-pswp-uid', i+1); | |
194 | galleryElements[i].onclick = onThumbnailsClick; | |
195 | } | |
196 | ||
197 | // Parse URL and open gallery if it contains #&pid=3&gid=1 | |
198 | var hashData = photoswipeParseHash(); | |
199 | if(hashData.pid && hashData.gid) { | |
200 | openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); | |
201 | } | |
202 | }; | |
203 | ||
204 | // execute above function | |
205 | initPhotoSwipeFromDOM('.my-gallery'); |