Lightbox JS + shop script

[GoldMiner]

А где есть строка
<script type="text/javascript" src="highslide.js"></script> ?
Она должна где-то быть по-любому

Она в файле product_detailed.tpl.html, весь вот текст:

<script type="text/javascript" src="openimg/highslide.packed.js"></script>
<script type="text/javascript">

<!--

hs.graphicsDir = 'openimg/';
hs.outlineType = 'rounded';
window.onload = function() {literal}{
hs.preloadImages(1);
}
{/literal}
//-->
</script>

 

[Кошка]

>

Тэк-с. Пробуем так

<a href="images\bigpic.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images\smallpic.jpg" alt="Альтернативный текст" title="Всплывающий текст"></a><div class="highslide-caption">Текст под картинкой.</div>

 

[GoldMiner]

Тэк-с. Пробуем так

<a href="images\bigpic.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images\smallpic.jpg" alt="Альтернативный текст" title="Всплывающий текст"></a><div class="highslide-caption">Текст под картинкой.</div>

К сожалению ничего не изменилось

 

[Кошка]

К сожалению ничего не изменилось

Странно. Со всеми примерами на сайте highslide всё легко и непринужденно работает. Может скрипт хайслайда изменяли? И доизменялись.

Или же проблема может быть в стилях.

Есть ли highslide.css и в нем стили для .highslide-container , .highslide-image , .highslide-caption ?

Вообще лучше один раз увидеть, как оно у вас работает, если есть такая возможность.

 

[GoldMiner]

Странно. Со всеми примерами на сайте highslide всё легко и непринужденно работает. Может скрипт хайслайда изменяли? И доизменялись.
Или же проблема может быть в стилях.
Есть ли highslide.css и в нем стили для .highslide-container , .highslide-image , .highslide-caption ?
Вообще лучше один раз увидеть, как оно у вас работает, если есть такая возможность.

Посмотрел сайт highslide, там действительно много чего красиво работает..

Только я highslide скачал не оттуда, а по ссылке в сообщении №15 в этой теме, там архив, в архиве только один исполняемый файл highslide.packed.js который я изменить не пытался (если это вообще возможно).

highslide.css отдельного так же нет, тк по инструкции, приложенной к архиву, стили highslide вписал в общий css файл магазина.

Вот что добавлено в общий css файл согласно инструкции в архиве:

.bf{font-weight: bold;}
.highslide-image {border: 4px solid white; background-color: white;}
.highslide-caption {display: none; border: none; padding: 8px; background-color: white;}
.highslide-display-block {display: block;}
.highslide-display-none {display: none;}
a.highslide-loading, a.highslide-loading:hover {color: black; font-weight: bold; text-decoration: none; }
.spacel {margin-left: 8px;}

 

[Кошка]

Посмотрел сайт highslide, там действительно много чего красиво работает..
Только я highslide скачал не оттуда, а по ссылке в сообщении №15 в этой теме, там архив, в архиве только один исполняемый файл highslide.packed.js который я изменить не пытался (если это вообще возможно).

Уфф... Скачала я тоже тот архив, вроде разобралась.

Итак. В product_detailed.tpl.html в том архиве есть

			{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="products_pictures/{$big_product_pictures[i]}" class="highslide" onclick="return hs.expand(this[B][COLOR="Red"], {literal}{captionId: 'caption1'}{/literal}[/COLOR][/B])"><img border=0 src="products_pictures/{if $all_product_pictures[i] ne ""}{$all_product_pictures[i]}{else}{$all_product_pictures[i]}{/if}" alt="{$product_info.name}" hspace="2"></a> </td>
				{if ($smarty.section.i.index+1) % 2 == 0}</tr>{/if}
			{/section}
			</table>
			{/if}

Если у Вас так же, как выделено красным, то оно ищет див с id=caption1 на странице и вот его и выводит в качестве подписи под увеличенной картинкой. Если дива с таким id нет нигде на странице, то не выводится соответственно никакой подписи. Тогда Вам нужно добавить такое:

			{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="products_pictures/{$big_product_pictures[i]}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'caption1'}{/literal})"><img border=0 src="products_pictures/{if $all_product_pictures[i] ne ""}{$all_product_pictures[i]}{else}{$all_product_pictures[i]}{/if}" alt="{$product_info.name}" hspace="2"></a> [COLOR="Red"][B]<div class='highslide-caption' id='caption1'><b>{$product_info.name}</b></div>[/B][/COLOR] </td>
				{if ($smarty.section.i.index+1) % 2 == 0}</tr>{/if}
			{/section}
			</table>
			{/if}

Тогда под любой из увеличенных картинок будет выводиться {$product_info.name}, т.е. наименование товара. Вместо просто {$product_info.name} можно что-нибудь еще дописать, например, - " Вот увеличенное изображение {$product_info.name} "

Нужно, чтобы <div class='highslide-caption' id='caption1'>Текст для подписи под картинкой</div> было хотя бы где-нибудь на странице.

 

[GoldMiner]

Уфф... Скачала я тоже тот архив, вроде разобралась.

Спасибо еще раз за помощь, столько внимания моим проблемам уделили.

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

 

[Кошка]

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

Поздравляю! В принципе самое правильное и лучшее решение. Сама так сразу и сделала.

На сайте хайслайда, есть Для просмотра ссылки Войди или Зарегистрируйся и мощный Для просмотра ссылки Войди или Зарегистрируйся, да и просто в зип архиве есть много простых примеров, по которым несложно разобраться и можно поиграться у себя.