Question

我在这里有一个灯箱（使用fancybox.net）：http://desertcinema.com/home-test/

我使用图库代码以图库形式显示图像：

这是我的jQuery代码：

$(document).ready(function() {
    $(".gallery").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

这是我的HTML：

  <li class="portfolio-box photography">
            <a class="gallery" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
                <img  src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
            </a>
        </li>


    <li class="portfolio-box photography" style="width:335px;display:none;">
            <a class="gallery" rel=gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
                <img  src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
            </a>
        </li>

使用我放在<a href="">上的“库”类，但是点击此图片时，没有下一个或上一个按钮必须正常工作。

我刚按照此说明操作：http://fancyapps.com/fancybox/#examples

我是否犯过任何错误？如果需要，您可以使用Chrome检查元素。

Answer 1

试试这个。你错过了rel =＆＃34; gallery1＆＃34;在第一个＆lt; a＆gt;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>

<li class="portfolio-box photography">
            <a class="gallery"  rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
                <img  src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
            </a>
        </li>


    <li class="portfolio-box photography" style="width:335px;display:none;">
            <a class="gallery"  rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
                <img  src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
            </a>
        </li>
<script>
$(document).ready(function() {
    $(".gallery").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});
</script>

Answer 2

尝试这种方式..李

中不应该有div

＆＃13;

$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>


            <a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)">
	<img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)">
	<img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)">
	<img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
	<img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
</a>

＆＃13;

Fancybox链接不起作用（灯箱）

2 个答案: