With multiple using vue-gallery component on one page gallery breaking

[TishinIlia]

As I understand, when you have more then one gallery on one page, click event add class "blueimp-gallery-display" for every gallery and another problems. Check it

[lyczkodominik]

@up Same problem here

[deshi9012]

@up Same problem

[desmartDev]

For workaround, you can wrap the component with v-if Example

<vue-gallery v-if="gallery1"
:images="galleryImages1"
:index="index1"
:options="options1"
@close="index1 = null"
></vue-gallery>

<vue-gallery
v-if="gallery2"
:images="galleryImages2"
:index="index2"
:options="options2"
@close="index2 = null"
></vue-gallery>

It's works for me

[VaculikR]

My workaround was to set another class to the one of the galleries. <gallery class="another-class" :images="roomObject.images" :index="index" @close="index = null"></gallery>

and make it

.another-class { background-color transparent !important }

it applies the transparency only on the image, so the background stays, and the image is sort of fixed

[shershen08]

great solution @VaculikR , actually I did like so:

// in template
<gallery :id="id" ..

// in JS
   props: {
      id: String,

[seyfer]

@shershen08 yes, setting different id works.

[pratamatama]

Same problem here, in my case, I have sets of data, when I click the gallery which differentiated by the IDs, it opened altogether at the same time causing a memory leak and hangs up the browser.

How to reproduce

1. Make a sets of data, for example: rowA, rowB, and rowC
2. Make sure each data has 5 or more images to be rendered
3. Iterate and render the data inside a table
4. Use the gallery inside the table in which column the images is rendered, also use the ID's to fill the gallery's id
5. Click the gallery and the browser will tell an alert with message of this page isn't responding

[trboy080]

I had the same problem. Setting the ID prop solved my use case. Maybe there could be a problem in component mounted.

mounted() { if (this.carousel) { this.open(); } },

I made bad experience (instance problems) when doing stuff in mounted.

[kofiasare]

@VaculikR and @shershen08 thanks