Как выделить активный миниатюру?

Question

Мне было интересно, как я могу выделить активное изображение на этой странице http://www.doublezerofilms.com/doublezero-template-webSamples.html, поэтому, когда его щелкают, он остается на мышином img, пока не будет нажата другая миниатюра?

это код, который я использую, чтобы выбрать видео и под ним спасибо html!

$(document).ready(function() { 
    $("#Thumb1").click(function() { 
     $("#hidden").hide().html('<iframe src="http://player.vimeo.com/video/38366163?autoplay=1" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>').fadeIn(4e3); 
     $("#leftsidePlayer").text("This is some text on the consulting video!") 
    }); 

<div class="thumbsWrap"> 
         <div> 
          <div id="Thumb1" class="fadehover"> 
          <img src="images/thumb1.jpg" alt="" class="a" /> 
          <img src="images/thumb1-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb2" class="fadehover"> 
          <img src="images/thumb2.jpg" alt="" class="a" /> 
          <img src="images/thumb2-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb3" class="fadehover"> 
          <img src="images/thumb3.jpg" alt="" class="a" /> 
          <img src="images/thumb3-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb4" class="fadehover" style="margin:0px"> 
          <img src="images/thumb4.jpg" alt="" class="a" /> 
          <img src="images/thumb4-over.jpg" alt="" class="b" /> 
          </div> 
         </div> 
        </div> 

парения код

$(document).ready(function() { 
    $("img.a").hover(function() { 
     $(this).stop().animate({ 
      opacity: "0" 
     }, "fast") 
    }, function() { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
    }) 
}); 

Answer 1

Вы никогда не отправлял код, который имеет дело с затуханием их и, но это в основном то, что вы могли бы сделать.

//when a div is clicked add an active class to it 
$('.thumbsWrap').on('click', '.fadehover', function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

//in hover event check if parent has the 'active class'. If so then don't fade it out. 
$("img.a").hover(function() { 
    $(this).stop().animate({ 
     opacity: "0" 
    }, "fast") 
}, function() { 
    if (!$(this).parent().hasClass('active')) { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
    } 
}) 

Answer 2

Как я вижу, вы меняете непрозрачность, чтобы выделить миниатюры (в вашем зависании). Итак, вот что-то вроде вы хотите: http://jsfiddle.net/fnfJH/ Когда вы нажимаете div, он меняет непрозрачность div, которая уже от 1 до 0,5, а новые изменения меняются на 1.

Answer 3

Вам нужно создать CSS, чтобы скрыть изображение. например:

img.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -moz-opacity: 0; 
    -khtml-opacity: 0; 
    opacity: 0; 
} 

Теперь Добавить событие нажмите на кнопку

$("img.a").click(function() { 
$(this).addClass('transparent'); 
}); 

Теперь редактировать курсор не должен влиять на активное изображение

$("img.a").hover(function() { 
if(!($(this).hasClass('transparent'))) { 
     $(this).stop().animate({ 
      opacity: "0" 
     }, "fast"); 
} 
    }, function() { 
if(!($(this).hasClass('transparent'))) { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
} 
    })