EVO: [Решено] Галерея на jQuery в связке с MultiPhotos

18 Posts

VopisUVD Reply #1, 15 years, 11 months ago

UPD: 23.11.10
Задача:
Получить в ресурсе свою персональную галерею картинок с помощью jQuery слайдера, картинки добавляются с помощью MultiPhotos при создании\редактирования ресурса.

Реализация:
Добавляем в modx плагин и сниппет как описано в статье по MultiPhotos. С вопросами сюда.

Выбираем нужный тип галереи я с комплектовал файлы в папку и поместил в assets/templates/NAME/
то есть получилось так:

assets/templates/NAME/
                     gallery/css/
                     gallery/images/
                     gallery/js/

Поправил пути в css, за одно поправить под дизайн... Доработать rowTpl и outerTpl в сниппете MultiPhotos

Создаем чанк "galeryHead", добавляем его в head, помещаем в него следующую конструкцию:

<!-- NAME - замените на ваше название -->
<link type="text/css" href="[(site_url)]assets/templates/NAME/gallery/css/gallery.css" rel="stylesheet" />
	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js'></script>
	<script type="text/javascript" src="[(site_url)]assets/templates/NAME/gallery/js/jquery.pikachoose.js"></script>
	<script type="text/javascript" src="[(site_url)]assets/templates/NAME/gallery/js/jquery.jcarousel.min.js"></script>
		<script language="javascript">
			<!--
			$(document).ready(
				function (){
					$("#pikame").PikaChoose();

					$("#pikame").jcarousel({scroll:4,					
						initCallback: function(carousel) 
						{
					        $(carousel.list).find('img').click(function() {
					        	//console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
					            carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
					        });
					    }
				    });
				});
			-->
		</script>

Создаем чанк "tpl_gallery_nav", помещаем в него следующую конструкцию:

<li><a href="[+link+]" id="thumb_[+num+]"><img src="[+url+]" alt="[+title+]" title="" /></a><span>[+title+]</span></li>

Создаем чанк "GALLERY", помещаем в него следующую конструкцию:

<div class="pikachoose">
	<ul id="pikame" class="jcarousel-skin-pika">
                [[MultiPhoto? &rowTpl=`tpl_gallery_nav`]]
	</ul>
</div>

Решение работает, но имеет проблемы с Shopkeeper!

Текущее положение:
Работает

]Задача:
Получить в ресурсе свою галерею картинок с помощью какого либо слайдера, картинки добавляются с помощью TV параметров типа image при создании\редактирования ресурса.

К шаблону ресурса привязаны TV параметры image1, image2, image3 ... image10.
Для превьюшек здорово использовать уменьшение сервером для больших чтоб можно было на весь экран развернуть.
Имеется в виду например что превьюшка 100х100, основная картинка 400х400, а при клике по основной, открывается в размер экрана или максимальный размер загруженной картинки.

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

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

☆ A M B ☆
276 Posts

dmi3y Reply #2, 15 years, 11 months ago

посмотри вот сюда:

[Plugin] MultiPhotos - прикрепляем к странице несколько фотографий
http://community.modx-cms.ru/blog/addons/1146.html

Бывает так, что нужно прикрепить некоторое неизвестное количество картинок к странице, а связываться со всякими галереями не хочется. Для этой цели я написал плагин на mootools под Evo, выглядит это так:

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

Как его устанавливать:
1. Добавляем TV тип textarea с именем, например, «photos»
2. Добавляем плагин MultiPhotos, копируем из файла конфигурацию, в конфигурации прописываем TV Id. При желании можно указать id шаблона и другие параметры. Событие — OnDocFormRender.
(Можно подключать плагин через require_once, для этого нужно раскомментировать там три строчки)

Для вывода картинок прилагается соответствующий сниппет с параметрами: &tvname — имя tv, &outerTpl и &rowTpl — чанки для вывода, также есть: &fid — вывести картинку под этим номером, &random -вывести случайную картинку.

Блоки с сохранёнными картинками можно перетаскивать мышью, меняя их порядок.

файлы версии 1.0
английский перевод с описанием

UPD. 4.11.10
В новой версии добавил автоуменьшение фото по типу TVimageResizer. Нужно отметить событие OnBeforeDocFormSave. Прозрачные png тоже можно уменьшать, а не как обычно

