Lightbox

joaobiqx asked 3 years ago

When a clik inside a carousel libox image the image is displayed without resizing the screen and when I close the image is closes without resizing.

If I use an array for the props visible and index the behavior is as explainned above, but is the member of my array for those 2 properties are objects the the lightbox works fine. This behavior happens if I have several lightboxes. My code is as such:

<template>
<mdb-row style="margin-bottom: 16px;">
  <mdb-col col="12">
    <h3 style="margin-top:10px;font-weight: bold" class="grey-text">Fotos</h3>
  </mdb-col>
  <mdb-col col="12" style="margin-left:20px;font-size: 14px;margin-bottom:20px;">
    <mdb-carousel
      :interval="8000"
      showControls
      showIndicators
      multi
      slide
      top
      navClass="btn-primary"
      indicatorClass="primary-color"
    >
      <!-- PHOTOS PAGE -->
      <mdb-carousel-item
        v-for="(page, indexPage) in photos.thumbnails"
        :key="'photos-page-' + indexPage"
      >
        <mdb-row class="mdb-lightbox px-2">
          <!-- SINGLE PHOTO -->
          <mdb-col
            md="4"
            v-for="(image, indexImage) in page"
            :key="'photo' + indexPage + indexImage"
            class="d-xs-inline-block"
            @click.native="showLightbox(indexPage, indexImage)"
          >
            <figure>
              <img :src="image" class="img-fluid" alt />
            </figure>
          </mdb-col>
          <!-- /SINGLE PHOTO -->
        </mdb-row>
      </mdb-carousel-item>
      <!-- /PHOTOS PAGE -->
    </mdb-carousel>
    <mdb-lightbox
      v-for="(page, indexPage) in photos.thumbnails"
      :key="'lightbox-' + indexPage"
      :visible.sync="photos.visible[indexPage]"
      :imgs="photos.images[indexPage]"
      :index.sync="photos.indexes[indexPage]"
      :captions="photos.captions[indexPage]"
      @hide="handleHide(indexPage)"
    ></mdb-lightbox>
  </mdb-col>
</mdb-row>

<script>
import {
  mdbContainer,
  mdbView,
  mdbRow,
  mdbCol,
  mdbListGroup,
  mdbListGroupItem,
  mdbIcon,
  mdbCarousel,
  mdbAvatar,
  mdbCarouselItem,
  mdbCarouselCaption,
  mdbLightbox
} from "mdbvue";
import StarRating from "vue-star-rating";
import GoogleMapsLoader from "google-maps";
import { Carousel, Slide } from "vue-carousel";
import breakpoint from "vue-md-breakpoint";

export default {
  name: "Company",
  components: {
    mdbContainer,
    mdbView,
    mdbRow,
    mdbCol,
    mdbListGroup,
    mdbListGroupItem,
    mdbIcon,
    mdbCarousel,
    mdbCarouselItem,
    mdbCarouselCaption,
    mdbLightbox,
    mdbAvatar,
    StarRating,
    Carousel,
    Slide
  },
  data() {
    return {
      coordinates: {
        lat: -25.538383,
        lng: -49.20459
      },
      photos: {
        thumbnails: [
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(3).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(4).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(5).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(6).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(7).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(8).jpg"
          ]
        ],
        images: [
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(2).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(3).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(4).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(5).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(6).jpg",
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(7).jpg"
          ],
          [
            "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(8).jpg"
          ]
        ],
        captions: [
          [
            "Comantário da foto 1",
            "Comantário da foto 2",
            "Comantário da foto 3"
          ],
          [
            "Comantário da foto 4",
            "Comantário da foto 5",
            "Comantário da foto 6"
          ],
          ["Comantário da foto 7"]
        ],
        indexes: [0, 0, 0],
        visible: { "0": false, "1": false, "2": false }
      }
    };
  },
  methods: {
    showLightbox(page, photo) {
      this.photos.indexes[page] = photo;
      this.photos.visible[page + ""] = true;
    },
    handleHide(page) {
      this.photos.visible[page + ""] = false;
    }
  },
};

Now this code is workin beacuse I turned the elements of the visible property into an object instead of an array.


Mikołaj Smoleński staff answered 3 years ago

Thanks for letting us know about the issue. We'll work on it in the nearest future.

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.7.0
  • Device: PC
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No