Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-gallery
Advanced tools
Readme
:camera: VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Recommended: https://unpkg.com/vue-gallery, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-gallery/
npm install vue-gallery
yarn add vue-gallery
vue-gallery.client.js
to your nuxt plugins folder. It is important that your filename ends in .client.js
(more info on this convention, only works from Nuxt v.2.4.0).import Vue from 'vue'
import VueGallery from 'vue-gallery'
Vue.component('VGallery', VueGallery)
nuxt.config.js
:plugins: ['~plugins/vue-gallery.client.js']
<v-gallery :images="images"
:index="index"
@close="index = null" />
<template>
<div>
<gallery :images="images" :index="index" @close="index = null"></gallery>
<div
class="image"
v-for="(image, imageIndex) in images"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null
};
},
components: {
'gallery': VueGallery
},
}
</script>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
<script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
<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="vue-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/blueimp-gallery@2.27.0/css/blueimp-gallery.min.css">
<div id="app">
<gallery :images="images" :index="index" @close="index = null"></gallery>
<div
class="image"
v-for="image, imageIndex in images"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff'
],
index: null
};
},
components: {
'gallery': VueGallery
}
});
</script>
Props | Type | Default | Description |
---|---|---|---|
images | Array | [] | Urls list |
index | Number | null | Opened image index |
options | Object | blueimp-gallery options |
Name | Params | Description |
---|---|---|
onopen | ||
onopened | ||
onslide | ||
onslideend | ||
onslidecomplete | ||
onclose | ||
onclosed |
Fix: Give each gallery a unique id. jsFiddle Example
It's because the image isn't in the "correct" orientation and the exif orientation data is what "fixes" the orientation when you view the images. Browsers don't fix the image orientation based on the exif data. Some browsers show it "correctly" when you open the image in a new tab by itself but don't fix it if you use the image link in a src attribute. Relevant stackoverflow.
Fix: Use the onslide
callback to read the exif data and "correct" the orientation based of the exif orientation. More info on blueimp-gallery.
Code excerpt:
<gallery :options="options" :images="images" :index="index" @close="index = null"/>
data() {
//...
options: {
onslide: function(index, slide) {
const rotation = {
1: 'rotate(0deg)',
3: 'rotate(180deg)',
6: 'rotate(90deg)',
8: 'rotate(270deg)'
}
//Conditionally change rotation of image based on the image orientation data. Example jsfiddle --> https://jsfiddle.net/orotemo/obvna6qn/ Or use something like https://github.com/mattiasw/ExifReader
//But for this example, the fix has been hardcoded.
slide.getElementsByTagName(
'img'
)[0].style = `transform: ${rotation['3']};`
}
}
}
Project | Status | Description |
---|---|---|
vue-ls | Vue plugin for work with local storage, session storage and memory storage from Vue context | |
vue-popper | VueJS popover component based on popper.js |
# install dependencies
npm install
# build dist files
npm run build
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
MIT © Igor Ognichenko
FAQs
VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
The npm package vue-gallery receives a total of 3,175 weekly downloads. As such, vue-gallery popularity was classified as popular.
We found that vue-gallery demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.