WT Masonry.js

Скрипт masonry, позволяющий выводить изображения в виде кирпичной кладки. Скрипт оформлен в Joomla 4+ Web Asset, что позволяет использовать его в любых расширениях Joomla 4 и Joomla 5. Это плагин для Joomla-разработчиков. Он не предоставляет готовый к использованию код.

Download type: Free
Категории: Плагины Joomla, Расширения для Joomla 4 и Joomla 5, Веб-ассеты
Версия: 4.2.3.1
Скачивания : 945
Просмотры : 672

Скачать Версии GitHub Документация

Описание

Подключение ассета в Joomla

<?php
$wa = Factory::getApplication()->getDocument()->getWebAssetManager(); 
$wa->useScript('wtmasonryjs.local'); // local file 
$wa->useScript('wtmasonryjs.remote'); // from CDN 
$wa->useScript('imagesloaded.local'); // imagesLoaded.js from local file 
$wa->useScript('imagesloaded.remote'); // imagesLoaded.js from CDN

После этого в <head> страницы Joomla будет включен локальный или из CDN скрипт masonry.

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

Пример кода

Пример из официальной документации скрипта

HTML

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

Все размеры элементов сетки masonry в Joomla задаются через Ваш CSS код

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

Инициализация скрипта с помощью jQuery

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Инициализация скрипта без jQuery

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});

Подключение imagesLoaded

Этот скрипт инициализирует masonry ещё раз после загрузки очередной картинки. Таким образом создаётся динамическое добавление изображений в кирпичную кладку.

Инициализация с jQuery

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Инициализация без jQuery

document.addEventListener('DOMContentLoaded',() => {
    const masonryGrid = document.getElementById('masonry-test');
    var msnry = new Masonry(masonryGrid, {
        itemSelector: '.grid-item',
        columnWidth: 200,
        percentPosition: true
    });

    imagesLoaded( masonryGrid ).on( 'progress', function() {
        // layout Masonry after each image loads
        msnry.layout();
    });
});

Joomla

Тип расширения:: Плагин
Каталог:: System
Версия Joomla:: 4.3.4, 5.0.0

Что нового

26.10.2023, 21:03

Исправления кода

Исправлено

Исправления ошибок в коде плагина

Joomla 5 ready

Добавлено

Успешно проверена работа плагина на Joomla 5