Как связать контент fancybox с другим содержимым div?

Question

Я использую Fancybox v2.1.5-0 и пытаюсь связать контент с другим div.

Изображение содержимого уже находится в другом div на странице HTML.

Вот мой 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 события нажатия.

меня включает 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 popup (check fiddle).

2. Добавлено class="galleryimages" для каждого DIV изображения, Это будет лучше иметь специальный класс для загрузки изображений в виде галереи в фантазии поле вместо таргетинга по умолчанию Bootstrap классов item active

Fiddle