l9inter pro asked 6 years 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 staff commented 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags