Попробуй http://fancybox.net/ (http://fancybox.net/) на jquery
Подключать так
jQuery(document).ready(function($) {
$("a[rel=gallery]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (banner_+ currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
где индекс изображений Image ' + (banner_+ currentIndex + 1) на пример banner_11_pic.jpg ++ можно заменить на другие.
вызов в шаблоне следующий
<a rel="gallery" href="./img/banner_11_pic.jpg" title="FancyBox отличный лайтбокс для галереи"><img alt="" src="./img/banner_11_th_pic.jpg" /></a>
ну а с шаблоном ХSLT тебе помогут другие я пасс.
Чем смог))
Попытался сделать тупо. Первые 3 пункта из статьи http://umihelp.ru/1/ не вызвали затруднений.
А дальше пошли отличия XSLT от TPL. Я сделал так:
1. В месте, где надо вставить ссылку на фотогаллерею:
<!-- Баннер фотогалереи -->
<div class="lightbox_gallery">
<xsl:apply-templates match="document('udata://photoalbum/album/94')/udata" mode="gallery"/>
</div>
где 94 - id созданного фотоальбома.
Дальше по задумке следует пункт 2. - шаблоны для вывода лайтбоксов - вывод ссылочек типа <a href="$img_path" rel="lightbox[group]">...</a> для условия типа match="udata[@module = 'photoalbum'][@method = 'album']".
Но я столкнулся с дурацкой проблемой на шаге 1. Почему-то его код просто выводит в див содержимое текущего документа. Ввожу в адр.строку сайт/udata/photoalbum/album/94 - все правильно, выводит xml-сожержимое альбома. А здесь - не работает.
Может, глючит модуль Фотоальбом?
Я не очень внятно объяснил. Попробую подробней.
1. В основной таблице стилей (stylesheet) есть div, в котором выводится баннер фотоальбома. При нажатии на него должен всплывать лайтбокс.
В этом диве я задаю:
<!-- Баннер фотогалереи -->
<div class="lightbox_gallery">
<xsl:apply-templates match="document('udata://photoalbum/album/94')/udata" mode="gallery"/>
</div>
2. Шаблон выглядит так:
<xsl:template match="udata[@module = 'photoalbum'][@method = 'album']" mode="gallery">
Бла-бла-бла
</xsl:template>
По идее, должно вывестись "Бла-бла-бла". Но выводится xml-содержимое текущей страницы (без хмл-тегов конечно) типа:
КейвордсСтраницы контентаГлавнаяСтраницы контентаО насОсновные параметрыПоле H1О насКонтент<p>Собственно Контент</p>Дополнительные параметрыПоказывать подменю1
3. Ввожу в браузер http://сайт/udata/photoalbum/album/94 - выдает все как надо:
<udata module="photoalbum" method="album" generation-time="0.045104">
<id>94</id>
<items>
<item id="95" link="/album1/homyak1/" xlink:href="upage://95">Хомяк1</item>
<item id="96" link="/album1/homyak2/" xlink:href="upage://96">Хомяк2</item>
</items>
<total>2</total>
<per_page>10</per_page>
<link>/album1/</link>
</udata>
Сижу вот тупо втыкаю в монитор и не могу понять где ошибка в четырех строках кода... :-[
Кто-нибудь с таким сталкивался?
по правилам, по моему, всех lighbox ссылка, в которую обвернута картинка превью, должна иметь в href путь к картинке полноразмерной, а не к странице с картинкой
в данном случае <a href="{@link}" umi:element-id="{@id}" umi:field-name="photo">
@link это ссылка на страницу типа "фотография", а не сама картинка, путь к картинке можно получить таким путем
<xsl:template match="page" mode="photo_list">
<xsl:variable name="src" select="document(concat('upage://',@id,'.photo'))/udata//value" />
<div class="gray_block_gal"><div class="lightbox_gallery">
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">154</xsl:with-param>
<xsl:with-param name="height">110</xsl:with-param>
</xsl:call-template>
</a>
<div class="clear" />
</div></div>
</xsl:template>
код выше написан навскидку, могут быть неточности в синтаксисе, проверяйте
Здравствуйте, помогите пожалуйста разобраться в чем ошибка.
прочитала все в этой теме, постаралась сделать у себя.
У меня не фотоальбом, а 4 картинки превьюшки.
Стили и js в шапке прописала, в месте где выводятся картинки thumbnail получилось так:
<xsl:variable name="src" select="document(concat('upage://',@id,'.photo'))/udata//value" />
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">281</xsl:with-param>
</xsl:call-template>
</a>
Litebox запускается, но изображение не открывается. Такое ощущение что его там нет.
http://marna.ru/shop/aksessuary/platki_zhenskie/platok_zhenskiy_sc0945/
Когда ссылку цепляю и ко второй фотке - вообще все зависает.
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">dop_photo1</xsl:with-param>
<xsl:with-param name="width">95</xsl:with-param>
</xsl:call-template>
</a>
ищите ошибку в этой строчке
<xsl:variable name="src" select="document(concat('upage://',@id,'.photo'))/udata//value" />
что вам возвращает @id, есть ли поле photo у страницы с id = @id и оно ли вам надо
так как переменная $src явно возвращает "ничего"
исправила - теперь работает
<xsl:variable name="src" select="document(concat('upage://',page/@id,'.photo'))/udata//value" />
еще момент, мне нужно выводить 4 картинки, но когда я ставлю ссылки ко второй картинке, все зависает.
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">dop_photo1</xsl:with-param>
<xsl:with-param name="width">95</xsl:with-param>
</xsl:call-template>
</a>
Нашла у себя ошибку в коде - поэтому зависила страница.
сейчас код такой.
<xsl:variable name="src" select="document(concat('upage://',page/@id,'.photo'))/udata//value" />
<!-- ВЫВОД ОСНОВНОЙ КАРТИНКИ-->
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo" rel="lightbox[slide]"> <xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">empty-photo;</xsl:with-param>
<xsl:with-param name="width">281</xsl:with-param>
</xsl:call-template>
</a>
<!-- ВЫВОД ОСНОВНОЙ КАРТИНКИ -->
<!-- вторая картнка -->
<a href="{$src}" umi:element-id="{@id}" umi:field-name="dop_photo1" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">dop_photo1</xsl:with-param>
<xsl:with-param name="empty">empty-photo;</xsl:with-param>
<xsl:with-param name="width">95</xsl:with-param>
</xsl:call-template>
</a>
лайт бокс пролистывает картинки - но))) показывает одну и ту же - первую картинку,
подскажите пожалуйста в чем может быть ошибка?
http://marna.ru/shop/aksessuary/platki_zhenskie/sc0395/
в нужном месте делаем вывод группы с полями типа изображение
<xsl:apply-templates select=".//group[@name = 'parametry_gostinicy']" mode="lightbox" />
и пишем дополнительные шаблоны
шаблон для блока со всеми полями, там можно класс задать или еще что если надо
<xsl:template match="group" mode="lightbox">
<div umi:element-id="{../../@id}">
<xsl:apply-templates select="property" mode="lightbox" />
</div>
</xsl:template>
шаблон для всех полей сделаем его пустым, чтобы если в группе были поля не являющимися типом данных "изображение" они не выводились и уточняющий шаблон для поля типа изображение
<xsl:template match="property" mode="lightbox"/>
<xsl:template match="property[@type='img_file']" mode="lightbox">
<a href="{value}" umi:element-id="{$document-page-id}" umi:field-name="@name" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="$document-page-id" />
<xsl:with-param name="field-name"><xsl:value-of select="@name"></xsl:with-param>
<xsl:with-param name="empty">empty-photo;</xsl:with-param>
<xsl:with-param name="width">281</xsl:with-param>
</xsl:call-template>
</a>
</xsl:template>
следует лишь отметить что переменная $document-page-id у вас должна быть определена (если вы делаете сайт на основе demodizzy, то она у вас есть)
попробовала ваш вариан - похоже что то-то нужно поменять - так как выдает ошибки, пока не могу понять что нужно менять.
$document-page-id у меня используется на этой же сранице для вывода кнопки - "купить".
<form class="options" action="{$lang-prefix}/emarket/basket/put/element/{page/@id}/" onsubmit="frontEndBasket.add('{page/@id}', this); return false;">
<xsl:apply-templates select=".//group[@name = 'catalog_option_props']" mode="table_options" />
<div class="buy_button">
<input type="submit" class="button big" id="add_basket_{$document-page-id}">
<xsl:attribute name="value">
<xsl:text>&basket-add;</xsl:text>
<xsl:if test="$cart_items/item[page/@id = $document-page-id]">
<xsl:text> (</xsl:text>
<xsl:value-of select="sum($cart_items/item[page/@id = $document-page-id]/amount)" />
<xsl:text>)</xsl:text>
</xsl:if>
</xsl:attribute>
</input>
</div>
</form>
на чем написано я не знаю- так как переделываю стандартный шаблон, и еще не разобралась с xsl
самая первая строчка у меня,
<xsl:apply-templates select=".//group[@name = 'parametry_gostinicy']" mode="lightbox" />
там указывается имя группы полей, которые вы выводите, вы их поменяли на название вашей группы полей? У меня эта группа называлась parametry_gostinicy
тут без урока не обойтись) но это уже только в среду, завтра курсы веду. Попробуйте просто вместо src для второй, третьей картинки вы сделайте еще 4 переменных или сколько там у вас их должно быть, то есть во вторую ссылку не $src вставляйте а новую переменную
<xsl:variable name="src" select="document(concat('upage://',page/@id,'.dop_photo1'))/udata//value" />
и так далее для всех фоток
Да, вот так получилось:
<!-- ВЫВОД ОСНОВНОЙ КАРТИНКИ-->
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo" rel="lightbox[slide]"> <xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">empty-photo;</xsl:with-param>
<xsl:with-param name="width">281</xsl:with-param>
</xsl:call-template>
</a>
<!-- ВЫВОД ОСНОВНОЙ КАРТИНКИ -->
<!-- вторая картинка -->
<xsl:variable name="src1" select="document(concat('upage://',page/@id,'.photo'))/udata//value" />
<a href="{$src1}" umi:element-id="{@id}" umi:field-name="dop_photo1" rel="lightbox[slide]">
<xsl:call-template name="catalog-thumbnail_rks">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">dop_photo1</xsl:with-param>
<xsl:with-param name="empty">empty-photo;</xsl:with-param>
<xsl:with-param name="width">95</xsl:with-param>
</xsl:call-template> </a>
я в этой сточке не меняла название поля с картинкой!
<xsl:variable name="src1" select="document(concat('upage://',page/@id,'.photo'))/udata//value" />
Спасибо вам огромное за помощь!!
Всем добрый вечер, подскажите где скачать lightbox который бы работал на XSLT. В данный момент ссылка на картинку открывается так. А эффекта ноль, пример скрипта.
Шаблон album.xsl
<xsl:template match="item" mode="album_photo">
<xsl:variable name="src" select="document(concat('upage://',@id,'.photo'))/udata//value" />
<div class="lightbox_gallery">
<a href="{$src}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">144</xsl:with-param>
<xsl:with-param name="height">110</xsl:with-param>
</xsl:call-template>
</a></div>
</xsl:template>
Шаблон /layouts/default.xsl
<script type='text/javascript' src='/js/lightbox/jquery.lightbox.js'></script>
<link rel='stylesheet' type='text/css' href='/js/lightbox/css/jquery.lightbox.css' media='screen' />
Заработало, Сделано вот так!
В шаблоне /xsltTpls/layouts/default.xsl
[b]<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>[/b]
В шаблоне /xsltTpls/modules/photoalbum/album.xsl
<xsl:template match="udata[@module = 'photoalbum' and @method = 'album' and total]">
<div id="photoalbum"><div class="gray_block">[b]<div id="gallery">[/b]
<xsl:apply-templates select="document(concat('udata://photoalbum/album/',@id,'///'))/udata" mode="album_photo"/>
<div class="clear" />
</div></div></div>
<xsl:apply-templates select="total" />
</xsl:template>
….
<xsl:template match="item" mode="album_photo">
[b] <xsl:variable name="src" select="document(concat('upage://',@id,'.photo'))/udata//value" />
<div class="lightbox_gallery">
<a href="{$src}" rel="lightbox" umi:element-id="{@id}" umi:field-name="photo">[/b]
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">144</xsl:with-param>
<xsl:with-param name="height">110</xsl:with-param>
</xsl:call-template>
</a></div>
</xsl:template>