MDB-pro lightbox - clicking on images openes the link of the

Topic: MDB-pro lightbox - clicking on images openes the link of the image instead of the light box

MichalBKuber free asked 4 years ago

I bought MDB pro just for this, I need help. Thank you!

The when I click on the images the image link ( the href of the a tag ) is opened instead of the gallery.

Please advise
Please add exactly what scripts/links need to be added into the html / JS in order for this to work properly.

Thank you,Michal Kuber

Add comment

Mateusz Łubianka staff answered 4 years ago

1 0 Best answer

<p>Hi <a href="/profile/?id=88016" target="_blank" rel="nofollow">@MichalBKuber</a>,</p>

<p>If you have included all css and js MDB files, you should only initialize the lightbox.
Lightbox docs: <a href="https://mdbootstrap.com/docs/jquery/javascript/lightbox/" target="_blank">https://mdbootstrap.com/docs/jquery/javascript/lightbox/</a>
You should to include:
In HTML Head:</p>

<p>Before closing Body tag:</p>

<p>And in your custom js file or 'scripts' tags: </p>

<pre class="prettyprint"><code>$(function () {$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html")});
</code></pre>

<p>Here you can see our installation guide: <a href="https://mdbootstrap.com/docs/jquery/getting-started/installation-guide/" target="_blank">https://mdbootstrap.com/docs/jquery/getting-started/installation-guide/</a></p>

Please insert min. 20 characters.

Hi @MichalBKuber,

If you have included all css and js MDB files, you should only initialize the lightbox. Lightbox docs: https://mdbootstrap.com/docs/jquery/javascript/lightbox/ You should to include: In HTML Head:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">

Before closing Body tag:

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

And in your custom js file or 'scripts' tags:

$(function () {$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html")});

Here you can see our installation guide: https://mdbootstrap.com/docs/jquery/getting-started/installation-guide/

Best,

Add comment

MichalBKuber free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @Mateusz Łubianka I did all above. I'm still seeing the same issue in me code of the image href opening in the browser.

I think maybe a different script I have in my project is causing the a tag to redirect to it's href value. Is there some function I can use to call the lightbox in order for this not to happen? Maybe something along the lines of :

 $( ".mdb-lightbox a" ).on('click' ,function(event) {
    event.preventDefault();
    $(this).mdbLightbox();
 });

Waiting to hear back from you. Thank you! Michal Kuber

Mateusz Łubianka staff commented 4 years ago

Hi,

It is hard to help without seeing a code. please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,

MichalBKuber free commented 4 years ago

Hi, I started creating a code snippet, and I realized the JS scripts were not at the bottom of the body tag. So this is working now. Thanks for your help!

Mateusz Łubianka staff commented 4 years ago

@MichalBKuber,

I'm glad everything works :)

Best,

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.11.0
Device: Lenovo
Browser: Chrome
OS: windows 10
Provided sample code: No
Provided link: No

MichalBKuber

30Support score
2Questions 2Answers 0Snippets