LightBox Is Not Working

lura123 premium answered 4 years ago

0 0 Best answer

Encontraron la solución?

Krzysztof Wilk staff commented 4 years ago

Hi!

What technology do you use? Is it Angular, jQuery, React, Vue?

Best Regards

lura123 premium commented 4 years ago

Estoy usando jQuery

Krzysztof Wilk staff commented 4 years ago

What exactly doesn't work in lightbox?

Add comment

Patrick Sagayaraj free answered 6 years ago

1 0 Best answer

Dear Solution Providers,

Sub: Lightbox not working

I am also facing the same issue when I using MDB PRO Version.

Please provide the exact solution for the same.

Thanks in advance,

Regards,

Patrick Sagayaraj

Add comment

neo pro answered 7 years ago

0 0 Best answer

I'm actually having the same super issue here! I've done everything with my code below and have every codes placed properly but it is not working...

i have the init placed properly as well:

<div>
<div></div>
<div><scripttype="text/javascript"src="js/mdb.min.js"></script></div>
<div><script></div>
<div>// initialize scrollspy</div>
<div>$('body').scrollspy({</div>
<div>target:'.dotted-scrollspy'</div>
<div>});</div>
<div>// MDB Lightbox Init</div>
<div>$(function () {</div>
<div>$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");</div>
<div>});</div>
<div>$('.navbar-collapse a').click(function () {</div>
<div>$(".navbar-collapse").collapse('hide');</div>
<div>});</div>
<div>newWOW().init();</div>
<div></script></div>
<div></body></div>
<div></html></div>
</div>
<div></div>
<div></div>
<div> BELOW IS THE SAME EXAMPLE I GRABBED FROM THE TUTORIAL:</div>
<div></div>
<div></div>
<div></div>
<div>
<div>
<div></div>
<div><divclass="row wow fadeIn"data-wow-delay="0.4s"></div>
<div></div>
<div><divclass="col-md-12 mb-5"></div>
<div></div>
<div><divclass="mdb-lightbox-ui"></div></div>
<div><divclass="mdb-lightbox"></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(66).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(66).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(65).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(65).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(67).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(68).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(68).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(64).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(64).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(69).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(69).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(59).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(59).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div><figureclass="col-md-4"></div>
<div><ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(70).jpg"data-size="1600x1067"></div>
<div><imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(70).jpg"class="img-fluid z-depth-1"></div>
<div></a></div>
<div></figure></div>
<div></div></div>
<div></div>
<div></div></div>
<div></div>
<div></div></div>
<div></div>
<div></section></div>
<div></div>
<div><hr></div>
<div></div></div>
</div>
</div>
<div></div>
<div></div>
<div>PLEASE KINDLY HELP...THANKS</div>

Please insert min. 20 characters.

I'm actually having the same super issue here! I've done everything with my code below and have every codes placed properly but it is not working... i have the init placed properly as well:

<scripttype="text/javascript"src="js/mdb.min.js"></script>

// initialize scrollspy

$('body').scrollspy({

target:'.dotted-scrollspy'

});

// MDB Lightbox Init

$(function () {

$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");

});

$('.navbar-collapse a').click(function () {

$(".navbar-collapse").collapse('hide');

});

newWOW().init();

</script>

</body>

</html>

BELOW IS THE SAME EXAMPLE I GRABBED FROM THE TUTORIAL:

<divclass="row wow fadeIn"data-wow-delay="0.4s">

<divclass="col-md-12 mb-5">

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

<divclass="mdb-lightbox">

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(66).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(66).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(65).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(65).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(67).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(68).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(68).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(64).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(64).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(69).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(69).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(59).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(59).jpg"class="img-fluid z-depth-1">

</a>

</figure>

<figureclass="col-md-4">

<ahref="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(70).jpg"data-size="1600x1067">

<imgsrc="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(70).jpg"class="img-fluid z-depth-1">

</a>

</figure>

</div>

</div>

</div>

</section>

<hr>

</div>

PLEASE KINDLY HELP...THANKS

Add comment

Piotr Bender free answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,In response to your issue, I wanted to let you know about just released MDBootstrap Angular kit, that may be a sufficient solution to this or any other issues you have had with Angular integration so far.The kit can be found at the following link:https://mdbootstrap.com/angular/It contains all the components you could find in MDB jQuery version.We encourage you to try it out and report any bugs or issues at contact@mdbootstrap.com with [Angular] prefix or create a thread on this forum.Have a great day!

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Hi teawebsite, I'm glad you found a solution! I wish good luck in further developing. Regards

Add comment

