Скрыть все изображения, кроме 1-го изображения без CSS

Question

Я работаю над this site, где изображения продукта отображаются с небольшой функцией «цветовой фильтрации».

Проблема в том, что оба изображения видны до тех пор пока вы наведите курсор мыши на цветовом поле, потому что в то время мой Javascript берет на себя и показывает/скрывает текущее изображение/цвет (см код в нижней части).

Я использую плагин называется непрочной для Umbraco 7, которая делает cropUrl отзывчивым, но он не работает, если я ставлю display: none на .categoryImage контейнер, это должно быть что-то внутри плагин.

Что мне нужно это НЕ использования display: none на каждом .categoryImage контейнере, но как-то скрыть все изображения, кроме первого, так что плагин может определить ширина/высота/то, что это ему нужно.

Моя JavaScript:

$(".frameColor").each(function() { 
    var categoryImage = $(this).parent("div").next("a").find(".categoryImage"); 
    categoryImage.first().show(); 

    if ($(categoryImage).length > 1) { 
    $(this).on('mouseover', function() { 
     var color = $(this).data('color').replace('#', ''); 

$(".frameColor").removeClass("active"); 
     $(this).addClass("active"); 

     $(categoryImage).hide().filter(function() { 
      return $(this).data('frame-color') === color; 
     }).show(); 
    }); 
} 
else { 
    $(this).hide(); 
} 

});

Мой цвет рамки:

@foreach (var bikeColor in images) 
       { 
        string color = bikeColor.GetPropertyValue("frameColor"); 
        string[] colorSplit = color.Split(','); 

        if (colorSplit.Length == 1) 
       { 
        <div class="frameColor" data-color="#@color" style="background-color:#@colorSplit[0]"></div> 
       } 
       else 
       { 
        <div class="frameColor" data-color="#@color" style="background-image:linear-gradient(-30deg, #@colorSplit[0] 0%, #@colorSplit[0] 50%, #@colorSplit[1] 50%, #@colorSplit[1] 60%);"></div> 
       } 
      } 

Answer 1

Чтобы настроить таргетинг на все .frameColor за исключением первого, в вашем $.each() цикле, вы можете сделать

$(".frameColor:not(:first)").each(function() {}); 

И, чтобы скрыть их без использования display: none; вы можете использовать opacity: 0; или visibility: hidden;