How to use lightgallery.js with Vue #60

ymyang · 2017-04-16T13:43:46Z

No description provided.

QuentinPotgieter · 2017-10-06T10:00:23Z

Hi, I am also very keen to using lightgallery.js on a Vue application. Please provide support for Vue.

usb248 · 2018-04-20T20:59:09Z

In your vue app directory :
install via with npm install lightgallery.js
import js+css with @ import/import/require in index.js or main.js or directly in your html file and use mounted event :

mounted () {
      lightGallery(document.getElementById('your-id')); 
},

tTakia88 · 2018-04-28T00:27:41Z

I need to learn java from the very beginning can you suggest me how can I learn faster and from where shall i start java

rickycheers · 2018-05-02T15:00:39Z

@tTakia88 If what you mean is to start learning JavaScript, then I suggest you start here https://www.javascript.com/

volkanciloglu · 2018-06-19T07:29:02Z

I use $npm install lightgallery.js

./node_modules/lightgallery.js/dist/fonts/lg.ttf?n1z373
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

PanJiaChen · 2018-09-18T05:24:03Z

<template>
  <div class="app-container">
    <div id="lightgallery">
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-6-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-6.jpg" >
      </a>
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-12-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-12.jpg" >
      </a>
    </div>
  </div>
</template>

import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'

export default {
  name: 'IssueDetail',
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    const el = document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}

sensoeurn · 2018-12-12T09:45:06Z

I met the same problem. now I can use it.
Thank PanJiaChen

dodanex · 2019-02-08T18:37:53Z

Hello, how can I use this with Nuxt? I got an error window not defined
Can someone provide an code example, maybe using ref ?

avblink · 2019-04-15T16:08:53Z

Instructions for NUXT:

Install lightgallery.js and whatever relevant plugins:

yarn add lightgallery.js lg-videos.js

in 'plugins' folde create lightgallery.client.js
Make sure you include .client. in the file name. This tells NUXT to render the module only on client side. Otherwise you will get 'window not defined' error.

In the file add the following:

import Vue from 'vue'
import lightgallery from 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'
import 'lg-video.js'

Vue.use(lightgallery)

Now in nuxt.config.js add this:

  plugins: [
    { src: '~/plugins/lightgallery.client.js' }
  ],

And in your component (vue) file this:

