Перейти к содержанию
tim21701

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

Рекомендуемые сообщения

В продолжении двух тем "Установка 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

+1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Спасибо tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

не антивирус, а архиватор. Скачал архив с оф. сайта 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 в отдельных папках.

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

catalog/view/javascript/jquery/

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

...

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

catalog/view/javascript/jquery/

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Добавил новые параметры в первый пост.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А где эти параметры нужно менять? В 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>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Что значит отключить? Бери и выполняй все действия наоборот. Это если религия не позволила 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>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От tim21701
      Часто задают этот вопрос, что бы не скидывать всем ссылки - вывожу её в отдельную тему.

      =========================================================================
      -----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
      =========================================================================

      Итак, открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:
      #menu { background: #585858; border-bottom: 1px solid #000000; height: 37px; margin-bottom: 15px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 0px 5px; } Добавляем туда строку (в любое место):
      text-align:center; Чуть ниже, (в этом же файле) находим:
      #menu ul { list-style: none; margin: 0; padding: 0; } Меняем на эти строки:
      #menu ul { list-style: none; margin:auto; padding: 0; display:inline-block; margin-bottom:-4px; text-align:left; } До:

      После:

      Расширяем возможности горизонтального меню...
       
    • От tim21701
      Если кому пригодится, то вот способ - как разместить на главной странице любой модуль.
      (для примера я взял три модуля; "Рекомендуем", "Хиты продаж" и "Слайд-шоу".)

      Вот результат:




      Итак, открываем файл catalog/controller/common/home.php и находим строку:
       
      $this->children[] = 'common/header'; Добаваляем после неё то - что хотим видеть на главной:
       
      $this->children[] = 'module/featured';$this->children[] = 'module/bestseller';$this->children[] = 'module/sidebarslideshow'; Далее, открываем catalog/view/theme/default/template/common/home.tpl и находим:
       
      <?php foreach ($modules as $module) { ?><?php echo ${$module['code']}; ?><?php } ?> И ниже добавляем своё:
       
      <?php echo $featured; ?><?php echo $bestseller'; ?><?php echo $sidebarslideshow'; ?> Затем, открываем catalog/view/theme/default/stylesheet/stylesheet.css и вместо блока (он в самом низу):
       
      #content .middle .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .middle .box .middle {width: 158px;min-height: 0px;} Ставим свой:
       
      #content .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .box .middle {width: 158px;min-height: 0px;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • От tim21701
      Итак, если Вы не установили изображение для Категории товаров, берём случайное (из товара) и выводим его...

      Пример:



      Для этого, открываем /catalog/controller/product/category.php и находим строки:
       
      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';} После них, вставляем:

      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $category_info['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Ниже, находим блок:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';} После него вставляем:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $result['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Всё.
       
    • От tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • От tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



      Используемые значки:

      В модуле нет заменяемых файлов, только новые.
      Установка: Копируем папки из архива и включаем меню в админке.

      Внимание.
      Данный мод не заменяет основное меню Категорий, у Вас появится ещё одно меню с Категориями!
      (Которое можно использовать как дополнительное... Если захотите отставить только его - отключите "Основное").

      Tree Category.zip
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.