how-to Установка prettyPhoto вместо стандартного ThickBox

[tim21701]

В продолжении двух тем "Установка FancyBox..." и "Установка ColorBox..." предлагаю третий вариант.

Итак, вместо стандартного ThickBox устанавливаем prettyPhoto на preview товара.

Разница:
......................................... prettyPhoto....................................................... ..................................................Стандартный ThickBox

....

=================================================================================

1). Качаем архив (ниже) и распаковываем папку prettyPhoto в catalog/view/javascript/jquery/

2). Открываем файл catalog/view/theme/ВАША ТЕМА/template/common/header.tpl и перед тегом </head> добавляем:

<script type="text/javascript" src="catalog/view/javascript/jquery/prettyPhoto/jquery.prettyPhoto.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/prettyPhoto/prettyPhoto.css" /><script type="text/javascript" src="catalog/view/javascript/jquery/prettyPhoto/jquery.cycle.lite.1.0.min.js"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});</script>

4). Далее, открываем файл catalog/view/theme/ВАША_ТЕМА/template/product/product.tpl и находим значение:

rel="gallery"

(Их должно быть два!). Меняем оба эти значения на:

rel="prettyPhoto[gallery]"

Всё.

Плюсы prettyPhoto перед FancyBox, ColorBox и стандартным ThickBox - наличие (thumb) "галереи", (если мышь находится над изображением).


+ в архиве 6 тем

