Uikit2 ! Макет слайдшоу в элементе Zoo gallery
UIkit слайдер вместо стандартного от zoo.
Ресайзятся изображения слайда и миниатюр.
* Все стили и скрипты слайдера, подключены в шаблоне сайта, тут про них ни слова.
1. Скопировать элемент ../media/zoo/elements/gallery в папку приложения ZOO, например сюда: ../media/zoo/applications/jbuniversal/elements/
2. В файле: gallery.xml, создать новый параметр с выбором будущего щаблона, например так:
<param name="mode" type="list" default="lightbox" label="Mode" description="The gallery mode"> <option value="lightbox">Lightbox</option> <option value="slideshow">Slideshow</option> <option value="slideshow_ui">Slideshow-UI</option> </param>
3. Создать одноименный шаблон в папке tmpl.
4. В файле gallery.php, создать новую переменную для полных, "ресайзнутых" изображений слайдов (у меня - $all), так:
foreach ($this->getFiles() as $filename) { $file = $path.$filename; $thumb = $this->app->zoo->resizeImage($file, $width, $height); $all = $this->app->zoo->resizeImage($file, $slideshow_width, $slideshow_height);
//...
* Параметры ширины и высоты взяты из параметров элемента. Раньше они задавали размеры "обёрточного" блока слайдера.
4.1. Тут же в массиве $thumbs[] = array, добавить all, по аналогии с тумбочками.
$thumbs[] = array( 'name' => $name, 'title' => $title, 'filename' => $filename, 'img' => JURI::root().$this->app->path->relative($file), 'img_file' => $file, 'thumb' => JURI::root().$this->app->path->relative($thumb), 'all' => JURI::root().$this->app->path->relative($all), 'thumb_width' => $thumb_width, 'thumb_height' => $thumb_height );
5. Шаблоне slideshow_ui.php, для изображений слайдера использовать по аналогии с тумбочками, созданные All.
В итоге должно получиться что-то типа:
<div class="class" data-uk-slideshow="{animation: 'slide-right'}"> <ul class="uk-slideshow"> <?php foreach ($thumbs as $image) : ?> <li> <img src="/<?php echo $image['all']; ?>" alt="<?php echo $titlealt; ?>"/> </li> <?php endforeach; ?> </ul>
</div>
Из параметров элемента берутся только размеры слайдера - теперь это размер каждого полного слайда.