Question

我正在尝试为图片创建一个Lightbox。

您可以在此处查看此代码的完美工作演示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

请在下面找到工作代码段：

＆＃13;

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

＆＃13;

a{
    color: white;
}

span.divider{
    padding: 0 10px;
}

＆＃13;

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

＆＃13;

动态图像灯箱

1 个答案: