mdb-lightbox Error

l9inter Pro User asked 1 week ago, version:4.5.6

jquery-3.3.1.min.js:2 Failed to load file:////mdb-addons/mdb-lightbox-ui.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send @ jquery-3.3.1.min.js:2
13mdb.min.js:1 Uncaught TypeError: Cannot read property ‘firstChild’ of undefined
at Object.getChildByClass (mdb.min.js:1)
at Object.init (mdb.min.js:1)
at i (mdb.min.js:1)
at HTMLDivElement.e (mdb.min.js:1)

 

 

 

 

 

<!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”&gt;
<!– 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 class=”row”>
<div class=”col-md-12″>

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

<div class=”mdb-lightbox animated fadeIn”>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg” data-size=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<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=”1600×1067″>
<img src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg” alt=”placeholder” class=”img-fluid” />
</a>
</figure>

</div>

</div>
</div>

<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>
<!– /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 type=”text/javascript”>
// MDB Lightbox Init
$(function () {
$(“#mdb-lightbox-ui”).load(“mdb-addons/mdb-lightbox-ui.html”);
});

</script>

</body>

</html>

Bartłomiej Malanowski Pro User replied 7 days ago

Do you use live-server or run the HTML file locally?