priyanka.140413116021 pro asked 7 years ago


Hello Sir, i already done all the steps that are given in description still i m not able to zoom the image. can you please help me.. thanking you

lura123 premium answered 4 years ago


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?


Patrick Sagayaraj free answered 6 years ago


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


neo pro answered 7 years ago


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:    
<!-- MDB -->
<scripttype="text/javascript"src="js/mdb.min.js"></script>
<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:
<!-- First row -->
<divclass="row wow fadeIn"data-wow-delay="0.4s">
<!-- First column -->
<divclass="col-md-12 mb-5">
<!-- Lightbox -->
<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>
<!-- /.Lightbox -->
</div>
<!-- /.First column -->
</div>
<!-- /.First row -->
</section>
<!-- /.Fourth section -->
<hr>
</div>
PLEASE KINDLY HELP...THANKS

Piotr Bender free answered 7 years ago


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!


Kamil Paciepnik free answered 7 years ago


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

teawebsite pro answered 7 years ago


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.

Kamil Paciepnik free answered 7 years ago


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

buret.hadrien pro answered 7 years ago


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>

Kamil Paciepnik free answered 7 years ago


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

teawebsite pro answered 7 years ago


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.

Kamil Paciepnik free answered 7 years ago


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

teawebsite pro answered 7 years ago


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.

Kamil Paciepnik free answered 7 years ago


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

teawebsite pro answered 7 years ago


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 : (

fruffel pro answered 7 years ago


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 :)

fruffel pro answered 7 years ago


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)

teawebsite pro answered 7 years ago


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.

Kamil Paciepnik free answered 7 years ago


Hi priyanka.140413116021, could you share your code? 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

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags