Skip to content

Instantly share code, notes, and snippets.

@Yago

Yago/photoswipe-demo.html

Last active August 10, 2023 21:32
Show Gist options
  • Save Yago/7edf4963fb286543ea18 to your computer and use it in GitHub Desktop.
Save Yago/7edf4963fb286543ea18 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>
@Hayriss
Copy link

Hayriss commented Oct 7, 2022

how can I change the zoom ratio ?

@HamadBakeel
Copy link

It works, thank you sir.

@hugocesarfaria
Copy link

Hello, congratulations on the job.
I'm trying to use the codes in the image I use a for and it works perfect. But I want to put each image inside a card or other component to put information other than the image. Do you have that possibility?

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