Skip to content

Instantly share code, notes, and snippets.

@ayhaadam

ayhaadam/index.html

Created October 15, 2017 13:08
Show Gist options
  • Save ayhaadam/27b43a92579d496d842f7331d7a4f738 to your computer and use it in GitHub Desktop.
Save ayhaadam/27b43a92579d496d842f7331d7a4f738 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js + PhotoSwipe.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="app">
<button type="button" v-on:click="togglePhotoswipe">Start</button>
<photoswipe :photos="menu" ref="photoswipe"></photoswipe>
</div>
<script src="./dist/main.js" charset="utf-8"></script>
</body>
</html>
Raw
main.js
import Vue from 'vue';
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
Vue.component('photoswipe', {
props: ['photos'],
template: `<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" ref="pswp">
<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"></button>
<button class="pswp__button pswp__button--share"></button>
<button class="pswp__button pswp__button--fs"></button>
<button class="pswp__button pswp__button--zoom"></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"></button>
<button class="pswp__button pswp__button--arrow--right"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>`,
data: function () {
return {
pswpOptions: {
pinchToClose: false,
barsSize: {top: 0, bottom: 0},
history: false,
captionEl: false,
fullscreenEl: false,
zoomEl: false,
shareEl: false,
indexIndicatorSep: '／',
errorMsg: '<div class="pswp__error-msg">無法載入此圖片</div>'
}
}
},
methods: {
init: function () {
Vue.prototype.$gallery = new PhotoSwipe( this.$refs.pswp, PhotoSwipeUI_Default, this.photos, this.pswpOptions);
Vue.prototype.$gallery.init();
}
}
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
menu: [
{
src: 'https://placekitten.com/1921/1080',
w: 1921,
h: 1080
},
{
src: 'https://placekitten.com/2000/6000',
w: 2000,
h: 6000
},
{
src: 'https://placekitten.coma/1922/1082',
w: 1922,
h: 1082
},
{
src: 'https://placekitten.com/1923/1083',
w: 1923,
h: 1083
},
{
src: 'https://placekitten.com/1924/1084',
w: 1924,
h: 1084
},
{
src: 'https://placekitten.com/1925/1085',
w: 1925,
h: 1085
}
]
},
methods: {
togglePhotoswipe: function () {
this.$refs.photoswipe.init();
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment