隐藏图像，但在fancybox中显示它们

Question

我想创建一个可以在fancybox中查看的隐藏图库。我希望访问者点击一个图像，并能够在fancybox中查看更多“隐藏”的图片。我可以通过在我的页面上显示链接或图像来实现这一点，但我不希望这么混乱。我想隐藏图片或链接。我已经尝试使用Css隐藏页面上的图像，但这也隐藏在fancybox中。救命。很抱歉有点重复，但我希望尽可能清楚。谢谢 。

Answer 1

fancybox中有一个名为“onComplete”的设置选项，它是一个在fancybox出现时执行的回调函数。还有另一个名为“onClosed”的选项，它是关闭fancybox时调用的另一个回调。

你可以这样做：

var fancySettings = {
    'onComplete':function(){
        $(imagesSelector).show();
    },
    'onClosed':function(){
        $(imagesSelector).hide();
    }
}

Answer 2

您可以设置（唯一的）可见图像，如：

<a class="fancybox" href="images/01.jpg"><img src="thumbs/01.jpg" alt="" /></a>

然后其余的链接如：

<div class="hidden">
  <a class="fancybox" href="images/02.jpg"></a>
  <a class="fancybox" href="images/03.jpg"></a>
  <a class="fancybox" href="images/04.jpg"></a>
  ... etc.
</div>

注意，div内的hidden类内的链接没有<img>标记，因此没有其他图片（缩略图）被加载页面，但第一个可见的。

您可能需要设置类似

的CSS

.hidden {display: none;}

然后使用此fancybox初始化脚本：

jQuery(document).ready(function ($) {
    $(".fancybox").attr("rel", "gallery").fancybox();
}); // ready