Как картинки в фотокарусели уравнять по высоте и зумировать поверх соседних блоков?

198
05 ноября 2018, 02:50

Есть owl карусель с картинками, которые могут слегка различаться размерами.

Как сделать так, чтобы картинки отображались одиноковой высоты (без белых отступов), причем при зумировании не прятались под основание карусели, а налазили на блоки сверху и снизу (обозначил для наглядности зеленым и желтым)?

UPD 1: Первую часть с одинаковой высотой решил при помощи фиксации одинаковой высоты у блоков:

function setEqualHeight(columns){
    var tallestcolumn = 0;
    columns.each(function(){
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
            tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}
setEqualHeight($("#photo-gallery .owl-item"));

и выравнивание по высоте стилей контента:

#photo-gallery.owl-carousel .owl-item>div, #photo-gallery.owl-carousel .owl-item>div>a.photo, #photo-gallery.owl-carousel .owl-item img {
    height: 100%;
}

Читал, что можно еще как-то динамически при ресайзе вычислять высоту коллбеков при помощи onRefresh: function () {}, onRefreshed: function () {}. Не подскажите как?

Ну и остается еще вопрос с зумированием и зазорчиками с левой-правой стороеы от блоков.

Фидл

function setEqualHeight(columns) { 
  var tallestcolumn = 0; 
  columns.each(function() { 
    currentHeight = $(this).height(); 
    if (currentHeight > tallestcolumn) { 
      tallestcolumn = currentHeight; 
    } 
  }); 
  columns.height(tallestcolumn); 
} 
 
$('#photo-gallery').owlCarousel({ 
  loop: true, 
  nav: false, 
  dots: false, 
  responsive: { 
    0: { 
      items: 2 
    }, 
    480: { 
      items: 3 
    }, 
    768: { 
      items: 4 
    }, 
    992: { 
      items: 5 
    } 
  } 
}); 
 
setEqualHeight($("#photo-gallery .owl-item"));
.yellow, 
.green { 
  width: 100%; 
  height: 50px; 
} 
 
.yellow { 
  background-color: yellow; 
} 
 
.green { 
  background-color: green; 
} 
 
.photo { 
  display: block; 
  transform: translateZ(0); 
} 
 
.photo:hover { 
  transform: translateZ(0) scale(1.1); 
  transition: .5s all; 
  -webkit-transition: .5s all; 
  -moz-transition: .5s all; 
  -o-transition: .5s all; 
  -ms-transition: .5s all; 
  z-index: 10; 
} 
 
.photo:last-child { 
  transform-origin: right center; 
} 
 
#photo-gallery.owl-carousel .owl-item>div, 
#photo-gallery.owl-carousel .owl-item>div>a.photo, 
#photo-gallery.owl-carousel .owl-item img { 
  height: 100%; 
}
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" /> 
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script> 
<div class="yellow"></div> 
<section id="photo-gallery" class="owl-carousel"> 
  <div> 
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a> 
  </div> 
</section> 
<div class="green"></div>

Answer 1

Можете попробывать вариант с отрицательными margin

function setEqualHeight(columns) { 
  var tallestcolumn = 0; 
  columns.each(function() { 
    currentHeight = $(this).height(); 
    if (currentHeight > tallestcolumn) { 
      tallestcolumn = currentHeight; 
    } 
  }); 
  columns.height(tallestcolumn); 
} 
 
$('#photo-gallery').owlCarousel({ 
  loop: true, 
  nav: false, 
  dots: false, 
  responsive: { 
    0: { 
      items: 2 
    }, 
    480: { 
      items: 3 
    }, 
    768: { 
      items: 4 
    }, 
    992: { 
      items: 5 
    } 
  } 
}); 
 
setEqualHeight($("#photo-gallery .owl-item"));
.yellow, 
.green { 
  width: 100%; 
  height: 50px; 
} 
 
.yellow { 
  background-color: yellow; 
} 
 
.green { 
  margin-top: -20px; 
  background-color: green; 
} 
.carousel { 
  margin-top: -20px; 
} 
.carousel .owl-stage-outer { 
  padding: 20px 0; 
} 
 
