Проблема с высотой контейнера JQuery Isotope с iDangero.us Swiper

РЕДАКТИРОВАТЬ: скрипт запускается и работает правильно, когда размер окна изменяется. Большое спасибо Сър Георги Демирев!

Я долго размышлял над проблемой и никак не мог с ней справиться. На сайте портфолио фотографий я использую iDangero.us Swiper для слайд-шоу и JQuery Isotope для галереи миниатюр.

Теперь он отлично работает в Firefox и Chrome как в Linux, так и в Windows 7.

Однако в IE, Safari и Opera элементы сетки отображаются в виде вертикальной линии, а не сетки.

Чтобы найти ошибку, я удалил код со всего, пока не обнаружил, что Isotope прекращает это поведение, когда я удаляю часть кода Swiper.

Родительские элементы div имеют высоту 0 пикселей. Изменение их на фиксированную высоту (например, 1000 пикселей или 100%) ничего не меняет.

РЕДАКТИРОВАТЬ: Вот реализация предложения Сър Георги Демирева:

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

Я очень благодарен за любое предложение, я совершенно ничего не знаю об этом...

введите здесь описание изображения


javascript html jquery swiper
person Anthronaut    schedule 21.03.2014    source источник
comment
Я не могу воспроизвести вашу проблему в IE (8-11) на win7   -  person A. Wolff    schedule 21.03.2014

Ответы (1)


arrow_upward
2
arrow_downward

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

Оберните этот код

imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

in (document).ready работает следующим образом:

$(document).ready(function () {

    imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

});
person Georgi Demirev    schedule 21.03.2014
comment
Привет, большое спасибо за ваши комментарии. Очень хорошее наблюдение, скрипт действительно срабатывает при изменении размера окна - я забыл упомянуть об этом. Я завернул код в вызов $(document).ready, как вы предложили, и ошибка исчезла. Однако теперь появилась новая ошибка: элементы отображаются в горизонтальном ряду, как и должны, но без полей между ними. Поле появляется снова при изменении размера окна. Очень странно... - person Anthronaut; 21.03.2014
comment
PS: Вот версия с реализованным вашим предложением: anthron.octans.uberspace.de/ мета.debug.2.php - person Anthronaut; 21.03.2014
comment
По какой-то причине я не могу воспроизвести вашу страницу локально, если бы была доступна демонстрация jsfiddle, я мог бы помочь вам лучше. Я не знаком с плагином swiper, однако мне все еще кажется, что части вашего скрипта не выполняются, когда документ готов (так же, как и раньше, если вы изменяете размер окна, скрипт запускается). - person Georgi Demirev; 21.03.2014
comment
Привет, спасибо, что вернулся! Я обнаружил, что вторая проблема была вызвана следующим: я присвоил значение margin тегу isotope-item. Этот тег автоматически создается изотопным скриптом и верен для всех элементов, которые обрабатывает скрипт. Тем не менее, по-видимому, в некоторых браузерах это происходит слишком поздно, поэтому отступ не назначается достаточно рано. Это было, конечно, ленивое решение и в целом плохая идея. Я решил это, присвоив значение, встроенное в конкретный объект, теперь он работает нормально. Спасибо еще раз за помощь! - person Anthronaut; 24.03.2014