More then one gallery on the same page? about vue-image-lightbox

[pexea12]

You should change the ref key.

For example, you have 2 Lightbox A and Lightbox B

<LightBox 
        :images="imagesA" 
        ref="lightboxA"
        :show-light-box="false"
      ></LightBox>

<LightBox 
        :images="imagesB" 
        ref="lightboxB"
        :show-light-box="false"
      ></LightBox>

To open lightbox A, just do this.$refs.lightboxA.showImage(0). Similarly, to open lightbox B, this.$refs.lightboxB.showImage(0)

[egerb]

Aha, let me show a part of code:

<div v-for="message in messages" :key="message.id" :class="'row '+((message.from.charAt(0) == 'm') ? 'justify-content-start' : 'justify-content-end')">
              <b-card-body class="col-12 col-sm-8">
              <b-card :bg-variant="((message.from.charAt(0) == 'm') ? 'primary' : 'warning')" :header="getDate(message.date) + ' | # '+message.id + '| attachments = '+message.attachments.length">
                <p class="card-text" v-html="message.content">
                </p>
                <em v-if="message.attachments.length > 0" slot="footer">
                    <div class="row" >
                        <b-img v-for="(image, index) in pics[message.id]" rounded v-lazy="image.src" width="75" height="75" blank-color="#777" alt="img" class="m-1" @click="openGallery(message.id, index)" :key="index"/>
                    </div>

                    <LightBox v-if="message.attachments.length > 0"
                        :images="pics[message.id]"
                        :ref="'lightbox-'+message.id"
                        :show-caption="true"
                        :show-light-box="false"
                    ></LightBox>
                </em>
              </b-card>
            </b-card-body>

            </div>

As you see it's in loop, so I've tried as you said before, but I've got this insted one instance if lightbox:
0: VueComponent {_uid: 15, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 1: VueComponent {_uid: 19, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 2: VueComponent {_uid: 23, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 3: VueComponent {_uid: 27, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} 4: VueComponent {_uid: 31, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

[egerb]

I have {lightbox-24183: Array(5)} and 5 instances inside it with the same values... I guess this happens for every iteration

[pexea12]

I see. In this case, it is unnecessary to add lightbox to every step of the loop. Instead of that, you should use only 1 instance of lightbox and change your code a little bit.

<div v-for="message, messageIndex in messages" :key="message.id">
   <b-card-body class="col-12 col-sm-8">
      <p class="card-text" v-html="message.content">
      </p>
      <em v-if="message.attachments.length > 0" slot="footer">
        <div class="row" >
          <b-img 
            v-for="(image, imageIndex) in pics[message.id]"  
            v-lazy="image.src" 
            @click="openGallery(messageIndex, imageIndex)" 
            :key="index"
          />
        </div>
      </em>
    </b-card>
  </b-card-body>

</div>

<LightBox v-if="messages[currentIndex].attachments.length > 0"
   :images="pics[messages[currentIndex].id]"
   :ref="lightbox"
   :show-caption="true"
   :show-light-box="false"
></LightBox>

The variable currentIndex is the index of messages that you select. Therefore, you should change your openGallery method a little bit:

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

methods: {
  openGallery(messageIndex, imageIndex) {
    this.$set(this, 'currentIndex', messageIndex)
    ... // Your old method
  }
}

You would need to render only 1 instance of lightbox in this case and the rendering performance would be much better

[egerb]

Got it, let me try

[egerb]

Hmm, I 'v got weird situation, in openGallery:
console.log(this.$refs); console.log(this.$refs.lightbox);
shows:
{} lightbox: VueComponent {_uid: 25, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} __proto__: Object
and
undefined

[pexea12]

I think you should remove v-if in lightbox or change it to v-show

[egerb]

OMG, right, thanx a lot, worked!

[pexea12]

No problem. I am not sure what the idea of v-if in this case. I think you should remove it because changing to v-show doesn't mean anything.

[egerb]

Let me explain:
I 'v got list of messages, every message could have an attachments or not.
When I fetching messages from server - I put all attachments to pics list : pics[message.id] = [array of objects for light box]
Then on click I need to activate your component and point images property to related pics[message.id].
And now I see errors in console because I changing dynamically currentGalleryInex and it = null from the start...

[pexea12]

My code sample is just a demo. I think you should check the currentIndex more to make sure everything work. For example, you can change currentIndex to 0 at the beginning.

[egerb]

In my case I've used message Id as index and I've used v=if or v-show to activate component if I have attachments, because sometimes I haven't, and I don't want to initiate component.