如何将Fancybox内容绑定到另一个div中的内容？

Question

如何将Fancybox内容绑定到另一个div中的内容？

3

我使用的是Fancybox v2.1.5-0，并尝试绑定来自另一个div的内容。

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

这是我的HTML代码：

Bootstrap 3 carousel
---------------------------------------------------------------
<div class="hotelsd-img">
 <div id="photoCarousel-1" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner" role="listbox">
      <div class="item active">
         <img class="img-responsive" src="http:\\www.confirmedrooms.com\hotelbooking\images\hotelimages\1110\031742.jpg" alt="Hotel Name">
      </div>
      <div class="item active">
         <img class="img-responsive" src="http:\\www.confirmedrooms.com\hotelbooking\images\hotelimages\1110\031742.jpg" alt="Hotel Name">
      </div>
      <div class="item active">
         <img class="img-responsive" src="http:\\www.confirmedrooms.com\hotelbooking\images\hotelimages\1110\031742.jpg" alt="Hotel Name">
      </div>
   </div>
 </div>
</div>

Photo Count
--------------------------------------------------------
<div id="hotelGallery-1" class="photoCount">
    <a href="#" class="openGallery">View all 15 Photos</a>
</div>

现在，我想在“openGallery”点击事件上打开Fancybox Gallery。

我已经在头部引入了Fancybox文件：

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

我尝试的JS代码如下：

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

       // Possible code here

     });
  });

那么，如何将item div中的内容复制并推送到fancybox内容中并打开呢？帮我构建一下吧。

- Daniel Smith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shehary · Answer 1

使用 click 事件 可以像这样实现它

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

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

注意：

你可能需要 afterClose: function ()
```
afterClose: function () {
    $('.galleryimages').css('display', 'block')
}
```
确保在关闭fancybox弹出窗口时，图片仍然可见（请检查fiddle）。
将 class="galleryimages" 添加到每个图像div中，最好使用自定义类来加载fancybox中的图库图片，而不是针对默认的Bootstrap类 item active

小提琴