运行fancybox thumb时隐藏其他图像

Hide other images while running fancybox-thumb

本文关键字：其他 图像 隐藏 fancybox thumb 运行      更新时间：2023-09-26

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

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>

编辑：

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

演示

问题实际上是直截了当的。你缺少了两个重要的库，缩略图才能正常工作。

jquery.fancybox-thumbs.js

jquery.fancybox-thumbs.css

这就是它的全部。

你的代码很好。

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