<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Photo Browser</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
<ul>
<li>Swiper between photos</li>
<li>Multi-gestures support for zooming</li>
<li>Toggle zoom by double tap on photo</li>
<li>Single click on photo to toggle Exposition mode</li>
</ul>
</div>
<div class="block block-strong">
<p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
<div class="row">
<div class="col-33"><a href="#" class="button button-raised" @click="openStandalone">Standalone</a></div>
<div class="col-33"><a href="#" class="button button-raised" @click="openPopup">Popup</a></div>
<div class="col-33"><a href="#" class="button button-raised" @click="openPage">Page</a></div>
</div>
</div>
<div class="block block-strong">
<p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
<div class="row">
<div class="col-33"><a href="#" class="button button-raised" @click="openStandaloneDark">Standalone</a></div>
<div class="col-33"><a href="#" class="button button-raised" @click="openPopupDark">Popup</a></div>
<div class="col-33"><a href="#" class="button button-raised" @click="openPageDark">Page</a></div>
</div>
</div>
</div>
</div>
<script>
return {
data: function () {
return {
photos: [
{
url: 'img/beach.jpg',
caption: 'Amazing beach in Goa, India'
},
'http://placekitten.com/1024/1024',
'img/lock.jpg',
{
url: 'img/monkey.jpg',
caption: 'I met this monkey in Chinese mountains'
},
{
url: 'img/mountains.jpg',
caption: 'Beautiful mountains in Zhangjiajie, China'
}
],
}
},
methods: {
openStandalone: function () {
const self = this;
self.standalone.open();
},
openPopup: function () {
const self = this;
self.popup.open();
},
openPage: function () {
const self = this;
self.page.open();
},
openStandaloneDark: function () {
const self = this;
self.standaloneDark.open();
},
openPopupDark: function () {
const self = this;
self.popupDark.open();
},
openPageDark: function () {
const self = this;
self.pageDark.open();
},
},
on: {
pageInit: function () {
const self = this;
// Create PBs when page init
self.standalone = self.$app.photoBrowser.create({
photos: self.photos,
});
self.popup = self.$app.photoBrowser.create({
photos: self.photos,
type: 'popup',
});
self.page = self.$app.photoBrowser.create({
photos: self.photos,
type: 'page',
backLinkText: 'Back',
});
self.standaloneDark = self.$app.photoBrowser.create({
photos: self.photos,
theme: 'dark',
});
self.popupDark = self.$app.photoBrowser.create({
photos: self.photos,
type: 'popup',
theme: 'dark',
});
self.pageDark = self.$app.photoBrowser.create({
photos: self.photos,
type: 'page',
backLinkText: 'Back',
theme: 'dark',
});
},
pageBeforeRemove: function () {
const self = this;
// Destroy PBs on page remove
self.standalone.destroy();
self.popup.destroy();
self.page.destroy();
self.standaloneDark.destroy();
self.popupDark.destroy();
self.pageDark.destroy();
},
}
};
</script>
