javascript - 如何从另一个 div 内容绑定(bind) fancybox 内容？

Question

我使用 Fancybox v2.1.5-0 并尝试从另一个 div 绑定(bind)内容。

内容图像已经在 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 内容并打开。帮助我构建它。

Answer 1

使用点击事件你可以这样实现

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

注意:

1. 您可能需要afterClose: function ()

   afterClose: function () {
       $('.galleryimages').css('display', 'block')
   }
   

   确保图像在关闭 fancybox 弹出窗口时在页面上保持可见(检查 fiddle )。

2. 向每个图像 div 添加了 class="galleryimages"，最好使用自定义类将图像加载为花式框中的图库，而不是针对默认的 Bootstrap 类 item主动

Fiddle