Clickable link in Lightbox.

Hi, could you provide just an HTML code without PHP elements? Also, please explain clearly what is the problem? Best, Marta

---

Hi Marta, Here is the HTML for what i am trying to achieve. Below each picture is an edit and delete button.  I  would like to link those to actions but when I click on them I only get the image popping up. Hope this is clearer for you. Tom

Start your code here

<main>

<!--Main layout--> <div class="container"> <!-- Start your project here--> <div class="row"> <div class="col-md-12"> <div id="mdb-lightbox-ui"></div> <div class="mdb-lightbox "> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Cat</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Camera</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Winter Walk</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Leaves</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Mountains</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> <figure class="col-sm-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> <figcaption class="figure-caption text-left" style="padding-left: 10px; padding-right: 10px"> <div class="row"> <div class="col-md-6"> <h5>Red Squirrel</h5> </div> <div class="col-md-6" style="text-align: right;"> <!--Edit--> <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a> <!--Delete--> <a href="delete_img.php" data-size="1600x1067"> <i class="fa fa-trash" aria-hidden="true"></i></a> </div> </div> </figcaption> </figure> </div> </div> </div> </div> <!--/.Main layout--> </main>

---

Hi, I've tried to find a quick fix for this problem but I couldn't, so now I can only say that we can try to find a solution for this in another release of MDB. Best, Marta

---