All Projects â†’ LS1231 â†’ Vue Preview

LS1231 / Vue Preview

Licence: mit
A Vue Integrated PhotoSwipe Image Preview Plugin

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Preview

Kiimagepager
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
🍉 Album and Gallery for Android platform.
Stars: ✭ 2,430 (+280.28%)
Mutual labels:  image, gallery
Googliser
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
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (-69.33%)
Mutual labels:  image, gallery
Rxgalleryfinal
图片选择库,单选/多选、拍照、裁剪、压缩,自定义。包括视频选择和录制。
Stars: ✭ 2,798 (+337.87%)
Mutual labels:  image, gallery
Xzoom
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
Ptshowcaseviewcontroller
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
Croperino
📷 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
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+195.62%)
Mutual labels:  image, gallery
Ptimagealbumviewcontroller
"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
Stfalconimageviewer
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
previewSlider
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
Imageslideshow
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

Requirements

PhotoSwipe

Demo

Live Demo >>

Installation

npm i vue-preview -S

Usage

Notice:

  • This plugin currently support vue2.5 and above

Install plugin

import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

// 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
})

Examples

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

<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

Prop

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

Events

Event name Description parameter
close close gallery nothing

License

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].