Question

我需要为div下显示的所有图像提供弹出窗口我试图在图片标记之前和之后添加div，但它没有正确添加

这是我的以下代码

<div class="description">
<div class="fancybox"> //class to be added

<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>

预期输出

{{1}}

Answer 1

你可以使用一些JQuery，但你必须稍微改变一下html代码。

请参阅代码段

$('.imagepopup0').click(function() {
  $('.outer').toggle('show');
  $('.fancybox').toggle('show');
});

/* Not needed, just for show */
.fancybox {
  background-color: blue;
}
.description {
  background-color: red;
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
  <img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
  <div class="fancybox" style="display: none;">
    <img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
  </div>
</div>

JSFiddle

Answer 2

原始答案：jquery, wrap elements inside a div

可以使用.wrapAll()方法：

$('#imagepopup0').wrapAll('<div class="fancybox"></div>');

wrapAll()方法将匹配的所有元素包装到另一个元素中，而.wrap()方法将匹配元素单独包装。

Answer 3

感谢您的建议朋友我找到了一个简单的解决方案，而不是使用div i用户标签和花式框中以下代码适合我

$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');

  <script type="text/javascript">
    // FANCYBOX JS
 $(document).ready(function(){
    $(".fancybox").fancybox({
        // openEffect: "none",
        // closeEffect: "none"
    });
});
 </script>

javascript中的图像弹出窗口

3 个答案: