[Wordpress] Lightbox not working for Lightbox Gallery


Topic: [Wordpress] Lightbox not working for Lightbox Gallery

khantra asked 6 years ago

So I am trying to integrate MDB with with the Understrap bootstrap Theme. I am having an issue with the light box gallery. The gallery displays but the lightbox popup does not work.
This is the page I'm working on. 
 

I also get the following error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Object.Waves.init (mdb.js?ver=4.9.8:15419)
at mdb.js?ver=4.9.8:15544
 
This refers to line 15419 in mdb.js:

body.addEventListener('mousedown', showEffect, false);

The Head section loads the files in the following order:

<link rel='stylesheet' id='MDB-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/css/mdb.min.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='understrap-styles-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/css/theme.min.css?ver=0.8.7.1541037375' type='text/css' media='all' />
<link rel='stylesheet' id='Style-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/style.css?ver=4.9.8' type='text/css' media='all' />
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-content/themes/understrap/js/mdb.js?ver=4.9.8'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-content/themes/understrap/js/script.js?ver=4.9.8'></script>


The Lightbox gallery is initialized in script.js file which loads after mdb.js this is the code:


jQuery(document).ready(function () {

jQuery(function () {

var stylesheet_directory_uri="<?php echo get_stylesheet_directory_uri(); ?>";

jQuery("#mdb-lightbox-ui").load(stylesheet_directory_uri+"/mdb-addons/mdb-lightbox-ui.html");

});

});

 

This is my slider code. 



<div class="container">

<!-- First row -->

<div class="row">

<!-- First column -->

<div class="col-md-12">

<div id="mdb-lightbox-ui"></div>

<div class="mdb-lightbox no-margin">

<figure class="col-md-4">

<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(94).jpg" data-size="1600x1067">

<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(94).jpg" class="img-fluid">

</a>

<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis

cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate

sequi corporis eaque corrupti. Vel, est.</figcaption>

</figure>

<figure class="col-md-4">

<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(96).jpg" data-size="1600x1067">

<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(96).jpg" class="img-fluid" />

</a>

<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.</figcaption>

</figure>

</div>

</div>

<!-- First column -->

</div>

<!-- First row -->

</div>

Bartłomiej Malanowski staff pro premium answered 6 years ago

The problem is in the construction of your HTML. Please move your JavaScript files to the end of the body. The right order is:

- jQuery

- Popper.js

- Bootstrap.js (by the way your bootstrap.min.js file returns error 404)

- MDB.js

- Your custom JS 

Please reorder your js files as above and check if this resolves your issue

 


khantra commented 6 years ago

Thank you I'll try this and report back.


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: General Bootstrap questions
  • MDB Version: -
  • Device: Browser
  • Browser: Browser
  • OS: windwos
  • Provided sample code: Yes
  • Provided link: Yes