139 lines
4.1 KiB
JavaScript
139 lines
4.1 KiB
JavaScript
import PhotoSwipe from 'photoswipe/dist/photoswipe.js'
|
|
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js'
|
|
|
|
// Utility function
|
|
// See the plugin docs: http://photoswipe.com/documentation/getting-started.html
|
|
//
|
|
const initPhotoSwipeFromDOM = function (gallerySelector, galleryOptions, events, cb) {
|
|
if (!$('.pswp').length) {
|
|
$('body').append(
|
|
`<!-- PhotoSwipe Template -->
|
|
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="pswp__bg"></div>
|
|
<div class="pswp__scroll-wrap">
|
|
<div class="pswp__container">
|
|
<div class="pswp__item"></div>
|
|
<div class="pswp__item"></div>
|
|
<div class="pswp__item"></div>
|
|
</div>
|
|
<div class="pswp__ui pswp__ui--hidden">
|
|
<div class="pswp__top-bar">
|
|
<div class="pswp__counter"></div>
|
|
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
|
<button class="pswp__button pswp__button--share" title="Share"></button>
|
|
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
|
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
|
|
|
<div class="pswp__preloader">
|
|
<div class="pswp__preloader__icn">
|
|
<div class="pswp__preloader__cut">
|
|
<div class="pswp__preloader__donut"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
|
<div class="pswp__share-tooltip"></div>
|
|
</div>
|
|
|
|
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
|
|
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
|
|
|
|
<div class="pswp__caption">
|
|
<div class="pswp__caption__center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / PhotoSwipe Template -->`
|
|
)
|
|
}
|
|
|
|
// parse slide data (url, title, size ...) from DOM elements
|
|
function getItems () {
|
|
const items = []
|
|
|
|
$(gallerySelector).find('figure a').each(function () {
|
|
const $img = $(this).find('img')
|
|
const size = this.getAttribute('data-size').split('x')
|
|
const title = this.getAttribute('data-title')
|
|
const item = {
|
|
src: this.getAttribute('href'),
|
|
w: parseInt(size[0], 10),
|
|
h: parseInt(size[1], 10)
|
|
}
|
|
|
|
if ($img.length > 0)
|
|
item.msrc = $img[0].getAttribute('src')
|
|
|
|
if (title)
|
|
item.title = title
|
|
|
|
item.el = $(this).parents('figure')[0] // save link to element for getThumbBoundsFn
|
|
items.push(item)
|
|
})
|
|
|
|
return items
|
|
}
|
|
|
|
function getClickedItem (target) {
|
|
return target.tagName.toUpperCase() === 'FIGURE'
|
|
? target
|
|
: $(target).parents('figure')[0]
|
|
}
|
|
|
|
function getClickedItemIndex (clickedListItem) {
|
|
if (!clickedListItem) return null
|
|
|
|
const $gallery = $(gallerySelector).find('figure')
|
|
let curIndex = 0
|
|
let index = null
|
|
|
|
$gallery.each(function () {
|
|
if (this === clickedListItem)
|
|
index = curIndex
|
|
curIndex++
|
|
})
|
|
|
|
return index
|
|
}
|
|
|
|
$(gallerySelector).on('click', 'figure a', function (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
const item = getClickedItem(e.target)
|
|
const index = getClickedItemIndex(item)
|
|
|
|
if (index === null) return
|
|
|
|
const items = getItems()
|
|
const options = $.extend({}, galleryOptions, {
|
|
index: index,
|
|
getThumbBoundsFn: function (index) {
|
|
const thumbnail = $(items[index].el).find('img')[0]
|
|
const pageYScroll = window.pageYOffset || document.documentElement.scrollTop
|
|
const rect = thumbnail.getBoundingClientRect()
|
|
|
|
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
|
|
}
|
|
})
|
|
|
|
const gallery = new PhotoSwipe($('.pswp')[0], PhotoSwipeUI_Default, items, options)
|
|
|
|
gallery.init()
|
|
|
|
if (events) {
|
|
Object.keys(events).forEach(function(key) {
|
|
gallery.listen(key, events[key].bind(gallery))
|
|
})
|
|
}
|
|
|
|
if (cb) cb.call(gallery)
|
|
|
|
return false
|
|
})
|
|
}
|
|
|
|
export { PhotoSwipe, PhotoSwipeUI_Default, initPhotoSwipeFromDOM }
|