javascript - 动态图片灯箱

Question

我正在尝试为图像创建灯箱。

您可以在此处查看此代码的完美工作演示 https://jsfiddle.net/hibbard_eu/zwk954Ln/

这是我从中复制的代码:

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

这段复制的代码根本不起作用。它没有显示十字标志以从用户单击以查看更大尺寸图像的位置返回。

由于整个 js 代码无法正常工作，我在这里做错了什么？

Answer 1

请在下面找到工作代码片段:

$("#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>