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

Question

我使用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> 

现在，我想开画廊的fancybox上openGallery click事件。

我有包括头的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 

    }); 
    }); 

所以，如何从项目格复制内容和推入的fancybox内容和开放。帮我建立这个。

Answer 1

随着click event你可以这样

$(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弹出窗口（检查小提琴）时，确保图像在页面上保持可见。

2. 新增class="galleryimages"每个图像的div，这将是最好有自定义类加载图像作为花式盒画廊定位，而不是默认的自举类item active

Fiddle