teawebsite pro answered 7 years ago

0 0 Best answer

Hi Kamil Paciepnik, thanks for your support. I tried to do as you suggested, but no result. For WP I used the enqueue function for styles (@import is deprecated) and after several tests I realized that the problem was the wordpress wysiwyg editor. To optimize it for MDB add remove_filter ('the_content', 'wpautop'); remove_filter ('the_excerpt', 'wpautop'); the functions.php file and lightbox works. I hope it can help someone else. Best regards.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Hi buret.hadrien, currently we don’t support the angular. However, many users use Angular with MDB. In the future we plan to support Angular. Unfortunately the site address does not work. Regards

Add comment

buret.hadrien pro answered 7 years ago

0 0 Best answer

Hi guys,

I just bought the MDB pro licence, fantastic.
I am working on a website with angularjs (written in es6).

I have troubles making the the lightbox working, basically the image is going full scale and I am sent away from the website to the image url. there are no errors about the lightbox. how the load should work out ?

here you have a link: http://725fcd55.ngrok.io (its not yet optimized so be patient).

in home.js // angular component
    <div id="mdb-lightbox-ui"></div>

</div>

Please insert min. 20 characters.

Hi guys, I just bought the MDB pro licence, fantastic. I am working on a website with angularjs (written in es6). I have troubles making the the lightbox working, basically the image is going full scale and I am sent away from the website to the image url. there are no errors about the lightbox. how the load should work out ? here you have a link: http://725fcd55.ngrok.io (its not yet optimized so be patient). in home.js // angular component <div id="mdb-lightbox-ui"></div> <div class="mdb-lightbox"> <figure class="col-md-2" ng-repeat="photo in $ctrl.instagram"> </figure> </div> <script> $(document).ready(function() { $(function() { $('.Carousel').carousel(); }); $(function() { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html"); }); }) </script>

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

I understand, try this solution:

1. In the directory folder your theme on WordPress create a folder of <strong>assets</strong>

2. Then copy all the files from MDB Pro and paste into the assets folder.

3. To the main theme style file, put this code:
<pre><code>@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
@import url('assets/css/bootstrap.min.css');
@import url('assets/css/mdb.min.css');
@import url('assets/css/style.css');</code></pre>

<strong>Be sure to check that the path is correct.</strong>

4. To the footer.php file, paste this code (over <code><body></code>):
<pre><code>

<script type="text/javascript" src="/assets//js/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="/assets/js/tether.min.js"></script>

<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/assets/js/mdb.js"></script>

<strong>Be sure to check that the path is correct.</strong>

If you follow the instructions above, the lightbox will work.

Regards

Please insert min. 20 characters.

I understand, try this solution: 1. In the directory folder your theme on WordPress create a folder of assets 2. Then copy all the files from MDB Pro and paste into the assets folder. 3. To the main theme style file, put this code:

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
@import url('assets/css/bootstrap.min.css');
@import url('assets/css/mdb.min.css');
@import url('assets/css/style.css');

Be sure to check that the path is correct. 4. To the footer.php file, paste this code (over <body>):

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/assets//js/jquery-3.1.1.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/assets/js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="/assets/js/mdb.js"></script>

<script>
     // MDB Lightbox Init
     $(function () {
          $("#mdb-lightbox-ui").load("/assets/mdb-addons/mdb-lightbox-ui.html");
     });
</script>

Be sure to check that the path is correct. If you follow the instructions above, the lightbox will work. Regards

Add comment

teawebsite pro answered 7 years ago

0 0 Best answer

Hi Kamil, thank you for your replay. I made a new fresh installation of wordpress and implemented it with MDB PRO ( I purchased unlimited license for MDB PRO). I do not install MDWP. As I said files are the same as MDB provided in wp tutorials; everything is ok but lightbox not works. In brief I just try to replay this page: https://mdbootstrap.com/javascript/lightbox/ that is made in wordpress (not MDWP). I hope I was clear. Best regards.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

teawebsite, Do you use MDB Pro or MDWP? If you are using MDWP simply insert the gallery by the "post format gallery" in WordPress. Try to install a completely new copy of WordPress downloaded from their site, doing the same thing with MDB files. Regards

Add comment

teawebsite pro answered 7 years ago

0 0 Best answer

Hi Kamil, I've already sent an email to Mr. Priot :
"Hi Piotr, thank for your support. I've create a theme as MDB suggest in wordpress  tutorial's section; every file is the same as the final template example. To properly add lightbox support I've changed js and css folder with pro version (also add mdb-addons folder) and  create a js script called lightbox.js
 
