mdb-lightbox Error

l9inter asked 2 months ago

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">
<!-- 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="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>

<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 commented 2 months ago

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


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No