Problem with lighbox

Topic: Problem with lighbox

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

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

try this code:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">
<main>

</div>

</div>
</div>

</div>

</main>
</pre>
Best,

Marta

Please insert min. 20 characters.

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

Add comment

jan.richter pro answered 5 years ago

0 0 Best answer

Describe your problem, did you look into development console? Is Lightbox html template really loaded in you browser?

Example above works fine.

HTML part:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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:</pre>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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.</pre>

Please insert min. 20 characters.

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.

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: MDB jQuery
MDB Version: 4.5.9
Device: MAC
Browser: Safary
OS: MAC OS
Provided sample code: No
Provided link: No

medargo

Pro User 5Support score
1Questions 0Answers 0Snippets