Home / Vue.js / Overlay

v-gallery - A Vue2 plugin for images show in gallery or carousel

v-gallery A Vue2 plugin for images show in gallery or carousel Demo、Document Explorer on English site 国内站点 If you think this project is helpful, pleas
Information
Category: Vue.js / Overlay
Watchers: 3
Star: 62
Fork: 17
Last update: May 24, 2023
Resource links
https://terryz.github.io/vue/#/gallery
https://github.com/TerryZ/v-gallery



v-gallery


v-gallery

A Vue2 plugin for images show in gallery or carousel






Demo、Document

Explorer on

If you think this project is helpful, please star it.



Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution



Plugin preview

Gallery mode light theme

light

Gallery mode dark theme

dark

Carousel

carousel



Dependent on

blueimp Gallery

5 Open More issues
Closed

Uncaught TypeError: Cannot read property 'style' of undefined while using Carousel

While using v-gallery, the gallery seems to be working fine. However, when I change the type to carousel, I get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined while using Carousel

This error appears seconds after rendering.

Down here you can see the code I'm working with. The list is populated via the props on the component. They are working fine with the gallery type.

<script>
    import collect from 'collect.js';

    export default {
        props: [
            'jsonList',
            'apiUrl',
        ],

        data(){
            return {
                list: null,
            }   
        },

        mounted() {
            let parsedJSON = collect(JSON.parse(this.jsonList));

            this.list = parsedJSON.map((image) => {
                return {
                    title: image.custom_properties.alt,
                    url: this.apiUrl + image.id + "/" + image.file_name
                }
            }).toArray();
        }
    };
</script>
opened Jan 28, 2019 by Elandlord 4
Closed

有没有考虑做手指捏放功能？

现在可以用手势切换图片了，但是捏放（放大缩小）功能缺失

opened Jul 16, 2018 by MoreUI 1
Open

v-gallery vuepress

using v-gallery in vue press

v-gallery works satis during dev Below error during build

ReferenceError: document is not defined at n (node_modules/v-gallery/dist/v-gallery.js:1:2026) at o (node_modules/v-gallery/dist/v-gallery.js:1:1856) at t.exports (node_modules/v-gallery/dist/v-gallery.js:1:3540) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:14711) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:3903) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:11594) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at Object.<anonymous> (node_modules/v-gallery/dist/v-gallery.js:1:11471) at e (node_modules/v-gallery/dist/v-gallery.js:1:348) at server-bundle.js:6537:566

  • any suggestions ? , it works on the v-gallery documentation site using vuepres

Request

if you could point to the original docs for the v-gallery documentation site on git hub that would be highly helpful

opened Jan 20, 2021 by shriaviator 4
Open

Chrome 80 tab crashes when using v-gallery

Chrome 80 is crashing for some reason when interacting with v-gallery along with a few other libraries (Vue, VueRouter, and VueFilepond).

  • Not sure exactly which library is causing the crash, but it occurs immediately after interacting with v-gallery. I cannot reproduce it without all four libraries in the project together. This code represents a minimal reproducible example.

  • I've not been able to reproduce the bug in Chrome Canary 81, Firefox 74, or Safari 13.

  • Also reproduces in Incognito Mode without any extensions enabled

screencast_lowres

Steps to reproduce

  1. Install project from https://github.com/tony19-sandbox/chrome-crash-demo:
npm install
  1. Start development web server:
npm run serve

  1. Open http://localhost:8080/demo in Chrome 80

  2. Click image to open lightbox (via v-gallery)

  3. Close lightbox.

  4. Click image again. Observe Chrome tab crashes (Aw, Snap!)

Environment

  • macOS Catalina 10.15.3
  • Chrome Version 80.0.3987.149 (Official Build) (64-bit)
  • MacBook Pro 15", 2016
opened Mar 20, 2020 by tony19 0
Open

pagination support

opened Sep 6, 2019 by parmindersingh1 0
Open

Error: Failed to mount component

The error is : Failed to mount component: template or render function not defined.

opened Jul 1, 2019 by CODEOrz 2
Open

Lightbox prev, next and close symbols CSS

Please look at this click in the menu bar on "Performance", scroll a little bit down and click on one of the graphs.

The prev, next and close symbols are not shown. When I use the developer tools I can switch off color: inherit and they are back. Maybe it has a relation with my usage of Bootstrap4?

How can I fix that?

opened Jul 26, 2018 by focussing 11