Параметры:
Resize: enable — включить автоуменьшение (true)
Resize: cropping — если включено, картинка подгоняется точно под размеры по меньшей стороне, лишнее отрезается. Если нет — картинка уменьшается по большей стороне.
Resize: prefix — префикс для нового имени фото
Resize: width и Resize: height — размеры для ресайза
Resize: auto big img — если включено, и поле для большой картинки не заполнено, то имя перед ресайзом будет скопировано туда
Resize: auto small img — маленькая картинка будет создана из большой
Ну и старые параметры остались (необязательные):
Preview: width и Preview: height — размеры превью в админке
PHPThumb URL — путь к PHPThumb, если нужно сжимать превью в админке (для ресайза не используется)

- неограниченно кол во фоток
+ все в 1 TV
+ прикрутить к галерее дело 1 минуты:)

http://modx.im - Russian community
http://extras.evolution-cms.com - Repository for Evolution

18 Posts

VopisUVD Reply #3, 15 years, 11 months ago

Quote from: dmi3y at Nov 09, 2010, 02:31 AM

посмотри вот сюда:

[Plugin] MultiPhotos - прикрепляем к странице несколько фотографий
http://community.modx-cms.ru/blog/addons/1146.html

Спасибо уже так же нашел это решение

буду пробовать...

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

18 Posts

VopisUVD Reply #4, 15 years, 11 months ago

Не получилось!!! huh

какая то хрень... на чистой установке все получилось а вот на рабочем проекте ни в какую... остается поле textrea не заполненным... то есть в ресурсе поле textrea появляется а в нем плагин нет
Стоит Стоит последний EVO + Shopkeeper и Phx все по умолчанию, в самом modx ничего не правилось...
Куда копать?

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

630 Posts

esche Reply #5, 15 years, 11 months ago

Install "пройден"? Точно? Точно-точно?
(TV id, "id шаблона и другие параметры", OnDocFormRender, Код в плагине,)

Если все установочные действия произведены корректно, смотреть ошибки JavaScript (в ie желтый треугольник слева внизу, в Mozilla - смотрю плагином WebDeveloper), возможно скрипты конфликтуют...

Удачи!

Правильно заданный вопрос повышает вероятность получения нужного ответа.
Что-то не работает? Загляните в лог ошибок!
Есть проблема? "Локализуйте" её!
Ответы на большинство вопросов по MODx | MODx RTFM | API Evo Revo | галопом по ~~Европам~~ Азиям

wikibooks(ru) Ditto(en) | Wayfinder e-book | Заметки и о MODx

18 Posts

VopisUVD Reply #6, 15 years, 11 months ago

Quote from: esche at Nov 11, 2010, 10:37 AM

Install "пройден"? Точно? Точно-точно?
(TV id, "id шаблона и другие параметры", OnDocFormRender, Код в плагине,)

Если все установочные действия произведены корректно, смотреть ошибки JavaScript (в ie желтый треугольник слева внизу, в Mozilla - смотрю плагином WebDeveloper), возможно скрипты конфликтуют...

Удачи!

Да все аналогично делал как на нулевую установку по умолчанию... по мануалу.
В некоторых шаблонах параметр price пропал совсем или заменился плагином галереи похоже что конфликтует с шопкипером...
попробую WebDeveloper отследить...

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

18 Posts

VopisUVD Reply #7, 15 years, 11 months ago

Подтвердилось конфликтует с Шопкипером кто ставил эти ээм плагины вместе что поправить нужно?

UPD: Сам балбес, конфликтует потому что не о том думал... когда настройки смотрел...
Нужно прописывать конкретно id параметра, а не его имя и тем более grin

его порядковый номер расположения rolleyes

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

18 Posts

VopisUVD Reply #8, 15 years, 11 months ago

Ну на итого получилось выводить фотки по порядку в столбик undecided

а добавлять в одном ТВ параметре grin

Понимаю что может фигню спрашиваю но тем не менее...
Как теперь это фпехнуть в jquery галерею? Нужен хотя бы порядок действий...

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно

1,103 Posts

antey Reply #9, 15 years, 11 months ago

Quote from: VopisUVD at Nov 17, 2010, 06:47 AM

Ну на итого получилось выводить фотки по порядку в столбик а добавлять в одном ТВ параметре
Понимаю что может фигню спрашиваю но тем не менее...
Как теперь это фпехнуть в jquery галерею? Нужен хотя бы порядок действий...

Ищите любую jquery галерею, смотрите ее код и формируйте подобное с помощью дитто

18 Posts

VopisUVD Reply #10, 15 years, 11 months ago

Quote from: antey at Nov 17, 2010, 08:19 AM

Ищите любую jquery галерею, смотрите ее код и формируйте подобное с помощью дитто

да галерея то есть уже выбрана http://pikachoose.com/demo/ а вот как формировать код дитто??? Точнее с дитто я разобрался... как их связать???

Сис. админу иногда приходится стать web мастером...
Не судите строго, не пинайте сильно