Проблема с lightbox модулем - фитчя для фоток

fighter · 19 Авг 2008

Подскажите как можно перенести, из темпелейта head.tpl общего для всех страниц, после тага </head> скрипты, которые показывались бы только на страницах продукта и нигде больше? :nezn:

Для просмотра ссылки Войди или Зарегистрируйся

Eihwaz · 20 Авг 2008

Я прикручивал галлерею для товаров на AJAX (Smoothgallery 2.0), с вынесением настроек галлереи в админку. Если кому надо - пишите на мыло - некуда выложить.
(y.eihwaz@gmail.com)

art0 · 22 Авг 2008

Код:

{if $main_content_template == "product_detailed.tpl.html"}
<script type="text/javascript" src="lightbox/lightbox.js"></script>
{else}{/if}

VandJ · 2 Сен 2008

Я делал немного проще:
простов product_detailed.tpl.html прописывал
<script type="text/javascript" src="lightbox/lightbox.js"></script>

Такое решение чем-то хуже?

art0 · 3 Сен 2008

VandJ написал(а):
Такое решение чем-то хуже?

JavaScript всегда нужно помещать в <head>(валидация), сценарий выполнялся в первую очередь и тем самым снижается количество ошибок.

fighter · 3 Сен 2008

лучше уж так в head.tpl.html

PHP:

{php}
if($_GET["productID"]) {echo '
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script> ';
}
{/php}
</head>

VandJ · 13 Сен 2008

Кто-то пробовал прикручивать аналог lightbox, который называется lightview?Вроде должно быть все аналогично, но...

Eihwaz · 7 Окт 2008

Smoothgallery

Всем здрасьте. прошу прощения, что не отвечал на письма, которые мне прислали по теме Smoothgallery - не до того было, завалы на работе достали.
Решил просто здесь выложить.
Модераторы, если что, перенесите, пожалуйста, в другую тему, просто я здесь уже отписался.
Так же сразу хочу оговориться, что все это сделано вот буквально сейчас, соответственно, полную работоспособность не гарантирую, потому что в моей версии магазина полностью изменена файловая структура и механизм работы с изображениями (админ льет одну картинку - магазин сам делает из нее thumbnail и накладывает ватермарк)
Итак:
Прикручиваем Smoothgallery к SS Premium 1.4:
Для начала скачайте саму галлерею:
Для просмотра ссылки Войди или Зарегистрируйся
Создайте в корне магазина папку /gallery и сложите туда все файлы галлереи (кроме примеров, и прочего лишнего, конечно).
Открываем файл includes/product_detailed.php. Примерно на 220 строке видим:

PHP:

while( $picture=db_fetch_row($pictures) )
{
  if ( $picture[2] != "" )
  {
    if ( file_exists("./products_pictures/".$picture[2]) )
    {
	$all_product_pictures[]=$picture[2];
	$all_product_pictures_id[] = $picture[0];
    }
  }
  else if ( $picture[1] != "" )
  {
    if ( file_exists("./products_pictures/".$picture[1]) )
    {
	$all_product_pictures[]=$picture[1];
	$all_product_pictures_id[] = $picture[0];
    }
  }
}

Заменяем этот код на:

PHP:

while( $picture=db_fetch_row($pictures) )
{
  if ( $picture[2] != "" && $picture[1] != "")
  {
    if ( file_exists("./products_pictures/".$picture[2])  && file_exists("./products_pictures/".$picture[1]))
    {
      $all_product_pictures[$i]["thumbnail"] =$picture[2];
      $all_product_pictures[$i]["large"] = $picture[1];
      if (($picture[3] != "") && file_exists("./products_pictures/".$picture[3]))
        $all_product_pictures[$i]["fullsize"] = $picture[3];
      $all_product_pictures_id[$i] = $picture[0];
    }
  }
  $i++;
}

Теперь в файле шаблона head.tpl.html вставляем js'ы и css'ы, которые требует галлерея.
Теперь открываем файл шаблона product_detailed.tpl.html
Там ищем:

HTML:

{if $product_info.picture}

   {if $product_info.big_picture}

	{if !$printable_version}
           ... тут дофига всего еще ...
        {/if}
   {/if}

{/if}



{if $all_product_pictures}


<p>{$smarty.const.ADMIN_PHOTOS}:<br>
... и тут дофига всего пропущено ...
{/if}

Заменяем все это на:

HTML:

{if !$all_product_pictures}

  {if $product_info.picture}

    {if $product_info.big_picture}

      {if !$printable_version}
        <a href="javascript:open_window('products_pictures/{$product_info.big_picture}',{$product_info[16]},{$product_info[17]});">{/if}<img border=0 src="products_pictures/{$product_info.picture}" alt="{$product_info.name}"></a>

						{if !$printable_version}<br>

						<table><tr><td><img src="images/enlarge.gif"></td><td>

							<a class="olive" href="javascript:open_window('products_pictures/{$product_info.big_picture}',{$product_info[16]},{$product_info[17]});">{$smarty.const.ENLARGE_PICTURE}</a>

						</td></tr></table>

					{/if}

				{else}

					<img src="products_pictures/{$product_info.picture}" border=0 alt="{$product_info.name}">

				{/if}

			{else}

				{if $product_info.thumbnail}

					{if $product_info.big_picture}

						{if !$printable_version}<a href="javascript:open_window('products_pictures/{$product_info.big_picture}',{$product_info[16]},{$product_info[17]});">{/if}<img border=0 src="products_pictures/{$product_info.thumbnail}" alt="{$product_info.name}"></a>{if !$printable_version}<br>

							<table><tr><td><img src="images/enlarge.gif"></td><td>

							<a class="olive" href="javascript:open_window('products_pictures/{$product_info.big_picture}',{$product_info[16]},{$product_info[17]});">{$smarty.const.ENLARGE_PICTURE}</a>

						</td></tr></table>

						{/if}

					{else}

  						<img border=0 src="products_pictures/{$product_info.thumbnail}" alt="{$product_info.name}">

					{/if}

				{/if}

			{/if}



			{else}

			<script type="text/javascript">

			{literal}

