&quot;mdb-addons&quot; directory does not exist (in

Topic: "mdb-addons" directory does not exist (in 4.4.3)

capitalten free asked 7 years ago

This:

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

... does NOT work. The folder "mdb-addons" does not exist.

Where can we download that folder?

I'm using Pro 4.4.3.

Thanks!

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear capitalten,

Thank you for submitting the live demo. It turns out there were multiple things wrong with the code.

First of, there's a call for a jQuery function before the very jQuery gets loaded (which is on a bottom of the page). I suggest having the MDB Lightbox Init script in a separate file attached to your html.

Secondly, the div id="mdb-lightbox-ui" which is essential for creating a gallery, is missing.

Finally, there's a h4 tag inside of your MDB Lightbox, obscuring the parsing process of the gallery's elements.

Resolving these issues should make your gallery fly.

With Best Regards,
Kuba

capitalten free commented 7 years ago

It works. Thanks!

Sebopede free commented 4 years ago

Greetings, i have been trying forever to get the lightbox to work properly. The image do indeed show, but there is no swipe compatability nor zoom animations when clicking or exiting the image. I am using the Angular Pro version of mdbootstrap. It does not mention adding anything like Mdb-lightbox-ui.load anywhere, am i supposed to still add that? thanks for the help.

Add comment

capitalten free answered 7 years ago

0 0 Best answer

I am using WebStorm and serving it from an http server (not from opening a file locally). WebStorm preview will create a webserver and accessible from "localhost". After reading what you said, I uploaded it to a testing server: https://ikevin.me/moments.tube/preview/site/ the problem still exists. Can you help by accessing the file and find out what's wrong? Thanks!

Add comment

capitalten free answered 7 years ago

0 0 Best answer

<p>I downloaded it and indeed the folder is there (though it seems that you forgot to increase version number).</p>
<p>It still DOES NOT work. I'm trying to use the "Images within lightbox" feature - https://mdbootstrap.com/content/bootstrap-images/ - and though a magnifier glass appears when I hover over the image, NOTHING HAPPENS WHEN I CLICK on it. Something must be amiss and I can't figure it out. I've pasted the source code here, can you help?</p>
<pre><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/mdb.min.css" rel="stylesheet">
    
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

</div>

</div>
</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.min.js"></script>
</body>

</html>

</pre>

Please insert min. 20 characters.

I downloaded it and indeed the folder is there (though it seems that you forgot to increase version number).

It still DOES NOT work. I'm trying to use the "Images within lightbox" feature - https://mdbootstrap.com/content/bootstrap-images/ - and though a magnifier glass appears when I hover over the image, NOTHING HAPPENS WHEN I CLICK on it. Something must be amiss and I can't figure it out. I've pasted the source code here, can you help?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <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 href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

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

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

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

        <div class="mdb-lightbox">

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" alt="placeholder" class="img-fluid">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

        </div>

    </div>
</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.min.js"></script>
</body>

</html>

Jakub Strebeyko staff commented 7 years ago

Hi there capitalten, Are you getting any errors in the console? First thing that comes to mind is that using Lightbox requires a cross origin request for a .html resource and as such is not possible in modern browsers without mocking a server activity (aka "going live"). Best Regards, Kuba

Add comment

Bartłomiej Malanowski staff answered 7 years ago