Contents

    s950329 vue-owl-carousel Owl Carousel 2vue-owl-carousel - Vue component for Owl Carousel 2
    RobinCK vue-gallery - VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. Based on blueimp-gallery
    loo41 vue-canvas-carousel vuc-carouselvue-canvas-carousel - Vue canvas component for vuc-carousel
    Webapper Bootstrap 3 & Font Awesome 4 compatible, modern, HTML5 + CSS3 + jQuery carousel
    mengxiong10 vue2-datepicker - A beautiful datepicker / datetimepicker component for Vue2
    xiaolin React carousel image gallery component with thumbnail support 🖼
    nicholaswright A jQuery plugin for transitioning between a Bootstrap grid and carousel.
    sainf vue2-siema - Plugin wrapper for the very tiny Siema carousel/slider library.
    lsycxyj vue-l-carousel - A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.
    gs-shop vue-slick-carousel - A carousel with slick features & SSR support written for faster Luxstay
    dibakarece This is a simple Gallery View Demo project. Which help you to learn, how to create Own Gallery App like android Gallery
    lincenying mmf-blog-vue2 - A blog based on Vue2(Vue-router, Vuex) and Webpack2.
    wlada vue-carousel-3d - Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js.
    SSENSE vue-carousel - A flexible, responsive, touch-friendly carousel for Vue.js.
    guowilling A carousel view that only uses two UIImageView to achieve infinite carousel.
    shaileshmamgain5 Carousel-Notification lets you make carousel type notification where user can navigate within the notification. Selected item can be obtained using a broadcast receiver.
    davidsamacoits React Native Swipeable Parallax Carousel
    sparrow007 Carousel Recyclerview let's you create carousel layout with the power of recyclerview by creating custom layout manager.
    davidcetinkaya A lightweight carousel library with fluid motion and great swipe precision.
    FormidableLabs Pure React Carousel Component
    ibufu vue2-scrollspy - A scrollspy plugin and animated scroll-to.
    Share this repo

    Related Repos


    Overlay
    8
    A simple Emacs configuration with modal editing
    DogLooksGood A simple Emacs configuration with Meow Work in progress. Installation Download the repo and put it anywhere yo want. Start Emacs with emacs -q -l /pat
     
    Overlay
    8
    Creating, storing and analyzing multi-modal transportation networks
    triply-at Creating, storing and analyzing multi-modal transportation networks with GTFS-Multi feeds The gtfsmulti R package implements a very experimental appro
     
    Overlay
    3
    A tiny svelte component that provides a mostly unstyled, WAI-ARIA accessible modal dialog ...
    Tropix126 svelte-aria-dialog Yet another Svelte dialog component. Why? While there are plenty of packages out there that provide modals or dialogs in Svelte, mo
     
    Overlay
    10
    Responsive Popup Modal Using HTML CSS & JavaScript
    bedimcode Responsive Popup Modal 🔥 Watch it on youtube Responsive Popup Modal 🔥 Responsive Popup Modal Using HTML, CSS and JavaScript. Contains 3 transition a
     
    Overlay
    12
    Jenesius vue modal is simple library for Vue 3 only
    Jenesius Jenesius vue modal is simple library for Vue 3 only
     
    Overlay
    15
    Proof of Concept: Load any route into a modal with Inertia.js
    protonemedia Inertia Vue Modal POC I've copied the default Laravel Jetstream modal component for this demo. Blog post Proof of Concept: Load any route into a modal
     
    Overlay
    41
    Laracon 2020 Examples
    jessarcher Laracon 2020 Examples This is just a standard Vue-CLI app with Vue 3, vue-router, and Tailwind CSS installed. I've created a few different pages to de
     
    Overlay
    5
    xmodal-vue - 🚀 A simplistic and easy to use wrapper around your components that will help...
    XeniacDev 🎉 Xmodal-Vue demo ================================== get rid of those ugly 💩 predefined modals xmodal will let you define custom components and show
     
    Overlay
    193
    vuetify-dialog - Dialogs easy to use with Vuetify.
    yariksav vuetify-dialog This module will help you work with vuetify dialogs without annoyed templates Implementation of vuedl dialog helper with Vuetify.js fra
     
    Overlay
    94
    vue-tinybox - a tiny (only 2.5 KB minzipped) and slick lightbox gallery. Optimized for bot...
    kytta vue-tinybox A slick, yet tiny lightbox gallery for Vue.js Slick. No excessive design. Pictures, thumbnails, controls. Tiny. Dependency-free. Less than
     
    Overlay
    612
    vue-sweetalert2 - wrapper for sweatlaert2 with support for TypeScript, Nuxt and SSR
    avil13 vue-sweetalert2 Vue.js wrapper for SweetAlert2. With support SSR. Demo Get started Basics # bash npm install -S vue-sweetalert2 Add types to TypeScrip
     
    Overlay
    36
    vue-stackable-modal - Library for modal dialogs which can be stacked. Fully customizable a...
    Innologica Stackable modal Stackable modal is a library for modal dialogs which can be stacked by using z-index position. The component uses bootstrap for stylin
     
    Overlay
    29
    vue-modal 🖼 - Feed your objects array for multiple switchable modal content or quickly in...
    MelMacaluso Vue Modal 🖼 Intro Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content /
     
    Overlay
    39
    vue-img-orientation-changer - A Vue.js directive that automatically adjust your img to cor...
    nikli2009 Vue Img Orientation Changer English | 简体中文 A vue directive that fixes your jpeg jpg tiff files orientation. TIPS: This can really help you stay away f
     
    Overlay
    53
    vue-my-photos - A simple dependency-free image lightbox component with filtering capabilit...
    am283721 Simple Image Lightbox for Vue.js No dependencies required! Inspired by vue-pure-lightbox, however I needed a framework that allowed for a gallery of t