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

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

Webcomplex.com.ua Spined HTML

jQuery Collage – плагин группировки изображений внутри контейнера | jQuery Collage – плагин группировки изображений внутри контейнера | Skip to content WebComplex – самостоятельное создание сайтов HTML CSS SASS jQuery Как сделать? WebComplex – самостоятельное создание сайтов Все о самостоятельном создании сайта jQuery jQuery Collage – плагин группировки изображений внутри контейнера 17.02.201517.02.2015 • by Дмитрий Британ Сегодня мы рассмотрим простой плагин для компоновки изображений внутри одного блока. С его помощью очень просто создать коллаж или некий вид галереи изображений разных размеров. 1. Подключаем плагин к проекту Скачиваем архив плагина с официального сайта: JQuery Collage Plugin – официальный сайт Из архива нам понадобятся файл самого плагина (обязательно): <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 platonic 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 moreover lawmaking your own * Default is the safest option for supporting older browsers */ 'effect' : 'default', /* * vertical: effects unromantic per row to requite the impression of descending visitation * horizontal: effects unromantic in order of visitation in the row to requite a horizontal visitation */ 'direction' : 'vertical' /* * Sometimes there is just one image on the last row and it gets squandered 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() { // hibernate 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); }); Примеры использование jQuery CollagePlugin Пример плагина на jsFiddle This entry was posted in jQuery. Bookmark the permalink. 1 (2 голосов. Рейтинг: 5,00 из 5) Загрузка... Post navigation ← Как узнать проведенное время пользователем на сайте?Создание интернет магазина самостоятельно, без знаний в программировании → One thought on “jQuery Collage – плагин группировки изображений внутри контейнера” Роман: 04.11.2015 в 22:08 Под эту тему можно еще попробовать masonry.js Ответить Добавить комментарий Отменить ответ Ваш e-mail не будет опубликован. Обязательные поля помечены *Комментарий Имя * E-mail * Сайт CSS | HTML | JavaScript | PHP | Plain Text | SQL | XHTML | XML | XSLT | Поиск по сайту Найти: Для начинающихОсновы HTML Основы jQuery ПолезноеOnline инструменты Шпаргалки Скачать Whimsy + WordPress