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

web
mobile

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

MichalBKuber pro asked 1 months 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.

  1. Please advise
  2. 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


Mateusz Łubianka staff answered 1 months ago

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,


MichalBKuber pro answered 1 months ago

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 1 months 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 pro commented 1 months 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 1 months ago

@MichalBKuber,

I'm glad everything works :)

Best,


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.11.0
  • Device: Lenovo
  • Browser: Chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No