Внимание:
Отображение "Privacy Policy" и "Terms & Conditions" будет происходить в ThickBox`е.

============================================================================================
Дополнительные параметры:

animation_speed: 'normal', Скорость анимации про загрузке и смене фото, значение fast, slow или normal
autoplay_slideshow: true, Разрешить слайд шоу, значение true или false
slideshow: 3000, false или интервал в миллисекундах (работает если autoplay_slideshow: true)
opacity: 0.60, Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное
show_title: true, Показывает наименование товара, значение true или false
default_width: 500,
default_height: 500,
counter_separator_label: ' из ', Разделитель для счётчика, по умолчанию косая черта (слэш) "/"
theme: 'facebook', Указываем тему: light_rounded, dark_rounded, light_square, dark_square или facebook
modal: false, Если установлено значение true, закрыть окно можно только по нажатию "Закрыть"
============================================================================================

Установка параметров:

<script type="text/javascript" charset="utf-8">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({animation_speed: 'normal', /* скорость анимации про загрузке и смене фото, значение fast, slow или normal */autoplay_slideshow: true, /* разрешить слайд шоу, значение true или false */slideshow: 3000, /* false или интервал в миллисекундах (работает если autoplay_slideshow: true)*/opacity: 0.60, /* Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное */show_title: true, /* Показывает наименование товара, значение true или false */default_width: 500,default_height: 500,counter_separator_label: ' из ', /* разделитель для счётчика, по умолчанию косая черта (слэш) "/" */theme: 'facebook', /* указываем тему: light_rounded, dark_rounded, light_square, dark_square или facebook */modal: false, /* если установлено значение True, закрыть окно можно только по нажатию "Закрыть" */});});</script>

prettyPhoto.zip

 

Существует платное дополнение iLightBox

[ergil]

В IE будет работать?

[tim21701]

В IE будет работать?

Это в любом браузере работает.

(всё зависит от того - на сколько "древний" у посетителя будет IE) :D :D :D

в IE5, 4 и 3 не проверял ))))))

[aachernishev]

В продолжении двух тем "Установка FancyBox..." и "Установка ColorBox..." предлагаю третий вариант.

Итак, вместо стандартного ThickBox устанавливаем prettyPhoto на preview товара.

Спасибо, всегда радуют такие посты =)

+1

[madbadjack]

Так же +1, вот это у меня заработало. Видно небу было угодно, чтобы fancybox не желал нормально функционировать :)))))

Спасибо tim21701

[akobelkov]

Качаем архив (ниже) и распаковываем папку prettyPhoto в catalog/view/javascript/jquery/

При попытке распаковать - выдает - ошибка контрольной суммы. В чем дело может быть? Ахив как-то адапитрован или можно качать с фо. сайта и ставить? На оф. сайте архив 1.4. Мб

[madbadjack]

При попытке распаковать - выдает - ошибка контрольной суммы. В чем дело может быть?

Скачал, установил, никаких проблем. Отключи АВ софт. Если у тебя комбайн, то возможно рубит HIPS. Пробуй, с архивом все ОК.

[akobelkov]

Скачал, установил, никаких проблем. Отключи АВ софт. Если у тебя комбайн, то возможно рубит HIPS. Пробуй, с архивом все ОК.

ругается только на этот файл jquery.prettyPhoto.js антвирус не могу отключить, да и дело не в нем похоже.

[madbadjack]

ругается только на этот файл jquery.prettyPhoto.js антвирус не могу отключить, да и дело не в нем похоже.

Кто ругается? Если антивирус, то ты сам себе противоречишь.

[akobelkov]

Кто ругается? Если антивирус, то ты сам себе противоречишь.

не антивирус, а архиватор. Скачал архив с оф. сайта PrettyPhoto

Ругается на это

$("a[rel^=prettyPhoto]").prettyPhoto is not a function

пути такие

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="catalog/view/javascript/jquery/prettyPhoto/js/jquery.prettyPhoto.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/prettyPhoto/css/prettyPhoto.css"/>

js и css в дистрибутиве вынесены в отдельные папки, поэтому пути немного отличаются от того что предлагал автор вначале, т.е. у меня prettyPhoto.css и jquery.prettyPhoto.js в отдельных папках.

В чем тут дело?

локально тестирую.

[akobelkov]

в общем проблема в том что не видит файл jquery.prettyPhoto.js

пробовал его помещать в туда же где библиотека JQuery, а имено в

catalog/view/javascript/jquery/

все равно не видит :-(

[tim21701]

...

проблема в том что не видит файл jquery.prettyPhoto.js...

Что то, наверное я запутался совсем, не понимаю, как это: "Не видит файл"??? :blink:

[madbadjack]

в общем проблема в том что не видит файл jquery.prettyPhoto.js

пробовал его помещать в туда же где библиотека JQuery, а имено в

catalog/view/javascript/jquery/

все равно не видит :-(

Аналогично посту выше. Тоже не могу вкурить смысл описанного...

[tim21701]

Добавил новые параметры в первый пост.

[ergil]

большое спасибо!!!

[ergil]

...

[tim21701]

А где эти параметры нужно менять? В prettyPhoto.css неформатированная каша.

Читайте в первом посте: "Установка параметров:" (и далее скрытый текст)

Если подробнее - то, в пункте 2). вместо блока :

<script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                        $("a[rel^='prettyPhoto']").prettyPhoto();
                });
</script>

Вставьте этот:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
                animation_speed: 'normal', /* скорость анимации про загрузке и смене фото, значение fast, slow или normal */
                autoplay_slideshow: true, /* разрешить слайд шоу, значение true или false */
                slideshow: 3000, /* false или интервал в миллисекундах (работает если autoplay_slideshow: true)*/
                opacity: 0.60, /* Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное */
                show_title: true, /* Показывает наименование товара, значение true или false */
                default_width: 500,
                default_height: 500,
                counter_separator_label: ' из ', /* разделитель для счётчика, по умолчанию косая черта (слэш) "/" */
                theme: 'facebook', /* указываем тему: light_rounded, dark_rounded, light_square, dark_square или facebook */
                modal: false, /* если установлено значение True, закрыть окно можно только по нажатию "Закрыть" */
                });
        });
</script>

[madbadjack]

Отлично! Мой следующий вопрос как раз был - а как поменять размер pop-up окна :)

[tim21701]

Отлично! Мой следующий вопрос как раз был - а как поменять размер pop-up окна :)

Размер "pop-up окна" :D :D Вы можете установить в админке... (по умолчанию 500 на 500).

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

[madbadjack]

Размер "pop-up окна" :D :D Вы можете установить в админке... (по умолчанию 500 на 500).

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

В админке у меня установлен нужный, я просто решил, что это правило касается только встроенного ThickBox :))

За ссылку спасибо, размеры должны быть родные :)

[ergil]

С параметрами сам разобрался, а вот можно ли сдвинуть галерею превьюшек фоток пониже или убрать совсем?

[tim21701]

С параметрами сам разобрался, а вот можно ли сдвинуть галерею превьюшек фоток пониже или убрать совсем?

Ну начинается... :D А зачем тогда вообще ставить prettyPhoto? Он тем и хорош, что показывает "превьюшки".

Если Вам это не надо, то воспользуйтесь двумя другими примерами - о них упомянуто в первом посте этой темы.

[ergil]

Ну начинается... :D А зачем тогда вообще ставить prettyPhoto? Он тем и хорош, что показывает "превьюшки".

Если Вам это не надо, то воспользуйтесь двумя другими примерами - о них упомянуто в первом посте этой темы.

Два других примера не работают в IE, ThickBox просто убогий. Галерея prettyPhoto довольно глючная - наезжает на основное фото и не отображаются превьюшки очень часто (черный прямоугольник с треугольником). Так есть возможность ее отключить или нет?

[madbadjack]

Что значит отключить? Бери и выполняй все действия наоборот. Это если религия не позволила back up сделать перед изменениями.

а насчет глюков...у меня появился глюк после добавления доп. опций. А именно:

т.е. как видно (надеюсь) фон не затемняется, и увеличенная картинка находится "как бы" под общим фоном. Рамка отсутствует. В Ишаке не фурычит. Кидает ошибку

Сведения об ошибке на веб-странице

Сообщение: Недопустимый аргумент.
Строка: 19
Символ: 35190
Код: 0
URI-код: http://www.madtracker.ru/catalog/view/javascript/jquery/jquery-1.3.2.min.js

В фоксе напоминает призрак :))) Тим, не подскажите в чем может быть дело?

Опции таким образом прописаны:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({
            	animation_speed: 'speed', /* скорость анимации при загрузке и смене фото, значение fast, slow или normal */
            	autoplay_slideshow: false, /* разрешить слайд шоу, значение true или false */
            	slideshow: 5000, /* false или интервал в миллисекундах (работает если autoplay_slideshow: true)*/
            	opacity: 0.8, /* Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное */
            	show_title: true, /* Показывает наименование товара, значение true или false */
            	default_width: 860,
            	default_height: 780,
            	counter_separator_label: '/', /* разделитель для счётчика, по умолчанию косая черта (слэш) "/" */
            	theme: 'dark_square', /* указываем тему: light_rounded, dark_rounded, light_square, dark_square или facebook */
            	modal: false, /* если установлено значение True, закрыть окно можно только по нажатию "Закрыть" */
            	});
    	});
</script>

[tim21701]

...Тим, не подскажите в чем может быть дело?...

Это такой ужас после дополнения "Доп. опций" появился? :blink: