развернуть изображение, скрывая другие divs

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