Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2018, 12:51
Новичок на форуме
Отправить личное сообщение для dropoff Посмотреть профиль Найти все сообщения от dropoff
 
Регистрация: 22.11.2012
Сообщений: 8

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 обновляется не сразу.

Буду благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2018, 13:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,145

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");
}
Ответить с цитированием
  #3 (permalink)  
Старый 25.12.2018, 14:22
Новичок на форуме
Отправить личное сообщение для dropoff Посмотреть профиль Найти все сообщения от dropoff
 
Регистрация: 22.11.2012
Сообщений: 8

Это ничего не меняет.
Ресайз окна можно не учитывать, просто оставил его в коде.

Проблема после клика на info-images-thumbnails > a
Там уже image_height получает новую высоту блока только со второго раза.
Ответить с цитированием
  #4 (permalink)  
Старый 25.12.2018, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,145

dropoff,
код не логичен, кликнули thumbnails, загрузили картинку, картинка установила нужные размеры, как - то так.
без макета сложно.
Ответить с цитированием
  #5 (permalink)  
Старый 25.12.2018, 21:56
Новичок на форуме
Отправить личное сообщение для dropoff Посмотреть профиль Найти все сообщения от dropoff
 
Регистрация: 22.11.2012
Сообщений: 8

Вот я набросал https://jsfiddle.net/dropoff/u9zo78sL/2/

Если пощелкать на картинки слева мелкие по несколько раз, то будет видно, что высота не всегда определяется сразу. Она скачет.
Высоту видно над мелкими картинками.

Последний раз редактировалось dropoff, 25.12.2018 в 21:59.
Ответить с цитированием
  #6 (permalink)  
Старый 25.12.2018, 23:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,218

Сообщение от dropoff
высота не всегда определяется сразу
Нужно получать высоту изображения после его загрузки (onload).
Ответить с цитированием
  #7 (permalink)  
Старый 26.12.2018, 00:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,145

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>

Последний раз редактировалось рони, 26.12.2018 в 01:27.
Ответить с цитированием
  #8 (permalink)  
Старый 26.12.2018, 10:58
Новичок на форуме
Отправить личное сообщение для dropoff Посмотреть профиль Найти все сообщения от dropoff
 
Регистрация: 22.11.2012
Сообщений: 8

Сообщение от laimas Посмотреть сообщение
Нужно получать высоту изображения после его загрузки (onload).
изображение может быть больше блока. там нет четких размеров. нужна высота именно блока.

Сообщение от рони Посмотреть сообщение
...
Спасибо, но, если добавить больше мелких картинок туда, то блок тянется не за высотой основной картинкой, а уже за высотой блока мелких, тут видно https://jsfiddle.net/dropoff/5ftpw41g/1/

Пробовал вчера играться с этим всем, но так ничего путного и не вышло.
Ответить с цитированием
  #9 (permalink)  
Старый 26.12.2018, 11:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,145

Сообщение от dropoff
блок тянется не за высотой основной картинкой, а уже за высотой блока мелких,
так вы определитесь, что вам нужно,в случае если колонка мелких картинок, больше, чем большая картинка, по высоте.
Сообщение от dropoff
изображение может быть больше блока. там нет четких размеров. нужна высота именно блока.
кроме onload других нормальных вариантов нет!!!
Сообщение от рони
загрузили картинку, картинка установила нужные размеры
Ответить с цитированием
  #10 (permalink)  
Старый 26.12.2018, 11:19
Новичок на форуме
Отправить личное сообщение для dropoff Посмотреть профиль Найти все сообщения от dropoff
 
Регистрация: 22.11.2012
Сообщений: 8

Сообщение от рони Посмотреть сообщение
так вы определитесь, что вам нужно,в случае если колонка мелких картинок, больше, чем большая картинка, по высоте
Это я ответил на ваше решение, что будет большая высота блока, если картинок там много. Вы же тестировали на 4 картинках.

Я писал, что мне нужно, чтобы блок с мелкими картинками всегда имел высоту блока с основной.
мелкие картинки которые не помещаются в блок идут в overflow:auto; и добавляется прокрутка. Но это уже вторично. Основная проблема в получении высоты блока при изменении основной картинки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как прикрутить jquery галерею к angular? Проблема в href. ng-href не решает.? MOTORIST Angular.js 0 19.01.2015 15:23
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Ошибка в jQuery 1.5.1. Не понимаю в чем проблема? viatcheslav AJAX и COMET 0 16.05.2011 11:38
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 22:59
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM jQuery 0 15.09.2010 02:17