html photoswipe

Posted 2021-05-11

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script> 




<div class="b-photo-slider">
	<a href="###" class="photoswipe">
		<img src="###" />
	</a>
</div>

<div class="pswp" id="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--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>

<script>
	$(document).on('click', 'a.photoswipe', function (event) {

		var container = [];
		$(document).find('.photoswipe').each(function (i, item) {
			var $link = $(this),
				item = {
					src: $link.attr('href'),
					w: 0,
					h: 0
				}
			;
			container.push(item);
		});

		var index = $(document).find('.photoswipe').index(this);
		event.preventDefault();
		var pswp = document.getElementById('pswp'),
			options = {
				index: index,
				bgOpacity: 0.85,
				showHideOpacity: true
			};
		var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, container, options);
		gallery.listen('gettingData', function (index, item) {
			if (item.w < 1 || item.h < 1) { // unknown size
				var img = new Image();
				img.onload = function () { // will get size after load
					item.w = this.width; // set image width
					item.h = this.height; // set image height
					gallery.invalidateCurrItems(); // reinit Items
					gallery.updateSize(true); // reinit Items
				};
				img.src = item.src; // let's download image
			}
			buttonsSize(this);
		});

		function buttonsSize(pswp) {
			if (pswp.currItem.initialPosition && pswp.currItem.initialPosition.x) {
				$('.pswp__button--arrow--left').width(pswp.currItem.initialPosition.x);
				$('.pswp__button--arrow--right').width(pswp.container.clientWidth - (pswp.currItem.initialPosition.x + (pswp.container.clientWidth - pswp.currItem.initialPosition.x * 2)));
			}
		}

		gallery.listen('beforeChange', function (index, item) {
			buttonsSize(this);
		});

		gallery.listen('resize', function () {
			buttonsSize(this);
		});

		gallery.init();
	});

</script>