Skip to content
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
Use this for development
<!-- <script src=""></script>-->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!-- for the gallery part -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript"
<script type="text/javascript" src=""></script>
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;
<link rel="stylesheet" type="text/css" href="">
<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>
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
<div class="photos">
<div v-for="(image, index) in images">
<div @click="galleryIndex = index">
:operations="[{name: 'resize', options: {width: 180, height: 180}}]"
:options="[{autoformat: 1}, {autoformat: 1, dpr: 2}]" :postfix="['1x', '2x']">
<div class="credits" v-if="image.user_metadata && image.user_metadata.unsplash_artist_id">
Photo by <a :href="`${image.user_metadata.unsplash_artist_id}`">{{image.static_metadata.exif.artist}}</a><br/>
on <a :href="`${image.user_metadata.unsplash_photo_id}`">Unsplash</a>
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 => {
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('').then(resp => {
resp.json().then(body => {
this.images = body.items
rokkaClient.sourceimages.list(rokkaOrg, {limit: 100}).then(result => {
this.images = result.body.items
You can’t perform that action at this time.