Dynamic Image Lightbox

2
votes

I'm trying to create a Lightbox for Image.

You can see Perfectly working demo of this code here https://jsfiddle.net/hibbard_eu/zwk954Ln/

Here's the code I copied from it:

<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_0000-Banner_01.JPG"  
 data-lightbox="gallery-1"
 data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a> 
              <span class='divider'>|</span>
              <span class='caption'>A banner with some cars</span>"
              id="1">
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_0000-Banner_01.JPG">
</a>

<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type="text/javascript">
$("#lightbox").on("click", "a.add", function(){
var new_caption = prompt("Enter a new caption");
if(new_caption){
   var parent_id = $(this).data("id"),
       img_title = $(parent_id).data("title"),
       new_caption_tag = "<span class='caption'>" + new_caption + "</span>";

   $(parent_id).attr("data-title", img_title.replace(/<span class='caption'>.*<\/span>/, new_caption_tag));
   $(this).next().next().text(new_caption);
}
});
</script>

This copied code is not working at all. It's not showing that cross sign to return back from where user clicked to see the bigger size of image.

What's wrong i'm doing here due to which entire js code is not working?

2
javascriptjqueryhtml
Include lightbox.css and lightbox.min.js files. - Harsh Patel

2 Answers

0
votes

Please find working code snippet below:

$("#lightbox").on("click", "a.add", function(){
    var new_caption = prompt("Enter a new caption");
    if(new_caption){
       var parent_id = $(this).data("id"),
           img_title = $(parent_id).data("title"),
           new_caption_tag = "<span class='caption'>" + new_caption + "</span>";
        
       $(parent_id).attr("data-title", img_title.replace(/<span class='caption'>.*<\/span>/, new_caption_tag));
       $(this).next().next().text(new_caption);
       
       // Make an AJAX request to save the data to the database
    }
});
a{
    color: white;
}

span.divider{
    padding: 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"/>
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_2424.JPG" 
  data-lightbox="gallery-1"
  data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a>
              <span class='divider'>|</span>
              <span class='caption'>Men</span>"
  id="4"
>
  <img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_2424.JPG">
</a>
0
votes

You need to add this code after load images (under ajax success):

document.querySelectorAll('[data-toggle]').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show(); }));