Масонство / Динамические Проблемы Высоты Слайд-шоу - PullRequest
Новая
       19

Масонство / Динамические Проблемы Высоты Слайд-шоу

4 голосов
/ 19 марта 2012

Я немного запутался в следующих шагах по проекту, над которым я работаю, и, надеюсь, вы могли бы дать мне некоторые идеи / помощь.

http://goo.gl/4d72h

IЯ использую Wordpress и комбинацию Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) и Masonry (http://masonry.desandro.com/index.html)) для создания целевой страницы этого проекта.

Как вы можете видеть, посещая сайт, каждый «пост»обернут в float grid_6, позволяя два плавающих в строке, а затем я использую кладку, чтобы собрать все вместе, как это делается. Я обернул код каменной кладки в функцию (window) .load, чтобы дождаться, пока все показанные изображения будут иметьзагружается, а затем запускает кладку. Довольно просто. 

    <script>
    $(window).load(function(){
    var $container = $('.masonry-cont-area');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.single-fg-post'
      });
    });
});
    </script>

Однако кладка учитывает только первое изображение объекта для его позиционирования и т. д. Если щелкнуть изображения или точки, это 'Перейдем к следующему изображению, которое может быть длиннее или короче по высоте, что вызывает несколько проблем. Поскольку кладка уже состоялась, она перекрывается со следующимost и т. д. Вы можете понять, что я имею в виду, когда нажимаете на изображения по ссылке, приведенной выше.

Итак, что я после сегодняшнего дня, есть какие-нибудь идеи о том, как это можно исправить?Может ли кладка взять высоту с самого высокого изображения в слайд-шоу?Может ли он динамически меняться при нажатии на изображения?Могу ли я убедиться, что поле снизу ВСЕГДА дано для элементов с абсолютным позиционированием?

Любые идеи будут по достоинству оценены.

Спасибо всем, Ричард

Ответы [ 2 ]

4 голосов
/ 25 марта 2012

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

Измените код, в котором вы инициализируете плагин для кладки, на 

$(window).load(function(){
    var $container = $('.masonry-cont-area');

    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.single-fg-post',
            isAnimated: true // added this line to make the resizing of the masonry animated and not instant..
        });

        // whenever we click on a bullet element
        $('.pager').on('click','.bullet', function(){
            // we use timeout to delay the redrawing of masonry
            // because the slideshow takes sometime to fade out the current slide
            // and slide in the new one..
            // We have to wait until the slideshow has completed its transition before
            // redrawing masonry, so that the masonry plugin can use the new slide's dimensions..
            setTimeout(function(){
                // we make masonry recalculate the element based on their current state.
                $container.masonry();
            }, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw..
        });
    });
});

Смотрите его вживую на http://jsfiddle.net/XjVWN/embedded/result/

0 голосов
/ 25 марта 2012

Одна вещь, которую вы могли бы сделать, это позвонить .masonry('reload') при изменении изображения.

...