lightbox example not working as provided

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: lightbox example not working as provided

billywinter pro asked 6 years ago

Using your lightbox gallery code as shown does not work.  When you click on the pictures (I used my own) they don't zoom out.  It works when I add 'data-lightbox' to the picture reference.  How come this is not in your code?  Also,  in your example, when you click on a picture,  you get a zoom and a full screen option,  with my example you just get the next picture and close.   How can I get the full screen option? Thanks  

Tobicic answered 6 years ago

I guess calling the include is not working. Copy content of /mdb-addons/mdb-lightbox-ui.html directly into index.html instead of container "< div id="mdb-lightbox-ui">" from your snippet then it works perfecty on webserver as well as local. In that case you also do not have to call function $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");

Mikołaj Smoleński staff commented 6 years ago

Thanks Tobicic for sharing Your solution.

Mikołaj Smoleński staff answered 6 years ago

Hi there, Did You initialized the lightbox plugin? Here's the code: 
// MDB Lightbox Init
$(function () {
  $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
Please make sure if there is mdb-addons directory in Your project. If everything is ok please check also if there is any error in Your console (F12). Best Regards  

billywinter pro answered 6 years ago

Yes, I've initialized the plugin.  The console shows 3 errors, I've listed below (I can't paste a screenshot here??).  Perhaps I am missing a CSS or JS file not shown in your example. Can you tell me which CSS and JS files are required for this? Thanks SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json

billywinter pro answered 6 years ago

Ok,  did some more checking.  I had the java script surrounded by <script>  tags as previous support staff person instructed me to do.  I removed them and I think that script at least loads now: BEFORE: <script>$(function () { $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); });</script> NOW: $(function () { $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); }); However,  now I noticed this error when you click on an image: mdb.min.js:1 Uncaught TypeError: Cannot read property 'firstChild' of undefined at Object.getChildByClass (mdb.min.js:1) at Object.init (mdb.min.js:1) at i (mdb.min.js:1) at HTMLDivElement.e (mdb.min.js:1)

billywinter pro answered 6 years ago

Ok,  sorry but I did more checking and I see that my error was caused by loading both mdb.min.js with other js files.  I removed mdb.min.js and I now get NO error.  So finally,  my only issue is how do you get the "full screen" option on the picture?  I see the button option in mdb-lightbox-ui.htm: <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> How is this activated?

billywinter pro answered 6 years ago

Ok,  sorry but I did more checking and I see that my error was caused by loading both mdb.min.js with other js files.  I removed mdb.min.js and I now get NO error.  So finally,  my only issue is how do you get the "full screen" option on the picture?  I see the button option in mdb-lightbox-ui.htm: <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> How is this activated?

Mikołaj Smoleński staff answered 6 years ago

Hi there, Lightbox will not work without importing mdb.js scripts. After reading Your messages I am pretty sure You have some issues while importing stylesheets and scripts into Your project. Please note that the correct template should look like this: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Material Design Bootstrap</title
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="css/mdb.css">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="css/style.css">
    <style rel="stylesheet">
        .container {
      margin-top: 50px;
    }
  </style>
</head>
<body>
    <div class="container">

    </div>
    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <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.js"></script>
    <script>
        $(document).ready(function () {
        });
    </script>
</body>
</html>
You also need to be sure that all the paths are correct. Best Regards

cwilly pro answered 6 years ago

Hi, I 've tested your template and I think something is not working correctly. Lightbox slide show is not woking. From the console, I see this  message: jquery-3.3.1.min.js Line 3,454:32 XMLHttpRequest cannot load file:///srv/mdb-addons/mdb-lightbox-ui.html due to access control checks. Best Regards

Mikołaj Smoleński staff answered 6 years ago

Hi there, I've just tested it and it should work fine. You just need to initilize: 
 $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
and then add the following code inside .container: https://tst02.mdbootstrap.com/javascript/lightbox/#lightbox-margins If You still see errors in console, You probably are missing some important files. Best Regards

cwilly pro answered 6 years ago

Hello Mikolaj, I've tested again and Lightbox is working correctly as expected from my web server, with Url starting by   http://... 

It's not working on local:

I have imported all files and your demo on local and try to load  with a URL  like  file://...

in this case I see errors from console.

 

Thanks for your support.

 

 

 

Mikołaj Smoleński staff commented 6 years ago

It looks like for some reason the script is blocked while You're working on localhost or the path is not correct. 

Best
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: desktop pc
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
About author
billywinter
Pro User
230Support score
8Questions 19Answers
0Snippets likes 1Snippets