jquery.photoswipe
Version:
The jQuery plugin for PhotoSwipe
85 lines (78 loc) • 3.1 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe jQuery Plugin Demo</title>
<link rel="stylesheet" href="../node_modules/photoswipe/dist/photoswipe.css">
<link rel="stylesheet" href="../node_modules/photoswipe/dist/default-skin/default-skin.css">
<style>
body {
font-family: sans-serif;
}
img {
cursor: zoom-in;
}
.hello {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 5em;
pointer-events: none;
}
</style>
</head>
<body>
<div id="js-gallery">
<a class="slide" href="images/IMG_3012.jpg">
<img src="images/IMG_3012--thumbnail.jpg" data-original-src-width="2000" data-original-src-height="2000" alt="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.">
</a>
<a href="images/PA050706-1400×1050.jpg" class="slide">
<img src="images/PA050706--thumbnail.jpg" width="450">
</a>
<a href="#my-html" class="slide">
<img src="images/html.jpg" width="300">
<div id="my-html" style="display: none;">
<section class="hello">
<h1>Hello</h1>
</section>
</div>
</a>
<div class="slide">
<div>
<div>
<img src="images/PB210006.jpg" width="300" data-caption-class="slide-caption">
</div>
</div>
<p class="slide-caption">The slide caption text.</p>
</div>
<img class="slide" src="images/IMG_2969--thumbnail.jpg" data-original-src="images/IMG_2969.jpg" data-original-src-width="2000" data-original-src-height="2000" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt">
<img class="slide" src="images/IMG_3018.jpg" width="300" alt="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
<img class="slide" src="images/IMG_3019.jpg" height="300" alt="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.">
<figure class="slide">
<img src="images/PB210006.jpg" width="300" alt="alt text">
<figcaption class="slide-caption">
The slide caption text.<br>
Any innerHTML here will be the caption text.
</figcaption>
</figure>
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min.js"></script>
<script src="../dist/jquery.photoswipe-global.js"></script>
<script>
$('#js-gallery')
.packery({
itemSelector: '.slide',
gutter: 10
})
.photoSwipe('.slide', {bgOpacity: 0.8, shareEl: false}, {
close: function () {
console.log('closed');
}
});
</script>
</body>
</html>