Skip to content

Instantly share code, notes, and snippets.

@muddasirawan

muddasirawan/photoswipe-demo.html

Forked from Yago/photoswipe-demo.html
Created June 23, 2019 12:25
Show Gist options
  • Save muddasirawan/5152704d97d2619a0f1bb77b32e5e659 to your computer and use it in GitHub Desktop.
Save muddasirawan/5152704d97d2619a0f1bb77b32e5e659 to your computer and use it in GitHub Desktop.
Download ZIP
PhotoSwipe demo
Raw
photoswipe-demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PhotoSwipe demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Import PhotoSwipe Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/default-skin/default-skin.css">
<!-- A touch of fanciness 💄 -->
<link href='https://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
<style>
body {font-family: 'Bitter', Georgia, Times, sans-serif;}
h1 {margin: 2em;}
.pswp__caption__center {text-align: center;}
figure {
display: inline-block;
width: 33.333%;
float: left;
}
img {width: 100%;}
.spacer {height: 5em;}
</style>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1 class="text-center">
Iceland<br>
<small><em>a PhotoSwipe Demo</em></small>
</h1>
<!-- Galley wrapper that contains all items -->
<div id="gallery" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
<!-- Use figure for a more semantic html -->
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<!-- Link to the big image, not mandatory, but usefull when there is no JS -->
<a href="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<!-- Thumbnail -->
<img src="https://unsplash.it/400/300/?image=702" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=695" data-caption="Sunset in the wheat field<br><em class='text-muted'>© Jordan McQueen</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=695" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=675" data-caption="Mysterious ocean<br><em class='text-muted'>© Barn Images</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=675" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=651" data-caption="Cloud over the mountains<br><em class='text-muted'>© James Pritchett</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=651" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=584" data-caption="Icelandic horses<br><em class='text-muted'>© Bethany Legg</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=584" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=574" data-caption="Sea side, south shore<br><em class='text-muted'>© Julien Lavallée</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=574" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=551" data-caption="Sunset on the highland road<br><em class='text-muted'>© Forrest Cavale</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=551" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=509" data-caption="Seljalandsfoss waterfall<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=509" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=511" data-caption="Fjadrarglufur canyon, south shore<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=511" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=515" data-caption="Eerie wreckage of a crashed U.S. Navy aircraft<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=515" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=512" data-caption="Blue Lagoon<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=512" itemprop="thumbnail" alt="Image description">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://unsplash.it/1200/900/?image=514" data-caption="Sunny Reykjavik street<br><em class='text-muted'>© Jeff Sheldon</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<img src="https://unsplash.it/400/300/?image=514" itemprop="thumbnail" alt="Image description">
</a>
</figure>
</div>
</div>
</div>
</div>
<!-- Some spacing 😉 -->
<div class="spacer"></div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<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>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<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>
<!-- Import jQuery and PhotoSwipe Scripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe-ui-default.min.js"></script>
<script>
'use strict';
/* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */
(function($){
// Init empty gallery array
var container = [];
// Loop over gallery items and push it to the array
$('#gallery').find('figure').each(function(){
var $link = $(this).find('a'),
item = {
src: $link.attr('href'),
w: $link.data('width'),
h: $link.data('height'),
title: $link.data('caption')
};
container.push(item);
});
// Define click event on gallery item
$('a').click(function(event){
// Prevent location change
event.preventDefault();
// Define object and gallery options
var $pswp = $('.pswp')[0],
options = {
index: $(this).parent('figure').index(),
bgOpacity: 0.85,
showHideOpacity: true
};
// Initialize PhotoSwipe
var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
gallery.init();
});
}(jQuery));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment