jQuery Collage – плагин группировки изображений внутри контейнера

Сегодня мы рассмотрим простой плагин для компоновки изображений внутри одного блока. С его помощью очень просто создать коллаж или некий вид галереи изображений разных размеров.

1. Подключаем плагин к проекту

Скачиваем архив плагина с официального сайта:

[button-green url="//ed-lea.github.io/jquery-collagePlus/" target="_blank" position="center"]JQuery Collage Plugin - официальный сайт[/button-green]

Из архива нам понадобятся файл самого плагина (обязательно):

<script src="jquery.collagePlus.min.js"></script>

А также файл CSS эффектов появления и скрипты, если вы планируете их использовать:

<link rel="stylesheet" type="text/css" href="transitions.css" media="all" />
<script src="jquery.removeWhitespace.min.js"></script>
<script src="jquery.collageCaption.min.js"></script>

Подключив плагин к проекту, необходимо его активировать.

2. Активируем плагин

Пример HTML структуры нашей галереи:

// example HTML image gallery
    <div class="Collage">
        <img src="example1.jpg" />
        <img src="example2.jpg" />
        <img src="example3.jpg" />
    </&divgt;

Подключаем сам плагин к нашему контейнеру с картинками:

$(window).load(function () {
        $('.Collage').collagePlus();
    });

Настройки плагина

Настройки плагина, просты:

 $('.Collage').collagePlus(
        {
            /*
             * The ideal height you want your row to be. It won't set it exactly to this as
             * plugin adjusts the row height to get the correct width
             */
            'targetHeight'    : 400,

            /*
             * how quickly you want images to fade in once ready can be in ms, "slow" or "fast"
             * This is only used in the default fade in effect. Timing of the other effects is
             * controlled in CSS
             */
            'fadeSpeed'       : "fast",

            /*
             * which effect you want to use for revealing the images (note CSS3 browsers only),
             * Options are effect-1 to effect-6 but you can also code your own
             * Default is the safest option for supporting older browsers
             */
            'effect'          : 'default',

            /*
             * vertical: effects applied per row to give the impression of descending appearance
             * horizontal: effects applied in order of appearance in the row to give a horizontal appearance
             */
            'direction'       : 'vertical'

            /*
            * Sometimes there is just one image on the last row and it gets blown up to a huge size to fit the
            * parent div width. To stop this behaviour, set this to true
            */
            'allowPartialLastRow'       : false
        }
    );

 

Обновление размеров галереи при изменении окна браузера

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

function collage() {
    $('.Collage').collagePlus(
        {
            'fadeSpeed' : 2000
        }
    );
};

var resizeTimer = null;
$(window).bind('resize', function() {
    // hide all the images until we resize them
    // set the element you are scaling i.e. the first child nodes of ```.Collage``` to opacity 0
    $('.Collage .Image_Wrapper').css("opacity", 0);
    // set a timer to re-apply the plugin
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(collage, 200);
});

[button-green url="//ed-lea.github.io/jquery-collagePlus/example.html" target="_blank" position="center"]Примеры использование jQuery CollagePlugin [/button-green]

[button-blue url="//jsfiddle.net/edlea/uZv3n/" target="_blank" position="center"]Пример плагина на jsFiddle[/button-blue]

Рубрика: jQuery