1

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 : "&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
Mr Toad
  • 202
  • 2
  • 12
  • 41
  • Can you show a preview of an image showing how it is now? – Guruprasad J Rao Jul 15 '15 at 12:56
  • you can see it online at shereewalker.com - is that good enough? – Mr Toad Jul 15 '15 at 14:31
  • So you want to hide when you click on the thumbnail image and open a popup for image or when you click on toggle size on image expanded? – Guruprasad J Rao Jul 15 '15 at 14:38
  • When you open a gallery, I would like the nav dots (thumbnails) to show. When you enlarge any one of those images, I would like those dots to disappear. When the image is toggled back to the small size, they reappear. Thanks – Mr Toad Jul 15 '15 at 15:31

1 Answers1

0

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

JFK
  • 40,963
  • 31
  • 133
  • 306