LS1231 / Vue Preview
Licence: mit
A Vue Integrated PhotoSwipe Image Preview Plugin
Stars: ✭ 639
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
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
Rxgalleryfinal
图片选择库，单选/多选、拍照、裁剪、压缩，自定义。包括视频选择和录制。
Stars: ✭ 2,798 (+337.87%)
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
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].