Question

我正在创建一个包含不同类别的下拉菜单的照片库。一切都很好，除了当我测试画廊页面时，所有图像在加载时都是可见的，然后一旦它们被完全加载，它们就会消失在它们的所述类别中（因为它应该是开始时）。我的问题是......

有没有办法隐藏所有照片，直到有人点击并展开菜单选项？或者也许是一个更好的方式来解决这个问题？

以下是图库网站的链接... http://wayhigh.we.bs/Fireball%20Site/gallery.html 这是html的一个例子......

<div class="wrapper">
    <div id="st-accordion" class="st-accordion">
        <ul>
            <li>
                <a href="#">Functional<span class="st-arrow">Open or Close</span>        </a>
                <div class="st-content">
                    <a class="fancybox-thumb" rel="functional" href="images/wyzeguy.jpg" title="Wyze guy rigs">
                        <img src="images/smallwyzeguy.jpg" alt="" />
                    </a>
                    <a class="fancybox-thumb" rel="functional" href="images/dragon.jpg" title="Dragon">
                        <img src="images/smalldragon.jpg" alt="" />
                    </a>
                </div>

有几个菜单项......

手风琴菜单的

脚本......

$(function() 
{
    $('#st-accordion').accordion(
    {
        oneOpenedItem   : true
    });
});

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

有没有比我想出的更好的解决方案？还是一种流水线解决方案？谢谢你的帮助。

Answer 1

我认为隐藏照片直到加载的一种简单方法是在文档准备好之前使它们display:none。在名为hidden的css中创建一个类，并为其设置display:none的样式。将类添加到所有图像。

然后在$(document).ready调用中添加一行作为fancybox回调，或者在设置看起来像$("img.hidden").removeClass("hidden");的精美框后添加一行。

如何在菜单扩展之前隐藏照片？

1 个答案: