Problem with lighbox

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Problem with lighbox

medargo pro asked 7 years ago

Not working. Code from your site. Version: MDBPro Please 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>

    <!-- Start your project here-->

    <div style="height: 100vh">

        <div class="flex-center flex-column">

            <h1 class="animated fadeIn mb-4">Material Design for Bootstrap</h1>

            <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>

            <p class="animated fadeIn text-muted">MDB Team</p>

        </div>

    </div>

<figure class="col-md-4">

    <!--Large image-->

    <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">

        <!-- Thumbnail-->

        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">

    </a>

</figure>

    <!-- /Start your project here-->

    <!-- SCRIPTS -->

    <!-- JQuery -->

    <script type="text/javascript" src="js/jquery-3.3.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>

<script>

// MDB Lightbox Init

$(function () {

    $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");

});

</script>

</body>

</html>

jan.richter pro answered 7 years ago

Describe your problem, did you look into development console? Is Lightbox html template really loaded in you browser? Example above works fine. HTML part: 
<div n:if="$album->description" class="pb-5">
    {$album->description}
</div>
<div class="row">
    <div class="col-md-12">
        <div id="mdb-lightbox-ui"></div>
        <div class="mdb-lightbox no-margin">
            <figure n:foreach="$photos as $key => $photo" class="col-md-4">
                <a href="{$basePath .'/images/upload/'}{$photo->foto_url|replace: '/', '/original/'}"
                   data-size="1600x1067">
                    <img n:img="$photo->foto_url, gallery" alt="Image description" class="img-fluid"/>
                </a>
            </figure>
        </div>
    </div>
</div>

JS part:
<script>
    $(function () {
        $("#mdb-lightbox-ui").load({$basePath}+"/assets/front/mdb/mdb-addons/mdb-lightbox-ui.html");
    });
</script>

BTW: {$basePath} Isn't required when you haven't some special routing in your app.

Marta Szymanska answered 7 years ago

Hi, try this code: 
<!-- Main layout -->
<main>

<div class="container">

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

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

<div class="mdb-lightbox no-margin">

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
</a>
</figure>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" />
</a>
</figure>

</div>

</div>
</div>

</div>

</main>
<!-- Main layout -->
Best, Marta
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: MDB jQuery
  • MDB Version: 4.5.9
  • Device: MAC
  • Browser: Safary
  • OS: MAC OS
  • Provided sample code: No
  • Provided link: No
About author
medargo
Pro User
5Support score
1Questions 0Answers
0Snippets likes 0Snippets