lightbox gallery options

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: lightbox gallery options

billywinter pro asked 6 years ago

How can you get the option for the maximize feature on a picture using the lightbox code?  I've used all the example code here but can't get that feature to show up.  Also, even thought the next and previous functions work, I do not get those arrows to appear on the screen.  When you click to the right it will show the next pic. THanks  

Jakub Mandra staff premium answered 6 years ago

Hello, If code from this snippet wont work, it's pretty clearly that something went wrong during mdb installation. And then i suggest to walk through that guide once again.   Also, you can fork the snippet and come back here to share your thoughts.   Best, Jakub

billywinter pro answered 6 years ago

Thanks Jakub.  The lightbox features are a 'PRO' feature and must be purchased.  I have this and installed MDB-Pro_4.5.12.zip.  Does the 5 minute guide with the basic setup include lightbox functionality?  In order for me to get you snippet to work,  I had to do 2 things: Add a data-lightbox="test" tag to the image reference.  And,  add a reference to lightbox-plus-jquery.min.js.  Without these changes,  it does not work.  Can you refer me to the proper install for MDB LIGHTBOX?  I don't think the basic install includes this stuff? Thank You

Piotr Glejzer staff answered 6 years ago

Hi, Here is simple tutorial about lightbox but I will try to explain to you. So, the first step is that you have to get a MDB PRO ( I assume that you got it) , next step you are copy code: 
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
and paste it to new script tag below our scripts in your package. Next step is that you have to include code with your images like that : 
<div class="row">
<div class="col-md-12">

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

<div class="mdb-lightbox no-margin">

<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>

</div>
</div>
That code required to have 1 empty div with ID = 'mdb-lightbox-ui' and all images should be in wrapper with class mdb-lightbox. You don't need a data-lightbox. Here is working snippet. Best, Piotr

billywinter pro answered 6 years ago

Thanks for your detailed explanation.  Unfortunately, it still does not work for me.  I am sure that I don't have the CSS or JS files set up correctly or am missing something.  I will copy my full code here using your example so you can see what files I am using.  Is there a difference between the file names of the Pro version or just the content?  I definitely have set up my files as shown here in the getting started tutorial,  but don't know if Pro version is different: <!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"> <link rel="stylesheet" href="css/lightbox.min.css"> </head> <body> <div class="row"> <div class="col-md-12"> <div id="mdb-lightbox-ui"> </div> <div class="mdb-lightbox no-margin"> <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> </div> </div> <!-- 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 src="js/lightbox-plus-jquery.min.js"></script> --> // MDB Lightbox Init <script>$(function () {$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); });</script> </body> </html>

Piotr Glejzer staff commented 6 years ago

Do you have any errors in the console? If you are using our package that we don't have a file like 'lightbox.min.css' or did you create on your own?
Our lightbox code CSS is in mdb.min.css and mdb.min.js. 

billywinter pro answered 6 years ago

Ok,  I removed the other CSS/JS code, but it still doesn't work.  The console does give me 3 errors of which I can't figure: SCRIPT7002: XMLHttpRequest: Network Error 0x2, The system cannot find the file specified. 15 SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json 18 SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json 18

Piotr Glejzer staff commented 6 years ago

Hi,

It looks like you don't have files so index.html can't find a code to initiate this. Are you sure you are doing everything well?

Best,

Piotr

billywinter pro answered 6 years ago

"It looks like you don't have files" ... what files are you referring to? "index.html can't find a code to initiate this"...there is no index.html in the example so I'm not sure what you mean by this either. Thanks  

Piotr Glejzer staff commented 6 years ago

Hi,

I'm referring to that you probably don't use our MDB Pro version or you have some wrong paths to mdb files.
I copied and pasted your HTML code what did you paste 5 days ago and I removed the link with  'css/lightbox.min.css' and everything going well.  

Are you sure that you are using our PRO version?  Do you have some other files to work with your projects? It's a weird situation because lightbox is working well with our MDB Pro version and we don't have any problems with that so probably it's not our fault. 

I try to figure out what's problem is but I don't have any problems with that on my site. 

What kind of browser do you use? 

Best,

Piotr

billywinter pro answered 6 years ago

I just re-dowloaded MDB-Pro_4.5.14.zip and ran the same sample code (without the lightbox.min.css) and it still doesn't work.  The picture grid appears but when you click on a picture nothing happens.  Can someone verify my zip file really contains the pro version? Is there a way I can verify this? Thanks

Piotr Glejzer staff commented 6 years ago

Yes, I will verify. Please send to p.glejzer@mdbootstrap.com. I will check.

 

cwilly pro commented 6 years ago

Hello, 

I've also tested with MDB-Pro_4.5.14 and I have exactly the same problem.

no reaction when you click on images

Piotr Glejzer staff commented 6 years ago

Hi, 

may you show me your code on our snippets ? Thanks.

https://mdbootstrap.com/snippets/

Did you check that you have all files, good paths and folder mdb-addons with 2 files?

Best,

Piotr

cwilly pro answered 6 years ago

Hello Piotr,

I've posted my code, something is missing or not working correctly.

Thanks for your support

https://mdbootstrap.com/snippets/jquery/cwilly/205380

sorry for the delay

 

 

Piotr Glejzer staff commented 6 years ago

Hi,

I forked your snippet and everything is working correctly. 

Can you check this https://mdbootstrap.com/snippets/jquery/piotr-glejzer/209472 ?

But If still is not working, can you check console that you have some errors maybe? 

Best,

Piotr

cwilly pro answered 6 years ago

Hello Piotr

Lightbox is working correctly as expected from my web server, with Url starting by   http://... 

I see errors from console when I load file from local directory.

I have imported all files and your demo on local and try to load  with a URL  like  file://...

in this case it's not working.

Thanks for your support.

Piotr Glejzer staff commented 6 years ago

Hello,

Lightbox will work locally if will use live-server. 

Best,

Piotr

 
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: desktop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
About author
billywinter
Pro User
230Support score
8Questions 19Answers
0Snippets likes 1Snippets