.photo { 
  display: block; 
  transform: translateZ(0); 
} 
 
.photo:hover { 
  transform: translateZ(0) scale(1.1); 
  transition: .5s all; 
  -webkit-transition: .5s all; 
  -moz-transition: .5s all; 
  -o-transition: .5s all; 
  -ms-transition: .5s all; 
  z-index: 10; 
} 
 
.photo:last-child { 
  transform-origin: right center; 
} 
 
#photo-gallery.owl-carousel .owl-item>div, 
#photo-gallery.owl-carousel .owl-item>div>a.photo, 
#photo-gallery.owl-carousel .owl-item img { 
  height: 100%; 
}
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" /> 
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script> 
<div class="yellow"></div> 
<section id="photo-gallery" class="carousel owl-carousel"> 
  <div> 
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a> 
  </div> 
</section> 
<div class="green"></div>

Answer 2

Ну, если статические... Тогда как-то так.

function setEqualHeight(columns) { 
  var tallestcolumn = 0; 
  columns.each(function() { 
    currentHeight = $(this).height(); 
    if (currentHeight > tallestcolumn) { 
      tallestcolumn = currentHeight; 
    } 
  }); 
  columns.height(tallestcolumn); 
} 
 
$('#photo-gallery').owlCarousel({ 
  loop: true, 
  nav: false, 
  dots: false, 
  responsive: { 
    0: { 
      items: 2 
    }, 
    480: { 
      items: 3 
    }, 
    768: { 
      items: 4 
    }, 
    992: { 
      items: 5 
    } 
  } 
}); 
 
setEqualHeight($("#photo-gallery .owl-item"));
/* 
.yellow, 
.green { 
  width: 100%; 
  height: 50px; 
} 
 
.yellow { 
  background-color: yellow; 
} 
 
.green { 
  background-color: green; 
} 
*/ 
 
.photo { 
  display: block; 
  transform: translateZ(0); 
} 
 
.photo:hover { 
  transform: translateZ(0) scale(1.1); 
  transition: .5s all; 
  -webkit-transition: .5s all; 
  -moz-transition: .5s all; 
  -o-transition: .5s all; 
  -ms-transition: .5s all; 
  z-index: 10; 
} 
 
.photo:last-child { 
  transform-origin: right center; 
} 
 
#photo-gallery.owl-carousel .owl-item>div, 
#photo-gallery.owl-carousel .owl-item>div>a.photo, 
#photo-gallery.owl-carousel .owl-item img { 
  height: 100%; 
} 
 
 
/* Блоки yellow/green */ 
 
div.owl-stage:before, 
div.owl-stage:after { 
  content: ''; 
  display: block; 
  height: 50px !important; 
} 
 
div.owl-stage:before { 
  background-color: yellow; 
} 
 
div.owl-stage:after { 
  background-color: green; 
  visibility: visible !important; 
}
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" /> 
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script> 
<!--div class="yellow"></div--> 
<section id="photo-gallery" class="owl-carousel"> 
  <div> 
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a> 
  </div> 
  <div> 
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a> 
  </div> 
</section> 
<!--div class="green"></div-->

Просмотр может тупить из-за подгрузки внешних файлов. Просто запустите пару раз подряд.

READ ALSO
Как в обработчике события у chrome появляется event?
javascript

Как в обработчике события у chrome появляется event?

Заметил, что если в браузере chrome выполнить вот такой код:

 155
Скрипт счетчика работает криво
javascript

Скрипт счетчика работает криво

Собственно сам скриптРаботает, нареканий сначала не возникало, но когда счетчик доходит до 0, он соответственно уходит в -

 195
ограничить поле действия html [закрыт]
javascript

ограничить поле действия html [закрыт]

имеется html который я вставляю в document динамически, к нему же имеется cssвставлять тоже легко просто с помощью

 165
Плавный скроллинг к элементу JS
javascript

Плавный скроллинг к элементу JS

Можно ли сделать плавный скролл именно с этой ссылкой <a href="/#shops">перейти</a>?

 155