javascript - 展开图像同时隐藏其他 div

Question

我目前正在使用 fancybox 缩略图和按钮助手。

目前，我已经按照我想要的方式工作了，但我希望当图像扩展时幻灯片下方的缩略图消失，并且放大图像上方的多余空间消失。

两者都太困惑了，它们重叠并做各种奇怪的事情，我真的不认为当图像放大时你需要缩略图(导航点)。

任何帮助都会很棒。

如果有帮助，您可以在我的网站 shereewalker.com 上查看该问题

这是我的 html:

<a class="fancybox" rel="gallery1" href="images/folio/oliver_sketch_small.jpg" data-fancybox-title="Starting with initial sketches..." >     
<!--slideshow image 1-->

<img src="images/index/playing_thumb.jpg" alt="main icon" /></a>
                            <!--This is the little image on page-->

<a class="fancybox" rel="gallery1" href="images/folio/sketch_small.jpg" title="Starting with initial sketches..." >     
<!--slideshow image 2-->

<a class="fancybox" rel="gallery1" href="images/folio/fagin_small.jpg" title="Fagin illustration">
<!--slideshow image 3-->

                        </a>

和CSS

#fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9000;
}

#fancybox-buttons.top {
    top: 10px;
}

#fancybox-buttons.bottom {
    bottom: 10px;
}

#fancybox-buttons ul {
    display: block;
    width: 166px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #111;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
       -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: rgb(50,50,50);
    background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
    background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-image: url('fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
    opacity: 0.8;
}

#fancybox-buttons a:hover {
    opacity: 1;
}

#fancybox-buttons a.btnToggle {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px;
}

#fancybox-buttons a.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
    border-left: 1px solid #111;
    width: 35px;
    background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
    opacity : 0.4;
    cursor: default;
}

/*______________________________________________________
*/


/* hide the actual buttons helper */
 #fancybox-buttons {
    display: none;
}
/* position the clone : notice the class "clone" */
 .clone {
    position: absolute;
    top: 5px;
    right: 0;
}
.btnToggle.clone {
    background-position: 3px -60px;
    width: 35px;
    height: 35px;
    background-image:url(fancybox_buttons.png);
}
.clone.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-thumbs {
position: fixed;
width: 100%;
overflow: hidden;
z-index: 8050;
visibility:visable;

}

Javascript

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',

        helpers: {
            title: {
                type: 'outside'},
            thumbs: {
            width   : 10,
                height  : 10

           }, // we need this to clone
            buttons: {}


        },
        afterLoad: function () {
            // make sure we have a title
            this.title = this.title ? this.title : " ";
        },
        afterShow: function () {
            // wait for the buttons helper
            setTimeout(function () {
                $("#fancybox-buttons")
                .find(".btnToggle")
                .clone(true, true) // clone with data and events
                .addClass("clone") // add class "clone"
                .appendTo(".fancybox-title") // append it to the title
                .fadeIn(); // show it nicely
            }, 100); //setTimeout
        }, // afterShow
        onUpdate: function () {
            var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
            if (this.canShrink) {
                toggle.addClass('btnToggleOn');
            } else if (!this.canExpand) {
                toggle.addClass('btnDisabled');
            }
        }
    }); // fancybox
}); // ready

Answer 1

将这些修改添加到您的 onUpdate 函数:

onUpdate: function () {
    var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
    if (this.canShrink) {
        toggle.addClass('btnToggleOn');
        // we expanded our image, so hide thumbs
        $("#fancybox-thumbs").hide();
    } else if (!this.canExpand) {
        toggle.addClass('btnDisabled');
    } else {
        // restore thumbs
        $("#fancybox-thumbs").show();
    }
}

参见JSFIDDLE