Skip to content

Instantly share code, notes, and snippets.

@kshnurov
Created February 23, 2015 23:37
Show Gist options
  • Save kshnurov/8b175b8798d4a907e47b to your computer and use it in GitHub Desktop.
Save kshnurov/8b175b8798d4a907e47b to your computer and use it in GitHub Desktop.
PhotoSwipe: init from DOM using jQuery
(function( $ ) {
$.fn.photoswipe = function(options){
var galleries = [],
_options = options;
var init = function($this){
galleries = [];
$this.each(function(i, gallery){
galleries.push({
id: i,
items: []
});
$(gallery).find('a').each(function(k, link) {
var $link = $(link),
size = $link.data('size').split('x');
if (size.length != 2){
throw SyntaxError("Missing data-size attribute.");
}
$link.data('gallery-id',i+1);
$link.data('photo-id', k);
var item = {
src: link.href,
msrc: link.children[0].getAttribute('src'),
w: parseInt(size[0],10),
h: parseInt(size[1],10),
title: $link.data('title'),
el: link
}
galleries[i].items.push(item);
});
$(gallery).on('click', 'a', function(e){
e.preventDefault();
var gid = $(this).data('gallery-id'),
pid = $(this).data('photo-id');
openGallery(gid,pid);
});
});
}
var parseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
if(!params.hasOwnProperty('pid')) {
return params;
}
params.pid = parseInt(params.pid, 10);
return params;
};
var openGallery = function(gid,pid){
var pswpElement = document.querySelectorAll('.pswp')[0],
items = galleries[gid-1].items,
options = {
index: pid,
galleryUID: gid,
getThumbBoundsFn: function(index) {
var thumbnail = items[index].el.children[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
$.extend(options,_options);
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
// initialize
init(this);
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = parseHash();
if(hashData.pid > 0 && hashData.gid > 0) {
openGallery(hashData.gid,hashData.pid);
}
return this;
};
}( jQuery ));
@or247
Copy link

or247 commented Sep 6, 2016

@kshnurov this is awesome, just what I need. Notice one weird thing, when you Parse URL and open gallery in new window, if it's pid1 of each gallery it updates to pid2 and shows the second image.

Looking at the fix just now but thought I'd point it out.... thanks for the code!

@monobasic
Copy link

monobasic commented Apr 4, 2018

In the openGallery() function, options.index should be pid-1 instead of just pid, guess index starts from zero.. -> this fixes deep linking to the first image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment