1

我目前正在使用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 : "&nbsp;";
        },
        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
4

1 回答 1

0

将这些修改添加到您的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

于 2015-07-15T16:35:28.900 回答