隐藏其他div时展开图像
我目前正在使用fancybox thambnails和button helper。
目前我已经完成了我想要的工作，但我希望当图像扩展并且放大图像上方的多余空间消失时，幻灯片下方的缩略图会消失。
这两者都很混乱，它们重叠并做各种奇怪的事情，当图像被放大时我并不认为你需要缩略图（导航点）。
任何帮助都会很棒。
如果有帮助，您可以在我的网站shereewalker.com上查看该问题
这是我的HTML：
和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
将这些修改添加到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