1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: I purchased MDB Pro recently and i cant use the lightbox properly

info@ipllp.in pro asked 6 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 6 years ago

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

arooly pro answered 6 years ago

The same problem appear in MDB templates pack homepage V2. Gallery on the right is not working, I used mdb.js not the minified verssion and when you click on the gallery is giving the following error: TypeError: a is undefined[Learn More] mdb.js:8922:26
getChildByClass file:///C:/Users/alex/Desktop/Bootstrap/MDB-Big-Bundle/MDB%20Big%20Bundle/MDB%20Magazine%20Templates%20Pack/js/mdb.js:8922:26 init file:///C:/Users/alex/Desktop/Bootstrap/MDB-Big-Bundle/MDB%20Big%20Bundle/MDB%20Magazine%20Templates%20Pack/js/mdb.js:9219:65 openPhotoSwipe file:///C:/Users/alex/Desktop/Bootstrap/MDB-Big-Bundle/MDB%20Big%20Bundle/MDB%20Magazine%20Templates%20Pack/js/mdb.js:10470:9 onThumbnailsClick file:///C:/Users/alex/Desktop/Bootstrap/MDB-Big-Bundle/MDB%20Big%20Bundle/MDB%20Magazine%20Templates%20Pack/js/mdb.js:10378:13
 

Mikołaj Smoleński staff answered 6 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 6 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 6 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 6 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 6 years ago

this is the full code i have
Write
Create snippet
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
info@ipllp.in
Pro User 0Support score
1Questions 0Answers 0Snippets