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

capitalten free asked 4 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!

Jakub Strebeyko staff answered 4 years ago


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

It works. Thanks!

Sebopede free commented 2 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.


capitalten free answered 4 years ago


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!

capitalten free answered 4 years ago


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


It's already fixed. Please re-download your package

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags