highslide в шоп скрипт.

Albus_D · 7 Дек 2010

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

в product_detailed маленькие картинки выводятся так:

PHP:

{if $all_product_pictures}

			<p>{$smarty.const.ADMIN_PHOTOS}:<br><table cellpadding="3" class="voting">
			{section name=i loop=$all_product_pictures}
				{if $smarty.section.i.index % 2 == 0}<tr>{/if}
				<td><a href="index.php?productID={$product_info.productID}&picture_id={$all_product_pictures_id[i]}"><img src="products_pictures/{$all_product_pictures[i]}" border="0" alt=""></a></td>
				{if ($smarty.section.i.index+1) % 2 == 0}</tr>{/if}
			{/section}
			</table>

			{/if}

собственно здесь и нужно переписать так чтобы каждая маленькая картинка ссылалась не на a

PHP:

href="index.php?productID={$product_info.productID}&picture_id={$all_product_pictures_id[i]}">

а на большую картинку с подключенным к ним хайслайдом... вот чота не соображу как сделать чтобы вела ссылка на большую картинку...

A_L_I_E_N · 8 Дек 2010

В head.tpl.html вставляем (исправляем) такой код:

PHP:

<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript" src="/highslide/highslide-full.js"></script>
<script type="text/javascript">{literal}
hs.addSlideshow({
	// slideshowGroup: 'group1',
	interval: 4000,
	repeat: true,
	useControls: true,
	fixedControls: true,
	overlayOptions: {
		opacity: .6,
		position: 'bottom center',
		hideOnMouseOut: true
	}
});
hs.graphicsDir = 'http://ВАШ_САЙТ/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'dark';
hs.dimmingOpacity = 0.50;
hs.fadeInOut = true;{/literal}
</script>

В product_detailed.tpl.html вставляем (исправляем) такой код:

PHP:

{if $all_product_pictures}
{section name=i loop=$all_product_pictures}
<a href="/products_pictures/{$big_product_pictures[i]}" class="highslide" onclick="return hs.expand(this)"><img border=0 src="img.php?file=products_pictures/{$all_product_pictures[i]}" alt="{$product_info.name}"></a>
{/section}<br>{/if}

В product_detailed.php вставляем (исправляем) такой код:

PHP:

				if ( isset($_GET["picture_id"]) )
				{
					$pictures = db_query("select photoID, filename, thumbnail, enlarged from ".
						PRODUCT_PICTURES." where photoID!=".(int)$_GET["picture_id"].
						" AND productID=".(string)$productID );
				}
				else if ( !is_null($a["default_picture"]) )
				{
					$pictures = db_query("select photoID, filename, thumbnail, enlarged from ".
						PRODUCT_PICTURES." where photoID!=".$a["default_picture"].
						" AND productID=".(string)$productID );
				}
				else
				{
					$pictures = db_query("select photoID, filename, thumbnail, enlarged from ".
						PRODUCT_PICTURES." where productID=".(string)$productID );
				}
				$all_product_pictures = array();
				$big_product_pictures = array();
				$all_product_pictures_id = array();
				while( $picture=db_fetch_row($pictures) )
				{
					if ( $picture[2] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[2]) )
						{
							$big_product_pictures[]=$picture[3];
							$all_product_pictures[]=$picture[2];
							$all_product_pictures_id[] = $picture[0];
						}
					}
					else if ( $picture[1] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[1]) )
						{
							$picture[2]='';
							$big_product_pictures[]=$picture[3];
							$all_product_pictures[]=$picture[1];
							$all_product_pictures_id[] = $picture[0];
						}
					}
				}

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Вложение 1) , 4я строчка:
-----------------------------------------------------------------
resizeimg((string)$filename,50,45);
-----------------------------------------------------------------
Числа: ширина и высота соответственно.

Если я ничего не забыл и всё правильно сделали, то должно получиться примерно вот так:

Можно листать клавишами "лево" "право", а можно кликая по навигационной панели.

Живые примеры, как обычно, по ссылке в моём профиле...

Panterka07 · 14 Дек 2010

A_L_I_E_N, несколько уточняющих вопросов:
1)Файл img.rar нужен только для ресайза, т.е если он не нужен, можно его не использовать?
2)Имеет место быть глюк с кодировкой в скрипте (углядела на ваших живых примерах), нужно добавить UTF-8 или ошибаюсь?

Код:

<script type="text/javascript" src="/highslide/highslide-full.js"  [B][COLOR="Red"]charset="utf-8"[/COLOR][/B]></script>

P.S. сделала всё по вашим рекомендациям, но конечный результ - не работоспособный получился...
Если 1 фото - вообще никаких изменений, как открывалось в отдельном окне, так и открывается.
Если имеются доп. фото - то зависает на надписи "Загрузка" и всё. (увеличенное фото 100% имеется..)
В чем может быть косяк? У вас на сайте все так симпатично отображается...(ну, только кроме Language strings

)

