Topic: I purchased MDB Pro recently and i cant use the lightbox properly

info@ipllp.in pro asked 4 years ago


I purchased MDB Pro recently and i cant use the lightbox properly, its not working. i followed avry instruction given in this page - https://mdbootstrap.com/javascript/lightbox/ but its not working, i dont know why. If anyone know the solution to fix this issue, pls let me know.

Mikołaj Smoleński staff answered 4 years ago


Please send me Your zipped projects to m.smolenski@mdbootstrap.com. Regards

arooly pro answered 4 years ago


Mikołaj Smoleński staff answered 4 years ago


This is the working example:
<div class="mdb-lightbox">

<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>
  Please open the console in Your browser (F12) and copy here errors if something would not work. Regards

arooly pro commented 4 years ago

I have the same problem with Lightbox. Verified that I have the mdb-addons in the right place,  inserted your code in a row and the row in the container initialized the lightbox, this is the error that I get: mdb.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) Thank you Full Code: ======================================================================================================================== <div> <div><!DOCTYPE html></div> <div><html lang="en"></div> <div><head></div> <div><metacharset="utf-8"></div> <div><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"></div> <div><metahttp-equiv="x-ua-compatible"content="ie=edge"></div> <div><title>Material Design Bootstrap</title></div> <div><!-- Font Awesome --></div> <div><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></div> <div><!-- Bootstrap core CSS --></div> <div><linkhref="css/bootstrap.min.css"rel="stylesheet"></div> <div><!-- Material Design Bootstrap --></div> <div><linkhref="css/mdb.min.css"rel="stylesheet"></div> <div><!-- Your custom styles (optional) --></div> <div><linkhref="css/style.css"rel="stylesheet"></div> <div></head></div> <div><body></div> <div><divclass="container"></div> <div><divclass="row"></div> <div><divclass="mdb-lightbox"></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg"class="img-fluid"></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div><figureclass="col-md-4"></div> <div><ahref="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg"data-size="1600x1067"></div> <div><imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg"class="img-fluid" /></div> <div></a></div> <div></figure></div> <div></div> <div></div></div> <div></div></div> <div></div></div> <div><!-- SCRIPTS --></div> <div><!-- JQuery --></div> <div><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></div> <div><!-- Bootstrap tooltips --></div> <div><script type="text/javascript" src="js/popper.min.js"></script></div> <div><!-- Bootstrap core JavaScript --></div> <div><script type="text/javascript" src="js/bootstrap.min.js"></script></div> <div><!-- MDB core JavaScript --></div> <div><script type="text/javascript" src="js/mdb.min.js"></script></div> <div><script></div> <div>// MDB Lightbox Init</div> <div>$(function () {</div> <div>$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");</div> <div>});</div> <div></script></div> <div></body></div> <div></html></div> </div>  

Mikołaj Smoleński staff answered 4 years ago


Hello, Are You sure that You have all the code in the correct place (including the initialization code at the bottom of the page)? If You're not sure please share Your code here and we'll try to find the solution. Regards

info@ipllp.in pro commented 4 years ago

<!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> <link rel=”stylesheet” href=”<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css%E2%80%9D&gt" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”&gt</a>; <link href=”css/bootstrap.min.css” rel=”stylesheet”> <link href=”css/mdb.min.css” rel=”stylesheet”> <link href=”css/style.css” rel=”stylesheet”> </head> <body> <div class=”row”> <div class=”col-md-12″> <div id=”mdb-lightbox-ui”></div> <div class=”mdb-lightbox”> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145)</a>.jpg” class=”img-fluid”> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147)</a>.jpg” class=”img-fluid” /> </a> </figure> <figure class=”col-md-4″> <a href=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149)</a>.jpg” data-size=”1600×1067″> <img alt=”picture” src=”<a href="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149)" rel="nofollow">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149)</a>.jpg” class=”img-fluid” /> </a> </figure> </div> </div> </div> <script type=”text/javascript” src=”js/jquery-3.2.1.min.js”></script> <script type=”text/javascript” src=”js/popper.min.js”></script> <script type=”text/javascript” src=”js/bootstrap.min.js”></script> <script type=”text/javascript” src=”js/mdb.min.js”></script> <script type=”text/javascript”> $(function () { $(“#mdb-lightbox-ui”).load(“mdb-addons/mdb-lightbox-ui.html”); }); </script> </body> </html>

info@ipllp.in pro commented 4 years ago

this is the full code i have


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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags