Question

我正在玩Fancybox图片库，并且在理解代码如何工作方面有点麻烦。这是我在Fancybox演示中的代码版本：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Fancybox Image Gallery demo</title>

<script src="/jquery/jquery-1.11.2.min.js"></script>   

<script type="text/javascript" src="http://photopedia.com.au/jquery/fancybox2/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://photopedia.com.au/jquery/fancybox2/source/jquery.fancybox.css" media="screen" />

  <style type='text/css'>
    #links {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding-top: 10px;
    list-style: none;
    text-align: center;
    z-index: 99999;
}

#links li {
    display: inline;
    padding: 0 5px;
}

#links li label {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

#links li.active label {
    background-color: white;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(".fancybox").fancybox({
    nextEffect  : 'fade',
    prevEffect  : 'fade',
    padding     : 0,
    margin      : [15, 15, 40, 15],
    afterLoad   : addLinks,
    beforeClose : removeLinks
});

function addLinks() {
    var list = $("#links");

    if (!list.length) {    
        list = $('<ul id="links">');

        for (var i = 0; i < this.group.length; i++) {
            $('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
        }

        list.appendTo( 'body' );
    }

    list.find('li').removeClass('active').eq( this.index ).addClass('active');
}

function removeLinks() {
    $("#links").remove();    
}
});//]]>  

</script>


</head>
<body>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
</body>


</html>

工作正常，但我不明白怎么做。看起来javascript在页面上的项目中构建了一个名为#links的UL，并使用该列表循环浏览不同的图像。我不明白的是它如何区分列表中使用的元素。我想用它来制作一个项目库，其中的类是'元素'并包含图像和其他一些细节，但在我理解第一步之前，我有点迷失。

Answer 1

您需要实际阅读Setup。与#links相关的所有代码与fancybox代码无关，也不属于Fancybox。它只是演示的一部分。你只需要像这样设置你的html（使用你的元素类：

<a class="element" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="element" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

你喜欢的盒子代码是这样的：

$(".element").fancybox({
nextEffect  : 'fade',
prevEffect  : 'fade',
padding     : 0,
margin      : [15, 15, 40, 15]
});

所有可能的选项均为Here。如果您想要打开的不仅仅是图片，请阅读有关如何打开内联，iframe或ajax链接的文档。

了解Fancybox图库

1 个答案: