lightbox example not working as provided

Topic: lightbox example not working as provided

billywinter pro asked 5 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

Add comment

Tobicic free answered 5 years ago

1 0 Best answer

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 5 years ago

Thanks Tobicic for sharing Your solution.

Add comment

cwilly pro answered 5 years ago

0 0 Best answer

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 5 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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

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

Add comment

cwilly pro answered 5 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

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:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><!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
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <link rel="stylesheet" href="css/mdb.css">
    
    <link rel="stylesheet" href="css/style.css">
    <style rel="stylesheet">
        .container {
      margin-top: 50px;
    }
  </style>
</head>
<body>
    <div class="container">

</div>
    
    
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    
    <script type="text/javascript" src="js/popper.min.js"></script>
    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="js/mdb.js"></script>
    <script>
        $(document).ready(function () {
        });
    </script>
</body>
</html></pre>
</div>
You also need to be sure that all the paths are correct.

Best Regards

Please insert min. 20 characters.

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

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

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?

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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)

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Hi there,

Did You initialized the lightbox plugin? Here's the code:
<pre class="grey lighten-3 px-3 mb-0 line-numbers  language-js"><code class=" language-js"><span class="token comment">// MDB Lightbox Init</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">  $</span><span class="token punctuation">(</span><span class="token string">"#mdb-lightbox-ui"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token string">"mdb-addons/mdb-lightbox-ui.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
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

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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: desktop pc
Browser: chrome
OS: windows 10
Provided sample code: No
Provided link: No

billywinter

Pro User 230Support score
8Questions 19Answers 1Snippets