Почему JQuery библиотека для ресайза изображений не срабатывает на подгруженные Ajax блоки?

Question

[Хазрат Гаджикеримов]

Есть JavaScript библиотека для ресайза изображений - jQuery NailThumb, она хорошо работает.
Выглядит следующим образом:



Картинка встала под размер.

А вот подгруженные ajax'ом, на них библиотека не реагирует. Т.е индитификатор стоит, но библеотека не работает с ним.



Вопрос таков как можно решить проблему, с тем что библеотека запускается один раз при загрузке страницы, тогда как нужно что бы при каждом .appened('
Сам код:

<script>
jQuery(document).ready(function() {
                jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'}); //width:166,height:79,
            });
</script>

function addTovar (val){
    // добавляет товар
//    alert(val.image)
    var block = $('#tovar_block');
    block.append('' +
        '<li class="catalog-elements-ul-li parent">' +
        '   <div class="catalog-elements-ul-li-photo">' +
        '       <a href="#" class="nailthumb-container">' +
        '           <img src="/img/product/smal/'+val.art+'_0.jpg.jpg">' +
        '       </a>' +
        '       <div class="tovar-sravni">' +
        '           <input type="checkbox" name="check">' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-name">' +
        '       <a href="#" class="catalog-elements-ul-li-name-link">'+val.name+'</a>' +
        '       <span class="catalog-elements-ul-li-name-text">'+val.title+'</span>' +
        '       <div class="catalog-elements-ul-li-name-el">' +
        '           <a href=""><strong>Отзывы</strong> <span>4</span></a>' +
        '           <a href=""><strong>Описание</strong></a>' +
        '           <a href=""><strong>Фото</strong></a>' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-add">' +
        '       <span class="tovar-list-price">'+val.price+' <span>₷</span></span>' +
        '       <div class="tovar-star parent">' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '       </div>' +
        '       <span class="code-tovar">Код товара: '+val.art+'</span>' +
        '       <button id="catalog-add">В корзину<span></span></button>' +
        '   </div>' +
        '</li>');

}

Answer 1

[Юрий Лобанов]

простой способ сначала попробуйте

Спойлер

function addTovar (val){
    // добавляет товар
//    alert(val.image)
    var block = $('#tovar_block');
    block.append('' +
        '<li class="catalog-elements-ul-li parent">' +
        '   <div class="catalog-elements-ul-li-photo">' +
        '       <a href="#" class="nailthumb-container">' +
        '           <img src="/img/product/smal/'+val.art+'_0.jpg.jpg">' +
        '       </a>' +
        '       <div class="tovar-sravni">' +
        '           <input type="checkbox" name="check">' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-name">' +
        '       <a href="#" class="catalog-elements-ul-li-name-link">'+val.name+'</a>' +
        '       <span class="catalog-elements-ul-li-name-text">'+val.title+'</span>' +
        '       <div class="catalog-elements-ul-li-name-el">' +
        '           <a href=""><strong>Отзывы</strong> <span>4</span></a>' +
        '           <a href=""><strong>Описание</strong></a>' +
        '           <a href=""><strong>Фото</strong></a>' +
        '       </div>' +
        '   </div>' +
        '   <div class="catalog-elements-ul-li-add">' +
        '       <span class="tovar-list-price">'+val.price+' <span>₷</span></span>' +
        '       <div class="tovar-star parent">' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '           <span class="star-on"></span>' +
        '       </div>' +
        '       <span class="code-tovar">Код товара: '+val.art+'</span>' +
        '       <button id="catalog-add">В корзину<span></span></button>' +
        '   </div>' +
        '</li>');
        jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'});
}

Comments

[Хазрат Гаджикеримов]

@iiil Помогло! только одно беспокоит, не много ли раз будет вызван метод? так как организована подгрузка товаров

[Юрий Лобанов]

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

[Хазрат Гаджикеримов]

@iiil Ясно. благодарю.

Answer 2

[Юрий Лобанов]

jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({method:'resize',fitDirection:' center'}); //width:166,height:79,
});

Если все правильно понял, то помимо события ready, Вам нужно повесить функцию ресайза на событие appened.

Comments

[Хазрат Гаджикеримов]

@iiil Эм, как вас понять то, если appened, добавляет блок со всеми вытекающими как тот у которого все нормально resize происходит

[Юрий Лобанов]

У Вас функция запускается один раз, когда документы готов. Так? А после этого Вы меняете структуру документа, а функцию еще раз не запускаете.

[Хазрат Гаджикеримов]

@iiil Да, но вот как сделать так что бы при каждом изменение структуры работала библеотека ресайза и изменяла размер картинки. Я думаю причина всему (document).ready() так как запускает после загрузки всего документа и соотвественно один раз

[Kirill Popolov]

Поясню - у вас изначально есть коллекция (массив) картинок. Вы выполняете ресайз именно на этой коллекции. Когда вы добавляете новые изображения, вам во-первых, нужно собрать новую коллекцию (в идеале только из новых изображений) и вызвать метод . Сделать это можно как сказано выше, на событие append

[Юрий Лобанов]

@Hazrat а я Вам о чем говорю?! думает он, я и написал Вам, что запускаете функцию один раз (не библиотеку! Библиотеку Вы один раз загружаете и все!). Какие события у Вас на ajax? Вот там и надо по второму разу запускать функцию.
А что, не решить с помощью css никак?

[Хазрат Гаджикеримов]

@ezhikov Приложил код, можете подсказать как на событие вызвать метод?

[Хазрат Гаджикеримов]

@iiil Код в шапке, как реализовать вариант который те предлогаешь? append(....).nailthumb({method:'resize',fitDirection:' center'}); ?

[Kirill Popolov]

@Hazrat самым простым вариантом будет добавить вызов функции в коллбеке метода ajax (если используется реализация jQuery). То есть после вставки блока в dom вызывать нужный метод. А вообще, лучше давать пользователю уже подготовленные изображения.