expand image while hiding other divs

问题

I am currently using both the fancybox thambnails and button helper.

Currently I have it all working how I would like but I would like thumbnails below the slide to disappear when the image is expanded and the excess space above the enlarged image gone.

It's too messy having both, they overlap and do all sorts of weird stuff and I don't really think you need the thumbnails (navigation dots) when the image is enlarged.

Any help would be great.

If it helps, you can view the issue on my website shereewalker.com

Here is my 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>

And 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

回答1:

Add these modifications to your onUpdate function :

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();
    }
}

See JSFIDDLE

来源：https://stackoverflow.com/questions/31430943/expand-image-while-hiding-other-divs