Javascript 运行fancybox thumb时隐藏其他图像

我想在html页面上隐藏大量图像。在使用fancybox缩略图显示时，还可以查看其他图像。目标是让页面看起来干净，而不是被一堆图像弄得乱七八糟。但它不起作用，不确定是否有冲突，或者这个想法不起作用，我必须在页面上显示其他图像

头部标签：

<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers : {
        title   : {
            type: 'outside'
        },
        thumbs  : {
            width   : 50,
            height  : 50
        }
    }
});
});
</script>

正文标签：

<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/3pk.jpg">
        <div class="imgconcept"></div></a>
<div class="hidden">
    <a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/clcfashnb.jpg"><img src="images/art/clcfashnb.jpg" alt="" /></a>
</div>

编辑：

---

所以你想从一开始就隐藏所有图像？你的问题似乎不清楚。fancybox拇指何时运行？单击图像时？不是所有图像，我会在页面上有一个主图像。当您单击一个图像时，它将运行fancybox thumb以显示还有其他图像。与这里的内容类似：但这甚至不起作用：/因此，当单击任何图像时，会出现“花式”框，并且所有图像都会被隐藏？然后当花式盒子消失时，所有的图像都会重新出现？嗯……JSFIDLE上的示例没有保存。我今天休息，让我们再试一次。我尝试做的示例是：我想要显示一个图像，单击该图像，它应该运行fancybox，但底部有拇指。它不起作用。您在该链接上收到一个错误：未定义UncaughtReferenceError:$。请确保已添加jquery。谢谢，但您拥有的与Fancybox提示和技巧中列出的多个库相似。当它运行时，在全尺寸图像的底部仍然没有其他图像的缩略图。希望这是有意义的。这就是Fancybox为他们的多个图库显示的内容：9显示他们的多个图库，但没有缩略图。我明白你的意思。我将研究itI。我在中确实有这些链接来调用这两个库，并且路径是正确的。但是当我添加隐藏在html中的类，这样这些图像就不会显示在页面上时，它就不起作用了。我只想在fancybox中显示其他图像。你这个摇滚格里姆博德！我怎么会错过那两个。它终于起作用了。啊！

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />

<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers : {
        title   : {
            type: 'outside'
        },
        thumbs  : {
            width   : 50,
            height  : 50
        }
    }
});
});
</script>

$(".fancybox-thumb").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });