All Projects â†’ LS1231 â†’ Vue Preview

LS1231 / Vue Preview

Licence: mit
A Vue Integrated PhotoSwipe Image Preview Plugin

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Preview

The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (-49.3%)
Mutual labels:  image, gallery, preview
🍉 Album and Gallery for Android platform.
Stars: ✭ 2,430 (+280.28%)
Mutual labels:  image, gallery
a fast BASH multiple-image downloader
Stars: ✭ 202 (-68.39%)
Mutual labels:  image, gallery
Borgert Cms
Borgert is a CMS Open Source created with Laravel Framework 5.6
Stars: ✭ 298 (-53.36%)
Mutual labels:  image, gallery
Recent Images
Do you noticed the new feature of Telegram or Instagram?! They show your latest images when you try to attach or post a picture. So I developed this library the same with lots of customization. Simple way to get all images of device based on date taken, name, id and other customization
Stars: ✭ 182 (-71.52%)
Mutual labels:  image, gallery
A lightbox inspired Vue.js component.
Stars: ✭ 196 (-69.33%)
Mutual labels:  image, gallery
Stars: ✭ 2,798 (+337.87%)
Mutual labels:  image, gallery
jQuery Zoom Gallery plugin
Stars: ✭ 120 (-81.22%)
Mutual labels:  image, gallery
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (-44.91%)
Mutual labels:  image, preview
An initial implementation of a "showcase" view( controller) for iOS apps... Visualizes images, videos and PDF files beautifully! (by @pittleorg) [meta: image, photo, video, document, pdf, album, gallery, showcase, gallery, iOS, iPhone, iPad, component, library, viewer]
Stars: ✭ 395 (-38.18%)
Mutual labels:  image, gallery
📷 A simple image cropping tool that provides gallery or camera help for Native Android (Java)
Stars: ✭ 176 (-72.46%)
Mutual labels:  image, gallery
React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: ✭ 502 (-21.44%)
Mutual labels:  image, gallery
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+195.62%)
Mutual labels:  image, gallery
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (-68.86%)
Mutual labels:  image, gallery
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+171.36%)
Mutual labels:  image, gallery
Responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.
Stars: ✭ 16 (-97.5%)
Mutual labels:  gallery, preview
V Viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
Stars: ✭ 1,776 (+177.93%)
Mutual labels:  image, gallery
Swift image slideshow with circular scrolling, timer and full screen viewer
Stars: ✭ 1,612 (+152.27%)
Mutual labels:  image, gallery
Gallery Dl
Command-line program to download image galleries and collections from several image hosting sites
Stars: ✭ 4,199 (+557.12%)
Mutual labels:  image, gallery
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (-34.74%)
Mutual labels:  image, gallery

Vue preview plugin

一 A Vue Integrated PhotoSwipe Image Preview Plugin




Live Demo >>


npm i vue-preview -S



  • This plugin currently support vue2.5 and above

Install plugin

import VuePreview from 'vue-preview'

// defalut install

// with parameters install
Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false


  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>

export default {
    data () {
      return {
        slide1: [
            src: '',
            msrc: '',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
            src: '',
            msrc: '',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
    methods: {
      handleClose () {
        console.log('close event')


slide item options
Property Description
src main (large) image
msrc small image
alt image replacement text
w image width
h image height


Event name Description parameter
close close gallery nothing


MIT Copyright (c) 2018 liusong

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].