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

时间:2015-03-02 18:03:44

标签: javascript jquery html fancybox

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

HEAD标签:

<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>

BODY标签:

<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>

1 个答案:

答案 0 :(得分:0)

编辑:

<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>

DEMO

问题实际上是直截了当的。您缺少两个重要的库,缩略图可以工作。

jquery.fancybox-thumbs.js

jquery.fancybox-thumbs.css

这就是它的全部内容。

你的代码很好。

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