function startGallery() {

				var myGallery = new gallery($('myGallery'), {

					timed: false

				});

			}

			window.addEvent('domready',startGallery);

			{/literal}

			</script>



			<p>{$smarty.const.ADMIN_PHOTOS}:<br>

							<div class="content">

								<div id="myGallery">

									<div class="imageElement">

										<h3>Item 1 Title</h3>

										<p>Item 1 Description</p>

										<a href="products_pictures/{$product_info.big_picture}" title="open image" class="open"></a>

										<img src="products_pictures/{$product_info.picture}" class="full" />

										<img src="products_pictures/{$product_info.thumbnail}" class="thumbnail" />

									</div>

									{section name=i loop=$all_product_pictures}

									<div class="imageElement">

										<h3>Item 1 Title</h3>

										<p>Item 1 Description</p>

										{if $all_product_pictures[i].fullsize}

										<a href="products_pictures/{$all_product_pictures[i].fullsize}" title="open image" class="open"></a>

										{/if}

										<img src="products_pictures/{$all_product_pictures[i].large}" class="full" />

										<img src="products_pictures/{$all_product_pictures[i].thumbnail}" class="thumbnail" />

									</div>

									{/section}

								</div>

							</div>

			{/if}

Должно работать, но название и описания картинок у всех товаров одно и тоже. Можно просто убрать всплывающую панель с описаниями, можно дописать функционал добавления названий и описаний к каждой фотке отдельно (я пошел вторым путем). Как сделать - расскажу позже, плюс возможно подправлю код, и покажу, как сделать гибкую настройку галереи из админки.
Вот, пока все.

Eihwaz · 8 Окт 2008

Более полная интерграция (настройка из админки)

Из mysql (через phpmyadmin, например) запускаем следующий запрос:

PHP:

INSERT INTO `SS_settings_groups` (`settings_groupID`, `settings_group_name`, `sort_order`) VALUES (7, 'Галерея', 4);

Там же запускаем такое (покажу пару примеров - для остальных настроек делайте по аналогии

PHP:

INSERT INTO `SS_settings` (`settings_groupID`, `settings_constant_name`, `settings_value`, `settings_title`, `settings_description`, `settings_html_function`, `sort_order`) VALUES
(7, 'CONF_GALLERY_FADE_DURATION', '500', 'Длительность перехода', 'Длительность эффекта перехода от одной картинки к другой', 'setting_TEXT_BOX(2,', 0),
(7, 'CONF_GALLERY_CAROUSEL_TEXT', 'Pictures', 'Текст на кнопке, показывающей превью', 'Текст на кнопке, которая разворачивает панель с мелкими копиями просматриваемых картинок', 'setting_TEXT_BOX(0,', 0),
(7, 'CONF_GALLERY_TIMED', '1', 'Автопрокрутка', 'Включить или выключить автоматическую ротацию картинок в галерее', 'setting_CHECK_BOX(', 0),
(7, 'CONF_GALLERY_TIMED_DELAY', '300', 'Задержка между показами', 'Время, которое должно пройти прежде, чем произойдет смена картинки при включенной авторотации', 'setting_TEXT_BOX(2,', 0);

Далее в файле шаблона product_detailed.tpl.html находим js вставку, которая отвечает за галлерею, в предыдущем посте я выложил ее в таком виде:

HTML:

<script type="text/javascript">
  {literal}
  function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    timed: false
    });
  }
  window.addEvent('domready',startGallery);
  {/literal}
</script>

Заменяем это дело на:

HTML:

<script type="text/javascript">
  {literal}
  function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    {/literal}
    timed: {if $smarty.const.CONF_GALLERY_TIMED eq 1}true{else}false{/if},
    delay: {$smarty.const.CONF_GALLERY_TIMED_DELAY},
    fadeDuration: {$smarty.const.CONF_GALLERY_FADE_DURATION}, 
    textShowCarousel: '{$smarty.const.CONF_GALLERY_CAROUSEL_TEXT}'
    {literal}
    });
  }
  window.addEvent('domready',startGallery);
  {/literal}
</script>

Теперь это настраивается из админки (Настройки -> Галерея).
Полный список настроек галереи находится в файле jd.gallery.js.
Если кто не нашел, вот настройки и их значения по умолчанию:

HTML:

showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Pictures',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
useHistoryManager: false,
customHistoryKey: false

Вроде ничего не забыл, если что - пишите.

andi_fireman · 27 Май 2009

Eihwaz написал(а):
Вроде ничего не забыл, если что - пишите.

Есть вопросик по Smoothgallery.
при установке embedLinks: true (открывать lightbox), если в галерее одна фотка, то она не выводится. Хотя ее видно и в иконках и в лайтбокес.
В чем проблема? и вообще возможно ли использовать Smoothgallery с одной фоткой?

Проблема с lightbox модулем - фитчя для фоток

fighter

Постоялец

Eihwaz

Гуру форума

art0

Создатель

VandJ

Постоялец

art0

Создатель

fighter

Постоялец

VandJ

Постоялец

Eihwaz

Гуру форума

Eihwaz

Гуру форума

andi_fireman

Писатель