lightbox gallery options

cwilly pro answered 5 years ago

0 0 Best answer

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 5 years ago

Hello,

Lightbox will work locally if will use live-server.

Best,

Piotr

Add comment

cwilly pro answered 5 years ago

0 0 Best answer

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

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

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 5 years ago

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

cwilly pro commented 5 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 5 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

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

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

Please insert min. 15 characters.

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mdb.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
</head>

<body>

<script type="text/javascript" src="js/jquery-3.3.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>

// MDB Lightbox Init
<script>$(function () {$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); });</script>
</body>

</html>

Please insert min. 20 characters.

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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <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>   <script type="text/javascript" src="js/jquery-3.3.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>  // MDB Lightbox Init <script>$(function () {$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html"); });</script> </body> </html>

Piotr Glejzer staff commented 5 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.

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Hi,

Here is simple tutorial about <a href="https://mdbootstrap.com/education/bootstrap/portfolio-lesson-4/" target="_blank" >lightbox</a> 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:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><code class=" language-js"><span class="token comment">// MDB Lightbox Init</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#mdb-lightbox-ui"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token string">"mdb-addons/mdb-lightbox-ui.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
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 :
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><div class="row">
<div class="col-md-12">

</div>

</div>
</div></pre>
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 <a href="https://mdbootstrap.com/snippets/jquery/piotr-glejzer/101423" target="_blank" >snippet</a>.

Best,

Piotr

Please insert min. 20 characters.

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

Add comment

billywinter pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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

Add comment