[Aksuk]

Добрый день!

Я - верстальщик с юми работаю в первый раз (и вообще сайты делаю не часто), посему прошу прощения, если спрашиваю глупости. Есть два вопроса по организации фотоальбома. Типовая структура со страницей миниатюр, просмотром галереи и полноразмерными фото - не подходит, слишком громоздко. В идеале все должно умещаться на одной странице - так, как во вложении. Вывести миниатюры в три колонки не сложно, как приделать к ним скругленные углы - тоже разобрался почти. Но как сделать вывод просмотровой картинки на той же полосе? Инклюд? Аякс? Может быть есть какой-то готовый макрос юми, который я пропустил? Или сторонний модуль с "каруселью", которую можно преобразовать в такой трехколонник...

Очень прошу советов. Заранее спасибо!

Вот еще подумал - Сейчас пытаюсь организовать сайт (это - портфолио/визитка дизайн-студии) следующим образом: несколько новостных лент, каждой "новости" (на самом деле - полиграфическое изделие) соответствует галерея, которая выводится макросом %photoalbum album()% прямо в тело новости. Может быть стоит просто наделать галерей и прямо в них выводить как миниатюры, так и просмотровые картинки? Но все равно не понятно - как.

[admin]

используя макросы photoalbom вы можете вывести список фотографий этого альбома (с этим вы видимо уже разобрались).

Далее вы можете пойти такими путями:

1. использовать какуюнибудь js карусель которая сама из списка картинок (которые вы выведете необходимым образом) сделает список превью с возможностью просмотреть большой вариант, например jquery карусель galleria, хотя это может быть лубая js карусель

2. можете сами сделать вывод списка фотографий 2 раза на одной страницы, один с большими фотками и скрыть все кроме одной, вторая список превью (то есть просто размер меньше) и написав js обработкич переключать видимость большой фото в зависимости от клика по превью.

можно это делать используя ajax подгрузку большой фотографии при клике по превью, но это уже вопросы js плана, от umi вы в любом случае получаете только список фото из фотоальбома

[Aksuk]

Спасибо за разъяснения!

Пока мне более понятен путь 2, за исключением пункта:

написав js обработкич переключать видимость большой фото в зависимости от клика по превью.

Я, к сожалению, не владею совершенно JS, максимум - подключал лайтбокс на простом хтмл-ном сайте. Насколько это сложная обработка? И можно ли ее будет спрятать в шаблоне, чтобы админ, добавляющий новости максимум - вставлял 2 строчки кода с выводом галереи.

Если нет, то наверное буду смотреть в сторону galleria. А есть ли примеры использования таких каруселей на юми?

[admin]

пример самописной галереи со своим js
http://wedcake.ru/svadebnye_kollekcii/amsale/fall_2011_collectiontest1/
http://gooddizain.ru/already-done/corporate-identity/

