jQuery - высота блока как у соседнего - проблема с обновлением самой высоты
Всем привет.
Суть в следующем Есть галерея изображений. У нее есть основная картинка (большая) и с боку мелкие. При клике на мелкую я из data атрибута хватаю путь к большой картинке и заменяю у основной. Суть думаю ясная. Есть два дива, один вокруг мелких, другой вокруг основного. Мне нужно брать высоту основного и добавлять к тому который вокруг мелких. Суть в том, чтобы при изменении высоты блока с основной - раздвигался или сжимался блок с мелкими. Но, при подмене картинки мне возвращает прошлая высота, а не текущая. То есть я не могу получить высоту блока сразу после подмены картинки, хотя блок и увеличился по высоте. Только со второго клика.
this.images_blocks = function(a)
{
// блок с которого берем высоту
var image_height = a(".info-image-wrap").height();
// блок, которому нужно выставить высоту
var images_wrap = a(".info-images-wrap");
images_wrap.height(image_height);
// если изменили размер окна браузера
a(window).on('resize', function(){
images_wrap.height(image_height);
});
}
Если кликнуть по определенным элементам(info-images-thumbnails), то высота меняется только со второго клика.
this.info = function(a)
{
// выставляем высоту по дефолту
core.scripts.images_blocks(a);
// в случае, если кликнули на мелкую картинку, то обновляем высоту блока
a('.info-images-thumbnails').on('click', 'a', function(e)
{
core.scripts.images_blocks(a);
});
}
Сам HTML примерно такой <div class="info-images"> <div class="info-images-wrap"> <ul class="info-images-thumbnails"> <li><a href="большая_картинка" data-image="средняя_картинка"><img src="мелкая_картинка"></a></li> <li><a href="большая_картинка" data-image="средняя_картинка"><img src="мелкая_картинка"></a></li> <li><a href="большая_картинка" data-image="средняя_картинка"><img src="мелкая_картинка"></a></li> <li><a href="большая_картинка" data-image="средняя_картинка"><img src="мелкая_картинка"></a></li> </ul> </div> <div class="info-image-wrap"> <a href="#"><img src="средняя_картинка"></a> </div> </div> То есть, при клике на info-images-thumbnails меняется высота info-image-wrap в зависимости от картинки в ней, а вот высота info-images-wrap меняется не сразу, а со второго клика. Если покликать несколько раз, то высота скачет через раз. То остается прежней высотой, то меняется как нужно. Я так понимаю, что дело в подмене картинки и тем, что height обновляется не сразу. Буду благодарен за помощь. |
dropoff,
this.images_blocks = function(a)
{
// блок с которого берем высоту
var image_height = a(".info-image-wrap");
// блок, которому нужно выставить высоту
var images_wrap = a(".info-images-wrap");
// если изменили размер окна браузера
a(window).on('resize', function(){
images_wrap.height(image_height.height());
}).trigger("resize");
}
|
Это ничего не меняет.
Ресайз окна можно не учитывать, просто оставил его в коде. Проблема после клика на info-images-thumbnails > a Там уже image_height получает новую высоту блока только со второго раза. |
dropoff,
код не логичен, кликнули thumbnails, загрузили картинку, картинка установила нужные размеры, как - то так. без макета сложно. |
Вот я набросал https://jsfiddle.net/dropoff/u9zo78sL/2/
Если пощелкать на картинки слева мелкие по несколько раз, то будет видно, что высота не всегда определяется сразу. Она скачет. Высоту видно над мелкими картинками. |
Цитата:
|
dropoff,
css
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.info-images{
display: flex;
width: 370px;
border: 1px solid #0000FF;
margin: 20px;
}
.info-images-wrap {
background:red;
flex: 1;
}
.info-image-wrap {
width: 85%;
background-color: green;
}
.info-image-wrap img {
max-width: 100%;
height: auto;
margin: 0;
margin-bottom: -4px;
}
.info-images-thumbnails {
text-align: center;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
margin-top: 4px;
}
.info-images-thumbnails li {
width: 90%;
margin: 0px auto;
padding: 0;
max-height: 70px;
}
.info-images-thumbnails li img {
max-width: 100%;
height: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".info-images").each(function() {
var el = $(this),
parentImg = $(".info-image-wrap", el),
img = $("img", parentImg),
parentThumbnails = $(".info-images-wrap", el);
parentThumbnails.on("click", "a", function(e) {
e.preventDefault();
img.attr("src", $(this).data("image"))
}).find("a:first").click()
})
});
</script>
</head>
<body>
<div class="info-images">
<div class="info-images-wrap">
<ul class="info-images-thumbnails">
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1-350x455.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-350x455.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-350x455.jpg"></a></li>
</ul>
</div>
<div class="info-image-wrap">
<a href="#"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"></a>
</div>
</div>
<div class="info-images">
<div class="info-images-wrap">
<ul class="info-images-thumbnails">
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1-350x455.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-350x455.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"></a></li>
<li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-350x455.jpg"></a></li>
</ul>
</div>
<div class="info-image-wrap">
<a href="#"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"></a>
</div>
</div>
</body>
</html>
|
Цитата:
Цитата:
Пробовал вчера играться с этим всем, но так ничего путного и не вышло. |
Цитата:
Цитата:
Цитата:
|
Цитата:
Я писал, что мне нужно, чтобы блок с мелкими картинками всегда имел высоту блока с основной. мелкие картинки которые не помещаются в блок идут в overflow:auto; и добавляется прокрутка. Но это уже вторично. Основная проблема в получении высоты блока при изменении основной картинки. |
| Часовой пояс GMT +3, время: 08:05. |