export default {
  mounted() {
    const el = document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}
</script>

Your gallery should now work

afs2015 · 2019-04-18T16:55:46Z

Any suggestions for Vuepress 0.x? My main struggle is dealing with the similar error that dodanex posted.

catman85 · 2019-04-25T16:42:16Z

Hello! I am trying to use this on nuxt.js and I have the same problem as @dodanex . @avblink Do you have any suggetsions?
It probably has something to do with Server Side Rendering

catman85 · 2019-04-25T18:17:14Z

Ok guys I figured this out! @dodanex @avblink @afs2015
you need to set ssr to false in the plugins section of "nuxt.config.js"
Now it works!

afs2015 · 2019-04-25T18:39:03Z

Thanks @catman85 unfortunately this only helps with setting this up in nuxt and not Vuepress.

flyingL123 · 2019-11-24T15:28:37Z

@VCodepp I am having the same issue that you mentioned. How did you get it working? Is there some special loader I am missing from webpack? I am importing css files from other packages fine.

I am simply doing:

import gallery from 'lightgallery.js';
import 'lightgallery.js/dist/css/lightgallery.css';

But I get the error you mentioned:

index.js:116 Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

flyingL123 · 2019-11-24T15:53:26Z

I got it working by adding this to my webpack module.rules:

{
              test: /\.(ttf|eot|svg|png|jpg|gif|ico|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: 'file-loader'
},

stale · 2021-05-18T21:18:56Z

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.

tarangshah19 · 2021-05-25T06:19:12Z

lightgallery on click image page refresh in nuxt how to solved?

mounted() {
let el = document.getElementById('lightgallery');
lightGallery(el);
window.lightGallery(document.getElementById('lightgallery')).addEventListener('click', function() {
el.insertAdjacentHTML('beforeend', this.gallery);
window.lgData[el.getAttribute('lg-uid')].destroy(true);
lightGallery(el);
}, false);
this.getMedia();
},
methods:{
getMedia() {
this.$axios
.$get(
process.env.BASE_URL + "/getgalleryMediaNew/6062cf8f2adcee001bbc2dae/Image",
{
timeout: 120000,
}
)
.then((resp) => {
this.gallery = resp;
console.log(this.gallery)
})
}
}

kainbacher · 2021-08-23T08:36:16Z

I have tried it with nuxt but in my case it's not working.

"lightgallery.js": "^1.1.3"
"nuxt": "^2.15.7",

I have also tried with newer version of lightgallery.

nuxt.config.js

  plugins: [
    { src: "~/plugins/lightGallery.client.js", ssr: false }
  ],

lightGallery.client.js

import Vue from 'vue'
import lightgallery from 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'

Vue.use(lightgallery)

component

<template>
  <base-page>
    <client-only>
      <div id="lightGallery">
        <a
          href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-6-lg.jpg"
        >
          <img
            src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-6.jpg"
          />
        </a>
        <a
          href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-12-lg.jpg"
        >
          <img
            src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-12.jpg"
          />
        </a>
      </div>
    </client-only>
  </base-page>
</template>

<script>
// import PinchZoom from 'vue-pinch-zoom'
import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'

export default {
  mounted() {
    const el = document.getElementById('lightGallery')
    window.alert('I work only on client sidee')
    window.lightGallery(el)
  },
}
</script>

<style scoped>
</style>

i have no error message. any ideas how to solve this?

Uraharadono · 2021-08-24T13:10:05Z

Nothing from given answers helped me when I was setting up LightGallery with VueJS recently.

I am using "vue": "^2.6.12",for my custom WebPack (not CLI) project and npm installed latest version of gallery:
"lightgallery": "^2.2.0",

After dabbing with this setup longer than I should have I have finally made it work. LONG LIVE DOCUMENTATON !!!

<template>
  <div class="app-container">
	<div id="lightgallery">
	  <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-6-lg.jpg">
		<img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-6.jpg">
	  </a>
	  <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-12-lg.jpg">
		<img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-12.jpg">
	  </a>
	</div>
  </div>
</template>

import lightGallery from 'lightgallery';
// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

export default {
	name: 'ArticleImages',
	data() {
		return {
			imageList: []
		}
	},
	mounted() {
		lightGallery(document.getElementById('lightgallery'), {
			plugins: [lgZoom, lgThumbnail],
			// licenseKey: 'your_license_key'
			speed: 500,
			// ... other settings
		});
	}
}

maxvanweenen · 2022-01-18T10:46:10Z

Any way to get this to work with Nuxt 3? the current nuxt solution is for nuxt 2 both that and the normal installation does not work for nuxt 3.

-- EDIT because I got it to work in Nuxt 3 --

For anybody stuck with this:
You don't need to make a plugin for this, just npm install lightgallery

example markup:


<lightgallery
      :settings="{ speed: 300, controls: false, plugins: plugins }"
      :onInit="onInit"
      :onBeforeSlide="onBeforeSlide"
  >
    <a
        class="gallery-item"
        :src="'//vimeo.com/' + video.attributes.VimeoID"
        data-poster=""
        data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>"
    >
      <div class="ratio video--image">
        <img :src="imageUrl" :alt="video.attributes.Title" loading="lazy" class="object-fit-cover"/>
        <div class="justify-content-center align-items-center d-flex">
          <div class="play-btn">PLAY</div>
        </div>
      </div>
    </a>
  </lightgallery>

and use this script:

<script>
import Lightgallery from 'lightgallery/vue';
import lgZoom from 'lightgallery/plugins/zoom';
import lgVideo from 'lightgallery/plugins/video';

export default {
  name: 'App',
  components: {
    Lightgallery,
  },
  data: () => ({
    plugins: [lgZoom, lgVideo],
  }),
  methods: {
    onInit: () => {
      console.log('lightGallery has been initialized');
    },
    onBeforeSlide: () => {
      console.log('calling before slide');
    },
  },
};
</script>

<style lang="css">
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css');
</style>

Hope this helps somebody

MartinX3 · 2022-07-10T12:39:40Z

@maxvanweenen I tried it with nuxt-bridge and get the error

Module build failed (from ./node_modules/css-loader/dist/cjs.js):                                                                                           friendly-errors 14:31:47
Error: Can't resolve '../fonts/lg.woff2?io9a6k'

Probably because of the @import 'lightgallery/scss/lightgallery.scss';

If I comment it out and try the lightgallery it errors out with a

client.js?06a0:100 TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js?e0a7:3:1)
    at Lightgallery (LightGallery.vue?49da:104:1)
    at resolveAsyncComponent (vue.runtime.esm.js?2b0e:2722:1)
    at createComponent (vue.runtime.esm.js?2b0e:2142:1)
    at _createElement (vue.runtime.esm.js?2b0e:2330:1)
    at createElement$1 (vue.runtime.esm.js?2b0e:2269:1)
    at vm._c (vue.runtime.esm.js?2b0e:2561:1)
    at Proxy.render (DView.vue?0082:107:1)
    at Vue._render (vue.runtime.esm.js?2b0e:2610:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:3034:1)

gaurav-kerkar · 2022-11-07T07:46:38Z

I'm getting
"500
[vite-node] [ERR_MODULE_NOT_FOUND] lightgallery/vue" error, any fix for this?

MartinX3 · 2022-11-07T07:48:58Z

The project seems to be dead.
It's good that vuetify 3 will get a native image gallery.
Until now I use https://github.com/DerYeger/vue2-masonry-wall with some performance problems.

gaurav-kerkar · 2022-11-07T09:02:53Z

The project seems to be dead. It's good that vuetify 3 will get a native image gallery. Until now I use https://github.com/DerYeger/vue2-masonry-wall with some performance problems.

Thanks @MartinX3 , but i want to implement image gallery in my project

duongthaison98 · 2023-03-01T04:38:30Z

Hi, how can I use plugins such as lgZoom and lgThumbnail in Nuxtjs 2.15.8

AhmedKaram50 · 2023-03-14T21:33:14Z

Hi
I found a real solution for Nuxt3
here is the solution

1- you should install the package via npm or yarn normally npm install lightgallery
2 - in your component you will import your lightgallery and it's plugin but you will import the js directly like this

import Lightgallery from 'lightgallery/vue/LightGalleryVue.umd.js';
import lgZoom from 'lightgallery/plugins/zoom/lg-zoom.umd.js';
import lgVideo from 'lightgallery/plugins/video/lg-video.umd.js';

const plugins = [lgZoom, lgVideo]

3- simple template usage

<lightgallery :settings="{ speed: 300, controls: true, plugins: plugins }">
    <a
      data-lg-size="1406-1390"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>"
    >
      <img
        style="width: 200px"
        class="img-responsive"
        src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
  </lightgallery>

4- import css in your scoped style

<style lang="scss" scoped>
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css");
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css");
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css");
</style>

i hope it will help anyone struggling with this and Nuxt 3

moseskamau338 · 2023-07-16T06:48:42Z

i hope it will help anyone struggling with this and Nuxt 3

You are just amazing!

I've struggled for a whole week with this. Thanks, now am good to go.

stale bot added the v1 label May 18, 2021

stale bot closed this as completed May 19, 2021

sachinchoolur mentioned this issue May 25, 2021

lightgallery on click image page refresh in nuxt sachinchoolur/lightGallery#1015

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use lightgallery.js with Vue #60

How to use lightgallery.js with Vue #60

ymyang commented Apr 16, 2017

QuentinPotgieter commented Oct 6, 2017

usb248 commented Apr 20, 2018 •

edited

Loading

tTakia88 commented Apr 28, 2018

rickycheers commented May 2, 2018

volkanciloglu commented Jun 19, 2018

PanJiaChen commented Sep 18, 2018 •

edited

Loading

sensoeurn commented Dec 12, 2018

dodanex commented Feb 8, 2019

avblink commented Apr 15, 2019

afs2015 commented Apr 18, 2019

catman85 commented Apr 25, 2019 •

edited

Loading

catman85 commented Apr 25, 2019

afs2015 commented Apr 25, 2019

flyingL123 commented Nov 24, 2019 •

edited

Loading

flyingL123 commented Nov 24, 2019

stale bot commented May 18, 2021

tarangshah19 commented May 25, 2021 •

edited

Loading

kainbacher commented Aug 23, 2021 •

edited

Loading

Uraharadono commented Aug 24, 2021

maxvanweenen commented Jan 18, 2022 •

edited

Loading

MartinX3 commented Jul 10, 2022 •

edited

Loading

gaurav-kerkar commented Nov 7, 2022 •

edited

Loading

MartinX3 commented Nov 7, 2022 •

edited

Loading

gaurav-kerkar commented Nov 7, 2022

duongthaison98 commented Mar 1, 2023

AhmedKaram50 commented Mar 14, 2023 •

edited

Loading

moseskamau338 commented Jul 16, 2023

How to use lightgallery.js with Vue #60

How to use lightgallery.js with Vue #60

Comments

ymyang commented Apr 16, 2017

QuentinPotgieter commented Oct 6, 2017

usb248 commented Apr 20, 2018 • edited Loading

tTakia88 commented Apr 28, 2018

rickycheers commented May 2, 2018

volkanciloglu commented Jun 19, 2018

PanJiaChen commented Sep 18, 2018 • edited Loading

sensoeurn commented Dec 12, 2018

dodanex commented Feb 8, 2019

avblink commented Apr 15, 2019

afs2015 commented Apr 18, 2019

catman85 commented Apr 25, 2019 • edited Loading

catman85 commented Apr 25, 2019

afs2015 commented Apr 25, 2019

flyingL123 commented Nov 24, 2019 • edited Loading

flyingL123 commented Nov 24, 2019

stale bot commented May 18, 2021

tarangshah19 commented May 25, 2021 • edited Loading

kainbacher commented Aug 23, 2021 • edited Loading

Uraharadono commented Aug 24, 2021

maxvanweenen commented Jan 18, 2022 • edited Loading

MartinX3 commented Jul 10, 2022 • edited Loading

gaurav-kerkar commented Nov 7, 2022 • edited Loading

MartinX3 commented Nov 7, 2022 • edited Loading

gaurav-kerkar commented Nov 7, 2022

duongthaison98 commented Mar 1, 2023

AhmedKaram50 commented Mar 14, 2023 • edited Loading

moseskamau338 commented Jul 16, 2023

usb248 commented Apr 20, 2018 •

edited

Loading

PanJiaChen commented Sep 18, 2018 •

edited

Loading

catman85 commented Apr 25, 2019 •

edited

Loading

flyingL123 commented Nov 24, 2019 •

edited

Loading

tarangshah19 commented May 25, 2021 •

edited

Loading

kainbacher commented Aug 23, 2021 •

edited

Loading

maxvanweenen commented Jan 18, 2022 •

edited

Loading

MartinX3 commented Jul 10, 2022 •

edited

Loading

gaurav-kerkar commented Nov 7, 2022 •

edited

Loading

MartinX3 commented Nov 7, 2022 •

edited

Loading

AhmedKaram50 commented Mar 14, 2023 •

edited

Loading