а насчет сторонних каруселек и галерей, все очень просто..., заходите на страницу js карусели (например [urlhttp://galleria.aino.se/docs/1.2/getting_started/quick_start/]страница описывающая старт с galleria[/url] ) читаете что там необходимо (обычно это просто список картинок оформленный в определенные теги и подключенный css и js плюс js иструкция применить карусель к определенному элементу, который и содержит список картинок) и все, все остальное делает сама js карусель

[Aksuk]

Поставил Galleria, действительно все не сложно. Поначалу, так как потом начались проблемы с генерацией превьюх. Скрипт галереи выдает ошибку "Cannot scale image", если убрать через стили контейнер с ошибками - большие картинки листаются нормально, но миниатюр нет. Либо дело в самом скрипте (разработчики крайне рекомендуют выводить отдельный список для превью), либо в том, что у меня Денвер на локале подтормаживает, как это с ним бывает. Если же дело не в локале, а в самой программе галереи - получается все не просто. Вывести отдельный список по другому шаблону (используя preview_image.tpl) в том же документе - не проблема, но как автоматом сгенерить массив для установления зависимостей превью-просмотр-оригинальный размер? Помню, что для друпала был модуль, значит это возможно.

Пока еще не изучил целиком документацию, но если вы сможете меня направить в нужном направлении - буду благодарен.

[Aksuk]

Да, забыл сказать - ошибка появляется не всегда, где-то на 8 обновлении превьюхи благополучно генерятся

[admin]

скорее всего либо фото очень большие, либо скрипт впополам с denwer глючит, поэтому обычно использую самописные варианты, а взаимосвязь сделать легко

у маленькой картинки выводишь по такому образцу

Код: [Выделить]

<a href="#" class="small_pic" index="%id%"><img src="pic.jpg" ></a>
...

большие по такому

Код: [Выделить]

<a href="#" class="big_pic" id="b%id%" style="display:none;"><img src="big_pic.jpg" ></a> 
...

и пишешь такой js внутри тега head или в стороннем файле который подключаешь в html коде (только обязательно после загрузки jquery библиотеке, так как я её использую в приведенном ниже коде)

Код: [Выделить]

jQuery(document).ready(function() {
	jQuery('.big_pic:first').show(); // показываем первую большую фотографию
	
        //назначаем обработчик всем ссылкам с классом small
	jQuery('.small_pic').click(function(){
		var id=jQuery(this).attr('index'); //берем id из атрибута ссылки index
		jQuery('.big_pic').hide(); //прячем все большие фото
		jQuery('#b'+id).show(); //показываем только ту что связанна смалой фотографией через id
		return false;
	});
});

[Aksuk]

Ох, спасибо!
Насколько понял - это вообще решит проблему. Все-таки надо выучить хотя бы начала JS ))

Вот еще вопрос  - нет ли в юми макроса, который добавлял бы счетчик объектам при выводе? Например: <a href="#"><div id="сustom_%макрос счетчика%"><img></div></a>?

В списке миниатюр у меня будет не только сама картинка, но еще и контейнер с изображением левого уголка. Гораздо проще ими управлять - отключать и включать, если у них уникальный ID. Иначе приходится громоздить какие-то жуткие правила в css.

[admin]

а чем id самой фотографии не подходит? ты же его из фотоальбомов берешь, значит каждая фотка это страница с уникальным id, его(%id%) я и использовал в примерах выше

[Aksuk]

То есть назвать картинки 01.jpg, 02.jpg ... Потом вывожу так: <a href="#" class="big_pic" id="b%id%" style="display:none;"><img src="01.jpg" ></a><div id="bkgr_%id%"><img src="bkgr.png"></div> - так?
Но галерей множество. И для системы у них все равно будут разные id - разве нет?

[admin]

твои фото лежат в галерее, значит ты выводишь их макросом  %photoalbum album()%
вначале, список фотографий по шаблону для больших фото, потом по еще раз выводишь этот же альбом по шаблону для маленьких фото.

в шаблоне для больших фоток используешь в блоке  album_block_line

Код: [Выделить]

<a href="#" class="big_pic" id="b%id%" style="display:none;">%data getProperty(%id%, photo, img_big)%</a> 

а в шаблоне для маленьких фото в блоке album_block_line

Код: [Выделить]

<a href="#" class="small_pic" index="%id%">%data getProperty(%id%, photo, img_small))%</a> 

плюс img_big и img_small, это шаблоны для вывода содержимого поля с фотографией нужного размера, лежат тут
/tpls/data/ .
содержимое:
/tpls/data/img_big.tpl

Код: [Выделить]

<?php
$FORMS = Array();
$FORMS['img_file'] = <<<END
%system makeThumbnail('%filepath%', '400', 'auto', 'view')%
END;
?>

/tpls/data/img_small.tpl

Код: [Выделить]

<?php
$FORMS = Array();
$FORMS['img_file'] = <<<END
%system makeThumbnail('%filepath%', '70', 'auto', 'view')%
END;
?>

[Aksuk]

Спасибо, добрый человек!

Все получилось в лучшем виде. А для именования контейнеров с "уголками", как оказалось, есть макрос %list-position% ! Буду теперь матчасть учить.