mdb-addons directory does not exist (in 4.4.3)

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: "mdb-addons" directory does not exist (in 4.4.3)

capitalten 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!

Bartłomiej Malanowski staff pro premium answered 7 years ago

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

capitalten answered 7 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 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

capitalten answered 7 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!

Jakub Strebeyko staff answered 7 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 commented 7 years ago

It works. Thanks!

Sebopede commented 5 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.

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
About author
capitalten
129Support score
7Questions 12Answers
0Snippets likes 0Snippets