Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
145 lines (135 sloc) 4.99 KB
<html>
<head>
<!--
Use this for development
-->
<!-- <script src="https://unpkg.com/vue"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-rokka-image-lazy@0.4"></script>
<script src="https://unpkg.com/rokka@2.0.1/dist/index.umd.min.js"></script>
<!-- for the gallery part -->
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
<script type="text/javascript"
src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-gallery@2.0.1/dist/js/vue-gallery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
background-color: #f7f7f5;
}
a:link, a:visited {
color: black;
}
.photos {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 6px;
text-align: center;
}
.photos > div {
min-height: 230px;
grid-template-rows: 1fr auto;
display: grid;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
padding: 5px 0;
}
.photos > div > div {
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.photos .credits {
min-height: 30px;
padding: 0 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/blueimp-gallery@2.27.0/css/blueimp-gallery.min.css">
</head>
<body>
<div id="app">
<gallery :images="galleryImages"
:options="{fullScreen: fullscreen, startSlideshow: slideshow, slideshowInterval: 3000}"
:index="galleryIndex" @close="galleryIndex = null"></gallery>
<h1>vue-rokka-image-lazy, rokka.js, vue-gallery demo</h1>
<div>
Click on an image for gallery view mode.<br/>
<input id="slideshow" type="checkbox" v-model="slideshow" value="false"><label for="slideshow">As automatic
slideshow</label> <br/>
<input id="fullscreen" type="checkbox" v-model="fullscreen" value="false"><label for="fullscreen">In
Fullscreen</label>
</div>
<div class="photos">
<div v-for="(image, index) in images">
<div @click="galleryIndex = index">
<rokka-img
:sourceimage="image"
loading="https://rokka.io/gallery/assets/loader.svg"
:operations="[{name: 'resize', options: {width: 180, height: 180}}]"
:options="[{autoformat: 1}, {autoformat: 1, dpr: 2}]" :postfix="['1x', '2x']">
</rokka-img>
</div>
<div class="credits" v-if="image.user_metadata && image.user_metadata.unsplash_artist_id">
Photo by <a :href="`https://unsplash.com/@${image.user_metadata.unsplash_artist_id}`">{{image.static_metadata.exif.artist}}</a><br/>
on <a :href="`https://unsplash.com/photos/${image.user_metadata.unsplash_photo_id}`">Unsplash</a>
</div>
</div>
</div>
</div>
<script>
const rokkaKey = '1V5HdgIYdFnVu8qU7HfXYiHjVdRtYWFB' //read only key
const rokkaOrg = 'gallery-demo'
const rokkaClient = rokka({
apiKey: rokkaKey,
})
new Vue({
el: '#app',
components: {
RokkaImg: vueRokkaImageLazy.RokkaImgLazy,
'gallery': VueGallery
},
data: {
galleryIndex: null,
slideshow: false,
fullscreen: false,
images: []
},
computed: {
galleryImages() {
return this.images.map(image => {
const url = vueRokkaImageLazy.rokkaUrl(
{
sourceimage: image,
operations: [{name: 'resize', options: {width: 1500, height: 1000}}],
options: {autoformat: 1}
})
return {
href: url,
title: (image.static_metadata && image.static_metadata.exif && image.static_metadata.exif.title) || image.filename
}
}
)
}
},
created() {
// if you don't want to publish your API key or actual search query to the backend
// or want to filter out response data (like some image data fields). You could do a "middleware"
// filter somewhere. Eg. with AWS API Gateway and Lambda. Blogpost will come
/*
fetch('https://9iv7ht2xcd.execute-api.eu-central-1.amazonaws.com/test/gallerydemo').then(resp => {
resp.json().then(body => {
this.images = body.items
})
})*/
rokkaClient.sourceimages.list(rokkaOrg, {limit: 100}).then(result => {
this.images = result.body.items
})
}
})
</script>
</body>
</html>
You can’t perform that action at this time.