Albus_D · 15 Дек 2010

Пантерка ,

свой вариант выкладываю:
качаем highslide , кидаем в корень в папку highslide.

в head.tpl добавляем:

PHP:

<script type="text/javascript"
    src="highslide/highslide-full.js"></script>
{literal}
<script type="text/javascript">

	hs.allowSizeReduction = false;
	// always use this with flash, else the movie will be stopped on close:
	hs.preserveContent = false;
    // разместите здесь настройки Highslide 
    // вместо редактирования файла highslide.js
    hs.graphicsDir = 'highslide/graphics/';

	if (hs.addSlideshow) hs.addSlideshow({ 
	        interval: 5000,                       // интервал смен в милисеках 
	        repeat: false,                        // повторять/не повторять 
	        useControls: true,                    // использовать ли кнопки навигации? 
	        overlayOptions: { 
	                opacity: .6,                  // прозрачность панели навигации 
	                position: 'top center',     // позиция панели навигации 
	                hideOnMouseOut: false          // панель спрячется, если убрать курсор мыши со слайда          
	    } 
	}); 
</script>
{/literal}

затем в файле шаблона product_detailed (у меня не осталось шаблона с ихсодным кодом поэтому пишу только НА ЧТО заменить. там легко понять - это все в начале файла и структура не нарушена, просто дописан вывод хайслайда:

Место где выводится миддл картинка заменить на :

PHP:

{if $product_info.picture} 
{if $product_info.big_picture} 
{if !$printable_version}<a id="thumb2" href="products_pictures/{$product_info.big_picture}" class="highslide" onClick="return hs.expand
  (this,{literal} {wrapperClassName : 'highslide-white', spaceForCaption: 30,
  outlineType: 'rounded-white', dimmingOpacity: 0.75, captionId: 'caption3'}{/literal})" title="{$product_info.name}"> 
{/if} 
<img src="products_pictures/{$product_info.picture}" alt="{$product_info.name}" title="{$product_info.name} \ {$smarty.const.ENLARGE_PICTURE}"  /> 
{if !$printable_version} 
<br><font class=average>{$smarty.const.ENLARGE_PICTURE}</font></a>

место где выводятся маленькие картинки заменяем на :

PHP:

{if $all_product_pictures}
			<p>{$smarty.const.ADMIN_PHOTOS}:<br><table cellpadding="3">
			{section name=i loop=$all_product_pictures}
				{if $smarty.section.i.index % 2 == 0}<tr>{/if}
				<td><a id="thumb2" class="highslide" onClick="return hs.expand(this,{literal} {wrapperClassName : 'highslide-white', spaceForCaption: 30,
  outlineType: 'rounded-white', dimmingOpacity: 0.75, captionId: 'caption3'}{/literal})" href="products_pictures/{$all_product_pictures_big[i]}"><img src="products_pictures/{$all_product_pictures[i]}" border=0></a></td>
				{if ($smarty.section.i.index+1) % 2 == 0}</tr>{/if}
			{/section}
			</table>
			{/if}

И последнее меняем в includes/ файл product_detailed.php

Ищем:

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] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[2]) )
						{
							$all_product_pictures[]=$picture[2];
							$all_product_pictures_big[]=$picture[3];
							$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_big[]=$picture[3];
							$all_product_pictures_id[] = $picture[0];
						}
					}
				}

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

Panterka07 · 15 Дек 2010

Albus_D, спб, попробую и ваш вариант. я уже правда с "танцами и бубном" прикрутила себе работоспособную конструкцию...но, там действительно много лишнего...киньте, плз, обрезанный вариант навигации, поизучаю.

P.S. а у вас трабл с кодировкой не наблюдается? у меня если не добавить в строку инициализации скрипта charset="utf-8" - при наведении курсора кракозябры...(при условии русского конфига)

Albus_D · 16 Дек 2010

Чтобы в меню было только перемещение вправо, влево и закрыть - замени файл свой цсс на мой. ещё в моём цсс - убрана серая рамочка для изображений.
ну и незабудь сделать резервную копию своей таблицы стили - малоли расхожения в версиях или ещё чо )

Panterka07 · 16 Дек 2010

Да, с этим понятно....я уже изменила навигацию, но убрала тока слайд-шоу, а резайз нужен - оставила...А у тебя плавно происходит смена фото? У меня почему-то наблюдается некое "подергивание" что-ли....и в Опере и в IE оно более явное, нежели в Лисе...пробовала transitionDuration менять, но нет, не то..
Может конечно уже глаз примелькался и мерещится...

highslide в шоп скрипт.

Albus_D

Постоялец

A_L_I_E_N

Гуру форума

Panterka07

Постоялец

Albus_D

Постоялец

Panterka07

Постоялец

Albus_D

Постоялец

Вложения

Panterka07

Постоялец