$(document).ready(function(){
// MDB Lightbox Init
$(function () {
	$("#mdb-lightbox-ui").load("/mdb/wp-content/themes/mdbblog/mdb-addons/mdb-lightbox-ui.html");
});
});

and enqueue it in functions php

function theme_enqueue_scripts() {
        wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
        wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.min.css' );
        wp_enqueue_style( 'Style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery-2.2.3.min.js', array(), '2.2.3', true );
        wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/tether.min.js', array(), '1.0.0', true );
        wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
        wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '1.0.0', true );
        wp_enqueue_script( 'lightbox-js', get_template_directory_uri() . '/js/lightbox.js', array(), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

Then I've created a new page called Lightbox and copy/paste the code provided at  https://mdbootstrap.com/javascript/lightbox/
Result: not working and console says:

XHR finished loading: GET "http://localhost/mdb/wp-content/themes/mdbblog/mdb-addons/mdb-lightbox-ui.html".
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
at e (mdb.min.js:8)
at a (mdb.min.js:8)
at HTMLDivElement.n (mdb.min.js:8)

Hope you can help me. Best regards.
P.s. Wordpress installation is a fresh one and latest vers.(4.7.3) hosted locally"

Hope you can help me. I can't figure out where the problem is. Best regards.

Please insert min. 20 characters.

Hi Kamil, I've already sent an email to Mr. Priot : "Hi Piotr, thank for your support. I've create a theme as MDB suggest in wordpress tutorial's section; every file is the same as the final template example. To properly add lightbox support I've changed js and css folder with pro version (also add mdb-addons folder) and create a js script called lightbox.js $(document).ready(function(){ // MDB Lightbox Init $(function () { $("#mdb-lightbox-ui").load("/mdb/wp-content/themes/mdbblog/mdb-addons/mdb-lightbox-ui.html"); }); }); and enqueue it in functions php function theme_enqueue_scripts() { wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' ); wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.min.css' ); wp_enqueue_style( 'Style', get_template_directory_uri() . '/style.css' ); wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery-2.2.3.min.js', array(), '2.2.3', true ); wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/tether.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '1.0.0', true ); wp_enqueue_script( 'lightbox-js', get_template_directory_uri() . '/js/lightbox.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); Then I've created a new page called Lightbox and copy/paste the code provided at https://mdbootstrap.com/javascript/lightbox/ Result: not working and console says: XHR finished loading: GET "http://localhost/mdb/wp-content/themes/mdbblog/mdb-addons/mdb-lightbox-ui.html". Uncaught TypeError: Cannot read property 'getAttribute' of undefined at e (mdb.min.js:8) at a (mdb.min.js:8) at HTMLDivElement.n (mdb.min.js:8) Hope you can help me. Best regards. P.s. Wordpress installation is a fresh one and latest vers.(4.7.3) hosted locally" Hope you can help me. I can't figure out where the problem is. Best regards.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Hi teawebsite and fruffel, Could you share me your files? Unfortunately I can't recreate your problem. Regards

Add comment

teawebsite pro answered 7 years ago

0 0 Best answer

A step forward(?)..if jQuery loads in footer lightbox works (but does not display controls). Unfortunately each other .mdb elements require jQuery in the header : (

Add comment

fruffel pro answered 7 years ago

0 0 Best answer

Also: XMLHttpRequest cannot load /PATH/mdb-addons/mdb-lightbox-ui.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. I think this is the problem EDIT: You can't run the website locally. You have to host it on a local server for example. Then the lightbox will work :)

Add comment

fruffel pro answered 7 years ago

0 0 Best answer

Same problem, console gives the following error: mdb.js:13638 Uncaught TypeError: Cannot read property 'firstChild' of undefined at Object.getChildByClass (mdb.js:13638) at a.init (mdb.js:13935) at openPhotoSwipe (mdb.js:15186) at HTMLDivElement.onThumbnailsClick (mdb.js:15094)

Add comment

teawebsite pro answered 7 years ago

0 0 Best answer

Hi there, I've the same problem (Lightbox not working ) in a wordpress installation. Chrome console says Uncaught TypeError: Cannot read property 'getAttribute' of undefined at parseThumbnailElements (mdb.js:15021) at openPhotoSwipe (mdb.js:15133) at HTMLDivElement.onThumbnailsClick (mdb.js:15094) HTML code is the same as MDB provided at https://mdbootstrap.com/javascript/lightbox/ Standalone local installation works fine. Hope you can help me. Best regards.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Hi priyanka.140413116021, could you share your code? Regards

Add comment