我使用 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 内容并打开。帮助我构建它。
最佳答案
使用点击事件
你可以这样实现
$(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 )。
向每个图像 div 添加了
class="galleryimages"
,最好使用自定义类将图像加载为花式框中的图库,而不是针对默认的 Bootstrap 类item主动
关于javascript - 如何从另一个 div 内容绑定(bind) fancybox 内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33461073/