Building an image gallery with lightbox containing carousel

Hi, I am building a Website in Laravel 5.5, using Vue2, with multiple sites containing image galleries. These galleries show thumbnail images. When each thumbnail is clicked, a lightbox shall appear showing the large image. In this lightbox, all the other images of the gallery shall be shown in a carousel.

I stored the image names in an array in my route:

Route::get('/ludwigsburger_strasse', function () {
    $header = "home";
    $pics = ['Praxisbild_LB1', 'Praxisbild_LB2', 'Praxisbild_LB3', 'Praxisbild_LB4'];
    return view('pages.standorte.alleecenter', compact('header', 'pics')); })->name('ludwigsburger');

There will be several distinct routes with distinct image names in the future. Next, I created an include file for the gallery:

<div class="galleryBox">
    @foreach ($pics as $pic)
        <figure>
            <img src="/img/standorte/{{ $pic }}_thumbnail.jpg" @click="showGalleryModal=true">
        </figure>
    @endforeach
</div>

Further, this is my app.js containing the Vue code - notice the component I use for the modal which is showing up on click:

require('./bootstrap');
window.Vue = require('vue');

window.Event = new Vue();

Vue.component('modal', {
    template: `
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                <slot></slot>
            </div>
            <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
        </div>
    `
});

new Vue({
    el: '#root',
    data: {
        showGalleryModal: false
    }
});

The root element is the main section of my HTML document. And finally, this is my HTML markup including the gallery and calling the modal component:

<div class="contentRev">
        @include('layouts.gallery')
    </div>
    <modal v-if="showGalleryModal" @close="showGalleryModal=false">
        <figure class="image">
            <img src="/img/standorte/Praxisbild_LB1.jpg" @click="showGalleryModal=true">
        </figure>
    </modal>

How can I do the following:

I need to submit some kind of id for each image or image name to tell Vue which image was clicked and which shall be shown in the modal. I thought it would be nice to use the key value of the pics array in the route, but how on earth can I submit it to my Vue instance? I tried to submit it as prop directly to the modal component, but this didn't work.
Having solved the issue above, how do I build the carousel? How can I tell Vue which images to show there?

I really would appreciate anybodys help with this - it's driving me crazy, since I am really new to Vue.js and I have no idea how to solve it... Thanks!

LenaEngelstein

8 years ago

Level 2

Update:

I managed to submit the key of the clicked thumbnail to Vue.

Here's the route (with associative array now):

Route::get('/ludwigsburger_strasse', function () {
    $header = "home";
    $pics = [
    0 => 'Praxisbild_LB1', 
    1 =>'Praxisbild_LB2', 
    2 => 'Praxisbild_LB3', 
    3 => 'Praxisbild_LB4'];
    return view('pages.standorte.alleecenter', compact('header', 'pics')); })->name('ludwigsburger');

And here's the thumbnail gallery:

<div class="galleryBox">
    @foreach ($pics as $key => $pic)
        <figure @click="key={{ $key }}">
            <img src="/img/standorte/{{ $pic }}_thumbnail.jpg"          @click="showGalleryModal=true">
        </figure>
    @endforeach
</div>

The app.js:

Vue.component('modal', {
    props: ['key'],
    template: `
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                <slot></slot>
            </div>
            <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
        </div>
    `
});

new Vue({
    el: '#root',
    data: {
        showGalleryModal: false,
        key: ''
    }
});

And the modal component in HTML:

<modal v-if="showGalleryModal" @close="showGalleryModal=false">
        <h3>@{{ key }}</h3>
        <figure class="image">
            <img src="...">
        </figure>
</modal>

The h3 in the modal element returns the key from above correctly. But how can I find the proper name (value) belonging to the key in the $pics array? And how can I put together the proper img src attribute?

Please or to participate in this conversation.