Блог

Итак, я работаю над блогом / веб-сайтом с каруселью изображений с 8 местами для изображений. Я использую Owl Carousel с CouchCMS (это не должно иметь большого значения)..

Вот как выглядит карусель:

 <div id="owl-demo" class="owl-carousel">
     <div class="item"><img src="<cms:show blog_image />" class="carousel_image"></div>
     <div class="item"><img src="<cms:show image_2 />"></div>
     <div class="item"><img src="<cms:show image_3 />"></div>
     <div class="item"><img src="<cms:show image_4 />"></div>
     <div class="item"><img src="<cms:show image_5 />"></div>
     <div class="item"><img src="<cms:show image_6 />"></div>
     <div class="item"><img src="<cms:show image_7 />"></div>
     <div class="item"><img src="<cms:show image_8 />"></div>
</div>
  

Прямо сейчас у меня есть это, так что вы можете загрузить максимум 8 изображений с помощью CouchCMS.

Если вы загружаете менее 8 изображений, остальные просто отображаются как поврежденные изображения.

Прямо сейчас я использую следующий код, чтобы просто скрыть поврежденные изображения, что, конечно, оставляет пустой div (что все же лучше, чем показывать поврежденное изображение)… Это лучшее решение, которое я мог придумать.

 $("img").error(function(){
   $(this).hide();
});
  

Кто-нибудь знает какой-нибудь способ, которым я мог бы определить, повреждено ли изображение, и скрыть весь div, содержащий изображение?

Спасибо.

Ниже приведен пример того, что я пробовал, но это не сработало.

HTML

 <div class="item" id="img-8-div"><img src="<cms:show image_8 />"></div>
  

И вот jQuery, снова он не сработал.

 $("#img-8-div").children('img').error(function(){
   $(this).hide();
});
  

Демонстрационная скрипка

Используйте родительский элемент jQuery()

 $("img").error(function(){
   $(this).parent().hide();
});