Clickable link in Lightbox.

Topic: Clickable link in Lightbox.

Lars7 pro asked 6 years ago

Hi,I have added 2 clickable links under my image in lightbox but when I click I only get the image popping up.How do get the links to do another action?Start your code here <div class="row"> <div class="col-md-12"> <div id="mdb-lightbox-ui"></div> <div class="mdb-lightbox"> <?php while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){?> <figure class="col-sm-4"> <a href="img/images/<?php echo $row['img_folder']; ?>/<?php echo $row['img_name']; ?><?php echo $row['img_ext']; ?>" data-size="1600x1067"> <img src="img/images/<?php echo $row['img_folder']; ?>/<?php echo $row['img_name']; ?><?php echo $row['img_ext']; ?>" 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"> <?php echo $row['img_folder']; ?>|<?php echo $row['img_name']; ?> </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> <?php } ?> </div> </div></div>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Lars7 pro answered 6 years ago

0 0 Best answer

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
<pre>Start your code here

<div class="row">
<div class="col-md-12">

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

<a href="edit_img.php" data-size="1600x1067">
<i class="fa fa-edit" aria-hidden="true">|</i></a>

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

<a href="edit_img.php" data-size="1600x1067">
<i class="fa fa-edit" aria-hidden="true">|</i></a>

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

<a href="edit_img.php" data-size="1600x1067">
<i class="fa fa-edit" aria-hidden="true">|</i></a>

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

<a href="edit_img.php" data-size="1600x1067">
<i class="fa fa-edit" aria-hidden="true">|</i></a>

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

<a href="edit_img.php" data-size="1600x1067">
<i class="fa fa-edit" aria-hidden="true">|</i></a>

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

Please insert min. 20 characters.

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>

<div class="container">  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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;">  <a href="edit_img.php" data-size="1600x1067"> <i class="fa fa-edit" aria-hidden="true">|</i></a>  <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>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Lars7

Pro User 20Support score
8Questions 9Answers 0Snippets