要使用fancybox創(chuàng)建畫廊,您需要先下載fancybox插件并包含在您的項(xiàng)目中。然后按照以下步驟操作:
<link rel="stylesheet" href="path/to/fancybox/jquery.fancybox.min.css">
<script src="path/to/fancybox/jquery.fancybox.min.js"></script>
<div class="gallery">
<a href="image1.jpg" data-fancybox="gallery" data-caption="Image 1">
<img src="image1-thumbnail.jpg" alt="Image 1">
</a>
<a href="image2.jpg" data-fancybox="gallery" data-caption="Image 2">
<img src="image2-thumbnail.jpg" alt="Image 2">
</a>
<a href="image3.jpg" data-fancybox="gallery" data-caption="Image 3">
<img src="image3-thumbnail.jpg" alt="Image 3">
</a>
</div>
$(document).ready(function() {
$("[data-fancybox='gallery']").fancybox({
loop: true
});
});
在這個(gè)例子中,所有帶有data-fancybox="gallery"
屬性的鏈接將被組合成一個(gè)畫廊,并且可以使用箭頭鍵或滑動(dòng)手勢進(jìn)行導(dǎo)航。您可以根據(jù)需要自定義fancybox插件的選項(xiàng),以實(shí)現(xiàn)更多的效果和功能。