function open_photoswipe(items, index, disable_animation, from_url) {
var options = {
// define gallery index (for URL)
galleryUID: GALLERY_INDEX,
loop: false,
getThumbBoundsFn: function (index) {
var rect = items[index].img_elem.getBoundingClientRect();
return {
x: rect.left,
y: rect.top + (window.pageYOffset || document.documentElement.scrollTop),
w: rect.width
};
}
};
if (from_url) {
options.index = parseInt(index, 10) - 1;
} else {
options.index = parseInt(index, 10);
}
if (!isNaN(options.index)) {
if (disable_animation) {
options.showAnimationDuration = 0;
}
var gallery = new PhotoSwipe(pswp_elem, PhotoSwipeUI_Default, items, options);
gallery.init();
}
}
function openPhotoSwipe(index, $gallery, $imgs, imgInfoArray) {
var options = $.extend(getOptions($gallery).globalOptions, {index: index, getThumbBoundsFn: getThumbBoundsFn($imgs), galleryUID: $gallery.data('pswp-uid')}),
photoSwipe = new PhotoSwipe($defaultGallery[0], PhotoSwipeUI_Default, imgInfoArray, options);
$.each(getOptions($gallery).events, function (eventName, eventHandler) {
photoSwipe.listen(eventName, eventHandler);
});
photoSwipe.init();
}
function show (startWithIndex = 0) {
const template = attachTemplate()
const lightbox = new Photoswipe(template, theme, images, {
index: startWithIndex,
getThumbBoundsFn: calculateBounding.bind(null, imageElements),
shareEl: false
})
lightbox.listen('destroy', function () {
document.body.removeChild(template)
})
lightbox.init()
}
openPhotoSwipe(index) {
let pswp = null;
index = parseInt(index, 10) || 0;
if (isNaN(index)) {
return;
}
this.options.index = index;
pswp = new PhotoSwipe(this.template, PhotoSwipeUI_Default, this.items, this.options);
pswp.init();
}
function loadPhotoSwipe(photoSwipeList){
var zoomPhoto = getZoomPhoto(photoSwipeList);
var options = {
// history & focus options are disabled on CodePen
history: false
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, zoomPhoto , options);
gallery.init();
}
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
}
};
// PhotoSwipe opened from URL
if (fromURL) {
if (options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for (var j = 0; j < items.length; j++) {
if (items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if (isNaN(options.index)) {
return;
}
if (disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
this.items.on( 'click.stapel', function() {
var $item = $( this );
if( !self.spread && $item.data( 'isPile' ) ) {
self.spread = true;
self.pileName = $item.data( 'pileName' );
self.options.onBeforeOpen( self.pileName );
self._openPile();
return false;
} else {
var pileName = $item.attr('data-pile');
var src = $item.find('a').attr('href');
var filterItems = self.items.filter(function(index, item) {
return $(item).attr('data-pile')===pileName
});
var pileItems = [];
var index = 0;
filterItems.each(function(i) {
if ($(this).find('a').attr("href")===src) {
index = i;
}
pileItems.push({
src: $(this).find('a').attr("href"),
w: $(this).find('a').attr("data-width") || 4000,
h: $(this).find('a').attr("data-height") || 2992
});
});
var options = {
index: index,
history: false,
barsSize: {top: 0, bottom: 0},
focus: true,
showHideOpacity: true,
bgOpacity: 1
};
var pswpElement = document.querySelectorAll('.pswp')[0];
var photoSwipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, pileItems, options);
photoSwipe.init();
return false;
}
} );
$em.onclick = () => {
// slider展开状态
// todo: 这样不好，后面改成状态
if (document.querySelector('.left-col.show')) return
let items = []
$imgArr.forEach(($em2, i2) => {
let img = $em2.getAttribute('data-idx', i2)
let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
let title = $em2.getAttribute('alt')
items.push({
src: src,
w: $em2.width,
h: $em2.height,
title: title
})
})
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
index: parseInt(i)
});
gallery.init()
}
function openPhotoSwipe(imagesArr, currentHighlight) {
var pswpElement = document.querySelector('.pswp');
let parsed = JSON.parse(imagesArr);
// Find the index of highlighted item
var found = parsed.findIndex(function(img) {
return img.src == currentHighlight;
});
// Split array into two and begin array with highlight image
const highlight = parsed.splice(0, found);
parsed = [...parsed, ...highlight];
var items = parsed;
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
shareEl: false,
tapToClose: true,
clickToCloseNonZoomable: false,
closeOnScroll: false,
maxSpreadZoom: 3,
getDoubleTapZoom: function(isMouseClick, item) {
if (isMouseClick) {
return 1.2;
} else {
return item.initialZoomLevel < 0.7 ? 1 : 1.5;
}
},
bgOpacity: 0.9,
showAnimationDuration: 200,
hideAnimationDuration: 200
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
.on('click', '.attachmentImagePreview.visible', function (oEvent) {
var
iIndex = 0,
oPs = null,
oEl = oEvent.currentTarget || null,
aItems = []
// fThumbBoundsFn = function (index) {
// var oRes = null, oEl = aItems[index], oPos = null;
// if (oEl && oEl.el)
// {
// oPos = oEl.el.find('.iconBG').offset();
// oRes = oPos && oPos.top && oPos.left ?
// {x: oPos.left, y: oPos.top, w: 60} : null;
// }
//
// return oRes;
// }
;
oDom.find('.attachmentImagePreview.visible').each(function (index, oSubElement) {
var
$oItem = $(oSubElement)
;
if (oEl === oSubElement)
{
iIndex = index;
}
aItems.push({
'w': 600, 'h': 400,
'src': $oItem.attr('href'),
'title': $oItem.attr('title') || ''
});
});
if (aItems && 0 < aItems.length)
{
Globals.useKeyboardShortcuts(false);
oPs = new PhotoSwipe(self.pswpDom, PhotoSwipeUI_Default, aItems, {
'index': iIndex,
'bgOpacity': 0.85,
'loadingIndicatorDelay': 500,
'errorMsg': '<div class="pswp__error-msg">' + sErrorMessage + '</div>',
'showHideOpacity': true,
'tapToToggleControls': false,
// 'getThumbBoundsFn': fThumbBoundsFn,
'timeToIdle': 0,
'timeToIdleOutside': 0,
'history': false,
'arrowEl': 1 < aItems.length,
'counterEl': 1 < aItems.length,
'shareEl': false
});
oPs.listen('imageLoadComplete', function(index, item) {
if (item && item.img && item.img.width && item.img.height)
{
item.w = item.img.width;
item.h = item.img.height;
oPs.updateSize(true);
}
});
oPs.listen('close', function() {
Globals.useKeyboardShortcuts(true);
});
oPs.init();
}
return false;
});
$(selector).each(function () {
$('#thumbnail-active').addClass('active');
var $pic = $(this);
var getItems = function () {
var items = [];
$pic.find('a').each(function () {
if ($(this).attr('data-video')) {
var $src = $(this).data('src-original');
var $size = $(this)
.data('size-original')
.split('x');
var $width = $size[0],
$height = $size[1],
$src_preview = $(this).data('src-medium'),
$size_preview = $(this)
.data('size-medium')
.split(' x '),
$width_preview = $size_preview[0],
$height_preview = $size_preview[1],
$href = $(this).attr('href'),
$title = '<a href="' + $href + '">' + $(this).data('name') + '</a><ul><li>' + $(this).data('description') + '</li></ul>';
var item = {
is_video: true,
href: $href,
src: $src_preview,
w: $width_preview,
h: $height_preview,
title: $title,
videoProperties: {
src: $src,
w: $width,
h: $height
}
};
} else {
var $src_xlarge = $(this).data('src-xlarge'),
$size_xlarge = $(this)
.data('size-xlarge')
.split(' x '),
$width_xlarge = $size_xlarge[0],
$height_xlarge = $size_xlarge[1],
$src_large = $(this).data('src-large'),
$size_large = $(this)
.data('size-large')
.split(' x '),
$width_large = $size_large[0],
$height_large = $size_large[1],
$src_medium = $(this).data('src-medium'),
$size_medium = $(this)
.data('size-medium')
.split(' x '),
$width_medium = $size_medium[0],
$height_medium = $size_medium[1],
$href = $(this).attr('href'),
$title = '<a href="' + $href + '"><div><div>' + $(this).data('name');
if (phyxo_photoswipe_metadata) {
$title += '<ul id="pswp--caption--date_created" class="pull-right"><li><em>' + $(this).data('date-created') + '</em></li></ul>';
}
$title += '</div>';
if ($(this).data('description').length > 0) {
$title += '<ul id="pswp--caption--description"><li>' + $(this).data('description') + '</li></ul>';
}
if (phyxo_photoswipe_metadata) {
$title += '<ul id="pswp--caption--metadata" class="pull-right">';
if ($(this).data('exif-make').length > 0) {
$title += '<li><em>' + $(this).data('exif-make') + '</em></li>';
}
if ($(this).data('exif-model').length > 0) {
$title += '<li><em> ' + $(this).data('exif-model') + '</em></li>';
}
if ($(this).data('exif-lens').length > 0) {
$title += '<li><em>, ' + $(this).data('exif-lens') + '</em></li>';
}
if ($(this).data('exif-focal-length').length > 0) {
$title += '<li><em>, ' + $(this).data('exif-focal-length') + '</em></li>';
}
if ($(this).data('exif-apperture') > 0) {
$title += '<li><em>, f/' + $(this).data('exif-apperture') + '</em></li>';
}
if ($(this).data('exif-shutter-speed').length > 0) {
$title += '<li><em>, ' + $(this).data('exif-shutter-speed') + '</em></li>';
}
if ($(this).data('exif-iso') > 0) {
$title += '<li><em>, ISO' + $(this).data('exif-iso') + '</em></li>';
}
$title += '</ul>';
}
$title += '</div></a>';
var item = {
is_video: false,
href: $href,
mediumImage: {
src: $src_medium,
w: $width_medium,
h: $height_medium,
title: $title
},
largeImage: {
src: $src_large,
w: $width_large,
h: $height_large,
title: $title
},
xlargeImage: {
src: $src_xlarge,
w: $width_xlarge,
h: $height_xlarge,
title: $title
}
};
}
items.push(item);
});
return items;
};
const items = getItems();
const pswpElement = document.querySelectorAll('.pswp')[0];
const options = {
index: start,
showHideOpacity: true,
closeOnScroll: false,
closeOnVerticalDrag: false,
focus: false,
history: true,
preload: [1, 2]
};
const photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
var realViewportWidth,
useLargeImages = false,
firstResize = true,
imageSrcWillChange;
photoSwipe.listen('beforeResize', function () {
realViewportWidth = photoSwipe.viewportSize.x * window.devicePixelRatio;
if (useLargeImages && realViewportWidth < 1335) {
useLargeImages = false;
imageSrcWillChange = true;
} else if (!useLargeImages && realViewportWidth >= 1335) {
useLargeImages = true;
imageSrcWillChange = true;
}
if (imageSrcWillChange && !firstResize) {
photoSwipe.invalidateCurrItems();
}
if (firstResize) {
firstResize = false;
}
imageSrcWillChange = false;
});
photoSwipe.listen('gettingData', function (index, item) {
if (!item.is_video) {
if (useLargeImages) {
item.src = item.xlargeImage.src;
item.w = item.xlargeImage.w;
item.h = item.xlargeImage.h;
item.title = item.xlargeImage.title;
} else {
item.src = item.largeImage.src;
item.w = item.largeImage.w;
item.h = item.largeImage.h;
item.title = item.largeImage.title;
}
}
});
var autoplayId = null;
$('.pswp__button--autoplay').on('click touchstart', function (event) {
event.preventDefault();
if (autoplayId) {
clearInterval(autoplayId);
autoplayId = null;
$('.pswp__button--autoplay').removeClass('stop');
} else {
autoplayId = setInterval(function () {
photoSwipe.next();
let $index = photoSwipe.getCurrentIndex();
}, phyxo_photoswipe_interval);
$('.pswp__button--autoplay').addClass('stop');
}
});
photoSwipe.listen('destroy', function () {
if (autoplayId) {
clearInterval(autoplayId);
autoplayId = null;
$('.pswp__button--autoplay').removeClass('stop');
}
$('.pswp__button--autoplay').off('click touchstart');
$(selector)
.find('a.active')
.removeClass('active');
});
photoSwipe.init();
detectVideo(photoSwipe);
photoSwipe.listen('initialZoomInEnd', function () {
const curr_idx = photoSwipe.getCurrentIndex();
if (curr_idx !== start && autoplayId == null) {
photoSwipe.goTo(start);
}
$('.pswp__button--details').on('click touchstart', function () {
location.href = photoSwipe.currItem.href;
});
});
photoSwipe.listen('afterChange', function () {
detectVideo(photoSwipe);
$('.pswp__button--details')
.off()
.on('click touchstart', function () {
location.href = photoSwipe.currItem.href;
});
});
photoSwipe.listen('beforeChange', function () {
removeVideo();
});
photoSwipe.listen('resize', function () {
if ($('.pswp-video-modal').length > 0) {
var vsize = setVideoSize(photoSwipe.currItem, photoSwipe.viewportSize);
console.log('PhotoSwipe resize in action. Setting video size to ' + vsize.w + 'x' + vsize.h);
$('.pswp-video-modal').css({ width: vsize.w, height: vsize.h });
updateVideoPosition(photoSwipe);
}
});
photoSwipe.listen('close', function () {
removeVideo();
});
});
function openPhotoSwipe(items, index) {
pswpConfig.index = index - 1;
var gallery = new PhotoSwipe($pswp[0], PhotoSwipeUI, items, pswpConfig);
gallery.init();
}