jQuery скрывает все, а не только неактивно

Question

В настоящее время я запускаю сценарий, который захватывает изображения из папки и отображает их в слайд-шоу. (это должно было быть сделано определенным образом из-за совместимости с ie8 и 9.)

Из-за того, что я избегаю растяжения пропорций, изображения появляются за меньшими изображениями, поэтому вы можете видеть все а не только одно изображение.

Я попытался с помощью

$('.image-container img:not(active)').css('display','none'); 

, но вместо того, чтобы скрыть все изображения, а не показывать активный.

Я также пытался использовать прописку на изображениях, но, поскольку я не знаю, что размер изображений добавляет границу/дополнение к каждому из них с фоном #FFF, означает, что меньшие изображения по-прежнему не блокируются более крупные.

мой слайдер JS

$.fn.slider = function (interval) { 
    var slider = this; 

    setInterval(function() { 
     var $active = $(slider).find(".active"); 
     if ($active.length == 0) { 
      $active = $(slider).find("IMG:last"); 
     } 
     var $next = $active.next().length ? $active.next() : $(slider).find("IMG:first"); 
     $active.addClass('last-active'); 
     $next.css({ 
       opacity: 0.0 
      }) 
      .addClass('active') 
      .animate({ 
       opacity: 1.0 
      }, 1000, function() { 
       $active.removeClass('active last-active'); 
      }); 
    }, interval); 
} 

PHP

div class="activelink scrollLink" id="link-9"> 
          <img src="<?php echo Yii::app()->theme->baseUrl; ?>/img/blankframe.png" alt=""> 
          <div class="slideshow" id="slide7"> 
          <div class="image-container"> 
           <?php 
            $handle = opendir(dirname(realpath(__FILE__)).'/../../customImg/'); 
            while($file = readdir($handle)){ 
             if($file !== '.' && $file !== '..'){ 
              echo '<img src="' . Yii::app()->theme->baseUrl . '/customImg/'.$file.'" border="0" />'; 
             } 
            } 
           ?> 
          </div> 
         </div> 
        </div> 

CSS

.image-container{ 
    display: block; 
    max-width: 205px; 
    max-height: auto; 
    position: relative; 
    overflow: hidden; 
    padding: 90% 5% 10% 5%; 
    top:-310px; 
    left:13%; 
    background-color:#FFF; 
    background-size:800px; 
} 

.image-container img{ 
    display: block; 
    max-width:100%; 
    height:auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    overflow:hidden; 
    background-color:#FFF; 
    border-radius:5px; 
} 

div.activelink#link-9 img{ 
    width:260px; 
} 

div.activelink#link-9{ 
    background-color:#FFF; 
    height:320px; 
} 

Answer 1

Вы пропустили . из active

$('.image-container img:not(.active)').css('display','none'); 
//      ^

EDIT

Использование not:

$('.image-container img').not('.active').css('display', 'none');