Lightbox prev, next and close symbols CSS

[focussing]

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?

[TerryZ]

Try update v-gallery to 1.2.3 version, and check if the control buttons is back to right color.

[focussing]

Thanks for the fast response! Yes! The control buttons are back. Thank you very much.

How did you fix it?

[focussing]

Okay via this I presume?

.blueimp-gallery-controls {
            h3.title, a.prev, a.next, a.close { color: white !important; }
        }

[focussing]

There is a similar component like yours; vue-gallery which you can instruct to open the lightbox just for one image. That is done using the "index" property. So in my case I would set the index to a certain value depending on the image I want to see, using the @click event of the image. In that case there is no need to place the "gallery" at a specific spot in the code.

How can I do that with your component?

[TerryZ]

Control buttons and close button not shown, because the default font color defined to black(#000) in your Vue root element of #app, and Bootstrap4 defined the link without href attribute will inherit by parent element.

So, Black color mask layer and the black color buttons is why you can't see them. I just make the control buttons color to white by force(!important).

[focussing]

Clear, thank you. You are fast! :)

I hope you have a solution to my previous question, I like your control very much!

[TerryZ]

My understanding is that

• Lightbox just show the click image only
• Not need to show navigation buttons( next, previous )
• Return index data of the image show in lightbox

is that correct ?

[focussing]

Please look at http://test.xplorex.eu at the bottom. In that project I use the other <vue-gallery> component. The component is placed somewhere in the document, index is set to null. So the gallery itself is not shown. There is only one <vue-gallery>. There are images with @click result in "index" being set.

• lightbox show the images defined in the array
• if there are more array's then only the images in that array are shown
• navigation buttons are still needed because of this

If you look at http://www.xplorex.eu click in the menu bar on "Performance", scroll a little bit down to the graphs. You can see that I used 4 galleries. This is probably not very efficient?

What I also notice: The 4 galleries are not responsive. They should adapt to 100% of the column width (there where the text is). How can that be fixed?

[TerryZ]

Please visit v-gallery demo at Gallery mode custom display. In the demo, you can check out the way to custom images galley.

btw: Update plugin to v1.2.4, it's add event to return currently show image index, close lightbox, the index will reset to -1.

example like that:

<v-gallery :images="list" :caption="false" @showed="showed" ></v-gallery>
<script>
    export default {
        methods:{
            showed(index){
                ...
            }
        }
    }
</script>

[focussing]

Sorry that I was not clear explaining myself.

Your component differs from the <vue-gallery> component. You display a gallery and when clicked one element of the gallery it shows in a lightbox.

The other component shows a gallery IN the lightbox so when the lightbox is opened.

What I meant was the following:

• one gallery component, with index=null, gallery and lightbox both not shown
• array with for example 3 images -> im[0] im[1] and im[2]
• when index is set to 1 -> lightbox is opened with im[1] shown
• prev and next buttons shift lightbox to im[0] and im[2]
• when index is set to null the lightbox closes

But that totally differs from how you setup your component. The showed event is not needed.

[focussing]

I think I found the responsive issue, maybe it is caused by this;

                .image-container {
                    display: table-cell;
                    vertical-align: middle;
                    height: 120px;
                    background-color: black;
                    img{
                        width: 160px;
                        display: block;
                        vertical-align: middle;
                    }
                }

The 'width' of the img of 160px creates the conflict with bootstrap column in my situation.