• My
  • Sofi
«Без логики»
Без логики
записная книжка
  • WEB записи
    • PHP 5 в подлиннике
  • Графика
  1. Домой
  2. WEB записи
  3. Joomla
  4. Решения для Компонентов
  5. ZOO & JBZoo
  6. Макет галереи под UIkit в элементе Zoo gallery

Макет галереи под UIkit в элементе Zoo gallery

Верстка элемента галереи Zoo под UIkit. Плюс Alt изображения от заголовка материала.

Скопировать элемент галереи из media/zoo/elements в своё приложение (или шаблон) Zoo.

* При желании можно добавить свой макет в папку tmpl и указать его в xml элемента, но это вряд ли нужно, мне достаточно переделать стандартный лайтбокс.

В элементе оставил только:

  • файл макета lightbox.php в tmpl - там будут изменения.
  • и gallery.php - в нём только удалил строки с подключением скриптов и стилей (они у меня подключены в шаблоне сайта).

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

Весь файл у меня такой:

<?php
/**
 * @package   com_zoo
 * @author    YOOtheme http://www.yootheme.com
 * @copyright Copyright (C) YOOtheme GmbH
 * @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
 */


// no direct access
defined('_JEXEC') or die('Restricted access');

$id = $this->identifier.'-'.uniqid();
$title = $this->get('title', '');
$itemname = $this->_item->name;

?>
<div class="full-gallery"">
<?php foreach ($thumbs as $image) : ?>
<?php

	$lightbox  = '';
	
	if ($title) {
		$titlealt = $title;
	}
	else $titlealt = $itemname;

	/* Prepare Lightbox */
	if ($params->get('lightbox_group')) {
		$lightbox = 'data-uk-lightbox="{group:\''.$id.'\'}"';
	}
	else {
		$lightbox = 'data-uk-lightbox';
	}

	if ($params->get('lightbox_caption')) {
		$lightbox .= ' title="'.$titlealt.'"';
	}

	/* Prepare Image */
	$content = '<img src="'.$image['thumb'].'" width="'.$image['thumb_width'].'" height="'.$image['thumb_height'].'" alt="'.$titlealt.'" />';

?>
<a class="thumb-gallery" href="/<?php echo $image['img']; ?>" <?php echo $lightbox; ?>><?php echo $content; ?></a>
<?php endforeach; ?>
</div>

Убрал spotlight и overlay, т.к. не нужны они в галерее, но можно было и подогнать...

© Без логики — записная книжка 2026
  • Домой
  • My
  • Sofi
  • WEB записи
    • PHP 5 в подлиннике
  • Графика