Question

我使用Fancybox v2.1.5-0并尝试将内容绑定到另一个div。

内容图片已经在HTML页面的另一个div中。

这是我的HTML代码：

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="js/plugins/fancybox/jquery.fancybox.css">
<script src="js/plugins/fancybox/jquery.fancybox.pack.js"></script>

现在，我想在 openGallery 点击事件上打开Fancybox图库。

我在头部包含了Fancybox文件：

$('.openGallery').on('click',function(){
     $.fancybox({

       // Possible code here

     });
  });

我尝试使用JS代码：

{{1}}

那么，如何从项目 div复制内容并推送到fancybox内容并打开。帮我建立这个。

Answer 1

使用click event，你可以像这样实现它

＆＃13;

$(document).ready(function () {
    $('.openGallery').click(function () {
        $.fancybox.open($('.galleryimages').get(), {
             arrows: true,
             padding: 0,
             //Additional Options
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div id="hotelGallery-1" class="photoCount"> <a href="#" class="openGallery">View all 15 Photos</a></div>
<div class="hotelsd-img">
    <div id="photoCarousel-1" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active galleryimages">
                <img class="img-responsive" src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" alt="Hotel Name">
            </div>
            <div class="item active galleryimages">
                <img class="img-responsive" src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" alt="Hotel Name">
            </div>
            <div class="item active galleryimages">
                <img class="img-responsive" src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/3.png" alt="Hotel Name">
            </div>
        </div>
    </div>
</div>

＆＃13;

注意：

您可能需要afterClose: function ()
```
afterClose: function () {
    $('.galleryimages').css('display', 'block')
}
```
要确保当关闭fancybox弹出窗口时，图像在页面上保持可见（检查小提琴）。
为每个图片div添加了class="galleryimages"，最好让自定义类将图片作为图库加载到精美框中，而不是针对默认的Bootstrap类item active

Fiddle

如何从另一个div内容绑定fancybox内容？

1 个答案: