]>
git.ipfire.org Git - ipfire.org.git/blob - static/js/photoswipe-index.js
7fb3bf977555c18fd9802c5871e369bec5753a1e
1 var initPhotoSwipeFromDOM = function(gallerySelector
) {
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
,
14 for(var i
= 0; i
< numNodes
; i
++) {
16 figureEl
= thumbElements
[i
]; // <figure> element
18 // include only element nodes
19 if(figureEl
.nodeType
!== 1) {
23 linkEl
= figureEl
.children
[0]; // <a> element
25 size
= linkEl
.getAttribute('data-size').split('x');
27 // create slide object
29 src
: linkEl
.getAttribute('href'),
30 w
: parseInt(size
[0], 10),
31 h
: parseInt(size
[1], 10)
36 if(figureEl
.children
.length
> 1) {
37 // <figcaption> content
38 item
.title
= figureEl
.children
[1].innerHTML
;
41 if(linkEl
.children
.length
> 0) {
42 // <img> thumbnail element, retrieving thumbnail url
43 item
.msrc
= linkEl
.children
[0].getAttribute('src');
46 item
.el
= figureEl
; // save link to element for getThumbBoundsFn
53 // find nearest parent element
54 var closest
= function closest(el
, fn
) {
55 return el
&& ( fn(el
) ? el
: closest(el
.parentNode
, fn
) );
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;
63 var eTarget
= e
.target
|| e
.srcElement
;
65 // find root element of slide
66 var clickedListItem
= closest(eTarget
, function(el
) {
67 return (el
.tagName
&& el
.tagName
.toUpperCase() === 'FIGURE');
70 if(!clickedListItem
) {
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
,
82 for (var i
= 0; i
< numChildNodes
; i
++) {
83 if(childNodes
[i
].nodeType
!== 1) {
87 if(childNodes
[i
] === clickedListItem
) {
97 // open PhotoSwipe if valid index found
98 openPhotoSwipe( index
, clickedGallery
);
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),
108 if(hash
.length
< 5) {
112 var vars
= hash
.split('&');
113 for (var i
= 0; i
< vars
.length
; i
++) {
117 var pair
= vars
[i
].split('=');
118 if(pair
.length
< 2) {
121 params
[pair
[0]] = pair
[1];
125 params
.gid
= parseInt(params
.gid
, 10);
131 var openPhotoSwipe = function(index
, galleryElement
, disableAnimation
, fromURL
) {
132 var pswpElement
= document
.querySelectorAll('.pswp')[0],
137 items
= parseThumbnailElements(galleryElement
);
139 // define options (if needed)
142 // define gallery index (for URL)
143 galleryUID
: galleryElement
.getAttribute('data-pswp-uid'),
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();
151 return {x
:rect
.left
, y
:rect
.top
+ pageYScroll
, w
:rect
.width
};
156 // PhotoSwipe opened from URL
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
) {
168 // in URL indexes start from 1
169 options
.index
= parseInt(index
, 10) - 1;
172 options
.index
= parseInt(index
, 10);
175 // exit if index not found
176 if( isNaN(options
.index
) ) {
180 if(disableAnimation
) {
181 options
.showAnimationDuration
= 0;
184 // Pass data to PhotoSwipe and initialize it
185 gallery
= new PhotoSwipe( pswpElement
, PhotoSwipeUI_Default
, items
, options
);
189 // loop through all gallery elements and bind events
190 var galleryElements
= document
.querySelectorAll( gallerySelector
);
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
;
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 );
204 // execute above function
205 initPhotoSwipeFromDOM('.my-gallery');