Topic: The lighthous gallery is not working by adding script and css into the html file
Expected behavior Adding the lighthouse gallery code to the html and embedding the script and css with revised images in my img folder, the images are not displayed as soon as I add the template code. The images appear fine in a table without the code, so the images are of same size and not blocked.
Actual behavior images are not displayed using the embedded code.
Resources (screenshots, code snippets etc.)
<!-- My style sheet-->
<style scoped>
@media (min-width: 768px) {
.carousel-multi-item-2 .col-md-3 {
float: left;
width: 25%;
max-width: 100%; } }
.carousel-multi-item-2 .card img {
border-radius: 2px; }
figure {
cursor: pointer;
}
<link href="css/style.css" rel="stylesheet">
</style>
</head>
<body>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbBtn, mdbLightbox, mdbCarousel, mdbCard, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter, mdbNavItem } from "mdbvue";
export default {
name: "GalleryPage",
data() {
return {
imgs: [
'./img/a_carved_wood_sign_displaying_the_map_of_maui_island.jpg',
'./img/family_with_two_boys_sitting_at_picnic_table_with_blue_ocean_in_background.jpg',
'./img/kaya_with_sons_on_mission_bay - Copy.jpg',
'./img/two_boys_sitting_on_sofas_in_plantation_hotel_lobby_looking_at_camera.jpg',
'./img/view_of_two_palm_trees_and_blue_ocean.jpg',
'./img/view_of_palm_tree_lined_walkway_toward_paia_beach.jpg',
'./img/tray_with_white_porcelain_dishes_filled_with_fresh_pineapple_pieces_decorated_with_violet_hibiscus_flower.jpg',
'./img/two_boys_looking_at_camera_standing_in_front_of_aquarium.jpg',
'./img/man_with_headphones_and_son_in_front_seats_of_airboat_with_kaya_in_back_touring_swamp.jpg'
],
visible: false,
index: 0
};
},
methods: {
showLightbox(index) {
this.index = index;
this.visible = true;
},
handleHide() {
this.visible = false;
}
},
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbBtn,
mdbLightbox,
mdbCarousel,
mdbCard,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter,
mdbNavItem
}
}
</script>
<div class="container-fluid">
<!-- Content here -->
<template>
<mdb-container class="mt-5">
<mdb-container>
<mdb-row class="mdb-lightbox">
<mdb-col md="4" @click.native="showLightbox2(0)">
<figure>
<img src="./img/a_carved_wood_sign_displaying_the_map_of_maui_island.jpg" class="img-fluid" alt="carved wood sign displaying map of maui">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(1)">
<figure>
<img src="./img/family_with_two_boys_sitting_at_picnic_table_with_blue_ocean_in_background.jpg" class="img-fluid" alt="family with two boys sitting at picnic table with blue ocean in background">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(2)">
<figure>
<img src="./img/kaya_with_sons_on_mission_bay - Copy.jpg" class="img-fluid" alt="kaya with sons wearing life jackets on boat">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(3)">
<figure>
<img src="./img/two_boys_sitting_on_sofas_in_plantation_hotel_lobby_looking_at_camera.jpg" class="img-fluid" alt="two boys sitting on separate sofas in hotel lobby">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(4)">
<figure>
<img src="./img/view_of_two_palm_trees_and_blue_ocean.jpg" class="img-fluid" alt="view of palm trees and blue ocean">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(5)">
<figure>
<img src="./img/view_of_palm_tree_lined_walkway_toward_paia_beach.jpg" class="img-fluid" alt="view of walkway to ocean lined with palm trees at paia beach">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(6)">
<figure>
<img src="./img/tray_with_white_porcelain_dishes_filled_with_fresh_pineapple_pieces_decorated_with_violet_hibiscus_flower.jpg" class="img-fluid" alt="tray with white porcelain dishes filled with cut pineapple and decorated with hibiscus flower">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(7)">
<figure>
<img src="./img/two_boys_looking_at_camera_standing_in_front_of_aquarium.jpg" class="img-fluid" alt="two boys standing in front of aquarium tank looking at camera">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="showLightbox2(8)">
<figure>
<img src="./img/man_with_headphones_and_son_in_front_seats_of_airboat_with_kaya_in_back_touring_swamp.jpg" class="img-fluid" alt="man with headphones sitting in front seat of airboat next to his young son with kaya sitting in the higher seat behind them">
</figure>
</mdb-col>
</mdb-row>
</mdb-container>
<mdb-lightbox
:visible="visible2"
:imgs="imgs2"
:index="index2"
@hide="handleHide2">
</mdb-lightbox>
</mdb-container>
</template>
Relative paths get carried across - once it's reffered from the inside of the Lightbox component it's no longer valid. You need to import this image in your component. Instead of passing an array of relative path to the lightbox, wrap each string in require:
imgs: [
require('./img/a_carved_wood_sign_displaying_the_map_of_maui_island.jpg'),
require('...')
],
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.11
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No