<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>PhotoSwipe v4.1.1</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="demo-content cf">
<div class="picture three cf" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/office-1.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/office-1-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="Beach">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/office-2.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/office-2-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/office-3.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/office-3-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="">
</a>
</figure>
</div>
<div class="picture two cf" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/city-1.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/city-1-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="Beach">
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/city-2.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/city-2-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="">
</a>
</figure>
</div>
<div class="picture cf" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://tutsplus.github.io/photoswipe-jquery/img/people-1.jpg" itemprop="contentUrl" data-size="1000x667">
<img src="https://tutsplus.github.io/photoswipe-jquery/img/people-1-thumb.jpg" height="560" width="840" itemprop="thumbnail" alt="Beach">
</a>
</figure>
</div>
</div>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function($) {
var $pswp = $('.pswp')[0];
var image = [];
$('.picture').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
$.each(items, function(index, value) {
image[index] = new Image();
image[index].src = value['src'];
});
$pic.on('click', 'figure', function(event) {
event.preventDefault();
var $index = $(this).index();
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true
}
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
});
});
})(jQuery);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
body {
margin: 0;
background-color: #f5f7fa;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 0;
padding: 10px;
}
figure a {
display: block;
}
header {
background-color: #196e76;
text-align: center;
}
header h1,
header a {
padding: 15px;
color: #fff;
text-transform: uppercase;
}
header h1 {
margin: 0;
font-size: 18px;
}
header a {
font-weight: 300;
display: block;
text-decoration: none;
background-color: #10474c;
font-size: 14px;
}
.demo-content {
max-width: 840px;
width: 100%;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
}
.demo-content img {
border: 5px solid #fff;
}
.picture {
padding: 36px 0;
border-bottom: 1px solid #dae1ec;
}
.picture:first-child {
padding-top: 0;
}
@media screen and (min-width: 630px) {
header {
text-align: none;
}
header h1,
header a {
font-size: 12px;
}
header h1 {
float: left;
}
header a {
float: right;
}
.demo-content {
padding: 10px;
}
.picture {
padding: 0;
border-bottom: 0;
}
.three figure {
float: left;
width: 33.33333333%;
}
.two figure {
float: left;
width: 50%;
}
}
/*# sourceMappingURL=style.css.map */