如何綁定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