Jump to content
Sign in to follow this  
tim21701

[How-To] Установка ColorBox вместо стандартного ThickBox

Recommended Posts

В продолжение темы "Установка FancyBox вместо стандартного ThickBox", предлагаю ещё один вариант.

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

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

Изображение...Изображение


1). Качаем последнюю версию ColorBox. И распаковываем из архива файл jquery.colorbox.js в папку catalog/view/javascript/jquery/colorbox

2). Из этого же архива, из папки example1 распаковываем папку images и файл colorbox.css (туда же) - в папку catalog/view/javascript/jquery/colorbox

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

<script src="catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js"> </script><link media="screen" rel="stylesheet" href="catalog/view/javascript/jquery/ColorBox/colorbox.css" />

Ниже (в этом же файле), перед тегом </head> добавляем:

<script>$(document).ready(function(){$("a[rel='slideshow']").colorbox({title: false, //Показывать наименование Товараslideshow:true, //Включаем СлайдШоу. Включен по умолчанию (если надо выключить - ставим true)slideshowSpeed: 2500, //Скорость смены картинкиspeed:1000, // Скорость эффекта "масштабирование"preloading: true, //Значек загрузкиcurrent: "Изображение {current} из {total}", //Выводим номер текущей и общее число картинок на русскомprevious: "Назад", //Подсказки к кнопкам (для некоторых тем)next: "Вперёд", //Подсказки к кнопкам (для некоторых тем)close: "Закрыть", //Подсказки к кнопкам (для некоторых тем)slideshowStart: "Продолжить", //Русифицируем кнопку Start для СлайдШоуslideshowStop: "Пауза", //Русифицируем кнопку Stop для СлайдШоуopacity: 0.7, //Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное});//Example of preserving a JavaScript event for inline calls.$("#click").click(function(){$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");return false;});});</script>

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

class="thickbox"

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

rel="slideshow"

Всё. Изображение
Сохраняем. Закрываем. Проверяем.

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

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

Плюсы ColorBoxперед https://opencartforum.com/topic/2149-установка-fancybox-вместо-стандартного-thickbox/"%5D%5Bsize="3'>FancyBox[/size] и стандартным ThickBox:


1). Потдержка встроенного Слайд-Шоу
2). Огромное колличество настроек.
3). Готовые стили (темы) в виде уже готовых .css


Вот, лишь некоторые из них:

Изображение..Изображение..823469.png



+ У разных изображений разный размер.
+ Добавлены новые опции.

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

  • +1 5

Share this post


Link to post
Share on other sites

спасибо!

но с кодировкой что-то не то ..

current: "Изображение {current} из {total}
выглядит как : ??????????? 1 ?? 4

что подскажите?)

Кто-нибудь знает как размер увеличенного изображения поменять с 500x500 px, можно сделать так, чтобы у разных изображений разный размер был?

Share this post


Link to post
Share on other sites

Уважаемый tim21701!

Я вижу, для вас эти галерейкины фишки как свои пять пальцев.

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

Заранее благодарен.

С уважением.

Share this post


Link to post
Share on other sites

...какая удобнее и проще всего настраиваемая?...

Всё зависит от конкретного проекта. ;)

Может Вы в WordPress, PrestaShop или Магенте это реализуете. Я же не знаю, что именно Вы будете использовать... Но, и тот и другой метод, можно встроить в любой двиг.

Всё зависит от Вашего вкуса, какой именно метод Вам больше понравился - тот иберите.

...Мне, например, в самом модальном окошке нужно будет текстурку положить, а не просто цвет фона и т.п.

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

Но, не стоит заострять своё внимание лишь на этих двух примерах. Их в инете полно. И есть такие, с которыми эти два - даже рядом не стояли... :rolleyes:

Share this post


Link to post
Share on other sites

но с кодировкой что-то не то .. выглядит как : ??????????? 1 ?? 4. Что подскажите?

Странно, потому что я сделал это на двух сайтах (разные хосты), и на обоих - русские символы читаются без проблем. :mellow:

Если не критично, поставьте по дефолту:

current: "image {current} of {total}",

...Кто-нибудь знает как размер увеличенного изображения поменять с 500x500 px, можно сделать так, чтобы у разных изображений разный размер был?

У ColorBox это предусмотренно, есть команда:

scalePhotos: true,
Но, в силу ограничений самого ОпенКарт, подозреваю, сделать это не получится. Хотя, может у кого и выйдет... ;) (было бы здорово)

Размер 500х500 в ОпенКарт стоит по умолчанию, меняется в настройках...

Share this post


Link to post
Share on other sites

2 tim21701

Всё зависит от конкретного проекта

Не суть, какой проект. Будем считать, хмль-ная страница - там суть проекта неважна.

Вобщем, я так понял, любую можно юзать приблуду и ничего страшного или сложного ;)

Сегодня уже устал, а вот завтра УХ. 8)

Всем спасибо.

С уважением.

Share this post


Link to post
Share on other sites

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

Если не критично, поставьте по дефолту:

current: "image {current} of {total}",

сохранил в кодировке UTF-8, всё заработало :rolleyes:

У ColorBox это предусмотренно, есть команда:

scalePhotos: true,

Но, в силу ограничений самого ОпенКарт, подозреваю, сделать это не получится. Хотя, может у кого и выйдет... ;) (было бы здорово)

Размер 500х500 в ОпенКарт стоит по умолчанию, меняется в настройках...

да, я тоже попробовал, только в opencartе это действительно ничего не меняет, ну что, буду сейчас рыться, пытаться что-то сделать с картинками, удачи мне :rolleyes:

Share this post


Link to post
Share on other sites

...можно сделать так, чтобы у разных изображений разный размер был?

Можно! (даже нужно!) ;) Открываете файл catalog/controller/product/product.php и находите строки:

$this->data['popup'] = $this->model_tool_image->resize($image, $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
Меняете их на эти:

$this->data['popup'] = 'image/' . $image;
В этом же файле, чуть ниже строки:

'popup' => $this->model_tool_image->resize($result['image'] , $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
Меняете на:

'popup' => 'image/' . $result['image'] ,
(долго искал, оказалось всё намного проще)

Всё.

Сохраняем. Закрываем. Смотрим!

:rolleyes:

P.S.

Что бы увидеть разницу (если у Вас база с товаром OpenCart) откройте страницу с товаром iPhone и кликните на изображение... ПОСМОТРИТЕ РАЗНИЦУ!

  • +1 6

Share this post


Link to post
Share on other sites

Вот, ещё несколько опций, работающих с ColorBox:

transition: elastic (Эффект появления. Возможные значения "elastic", "fade" или "none")

initialWidth: 300 (Устанавливает начальную ширину окна до загрузки изображения товара)

initialHeight: 100 (Устанавливает начальную высоту окна до загрузки изображения товара)

width: false (Устанавливает значение внешней ширины окна, включая бордюр и кнопки. К примеру: "100%", "800px", или 800)

height: false (Устанавливает значение внешней высоты окна, включая бордюр и кнопки. К примеру: "100%", "800px", или 800)

speed: 350 (Скорость появления/масштабирование в миллисекундах, при эффектах "elastic" или "fade")

maxWidth: false (Максимальная ширина изображения товара. По умолчанию "false". К примеру: "70%", "1024px", или 1024)

maxHeight: false (Максимальная высота изображения товара. По умолчанию "false". К примеру: "70%", "900px", или 900)

scalePhotos: true (При значение ‘true’ и установленном параметре maxWidth, maxHeight, width или height, ColorBox произведет масштабирование фото под нужный размер)

scrolling: true (При значение "falseColorBox скрывает изображение товара, выходящие за пределы окна)

overlayClose: true (Позволяет закрыть окно ColorBox по клику за его пределами, иначе - только по нажатию кнопки "Закрыть", или крестика)

slideshowAuto: true (Автоматически запускает слайд-шоу при открытии изображения товара)

Установка: "параметр" : (двоеточие) значение, (К примеру: speed: 400,)

  • +1 4

Share this post


Link to post
Share on other sites

Вот, ещё несколько функций,...

это параметры / опции, но никак не функции.

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

Share this post


Link to post
Share on other sites

это параметры / опции, но никак не функции.

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

Приклоняюсь учитель, виноват. :D
  • +1 2

Share this post


Link to post
Share on other sites

Все сделал по инструкции, не получилось. Смущает шаг 4, после него получается

rel="slideshow" rel="gallery"
и открывается только картинка на странице.

Share this post


Link to post
Share on other sites

Установил. Все получилось СУПЕР. Спасибо!

  • +1 1

Share this post


Link to post
Share on other sites

Смущает шаг 4, после него получается

rel="slideshow" rel="gallery"
Всё верно, так и должно быть.
  • +1 2

Share this post


Link to post
Share on other sites

Заработало только когда переименовал папку colorbox в ColorBox.

Да, в IE не работает вообще.

  • +1 2

Share this post


Link to post
Share on other sites

ну что в ИЕ не работает думаю не большая потеря

Share this post


Link to post
Share on other sites

ну что в ИЕ не работает думаю не большая потеря

А я думаю, что большая... потеря именно в клиентах...

Share this post


Link to post
Share on other sites

...можно сделать так, чтобы у разных изображений разный размер был?

Можно! (даже нужно!) ;)

ае)

tim21701, ОГРОМНОЕ Вам спасибо =) я бы сам не нашел ))

рад картинкам "actual pixels" безумно )

Share this post


Link to post
Share on other sites

мож, и не по ОпенКарту вопрос, и тем не менее, косвенно.. Чтоб не подымать в курилке темы, спрошу здесь.

Есть у меня лайтбокс на неком проекте - с ним все ясно. Куча превьюшек с rel'ом, типа "лайтбокс-комон-комон". Хочу, чтоб куча превьюшек не выстраивалась стройными рядами, а каруселью была. Но у того-же жКверьного каруселя они свой рел используют. Мутулз и иже с ними применять не хо - у мну там jQuery используется, а разные фрамеворки на одной паге - это конфликт. Или его возможность.

Вобщем - мож, кто сталкивался? Какие-нть идеи..

Или эти релы действительно, как теги использовать? Конфликтовать не будет-ли? По старшинству. Экспериментировать ща ни времени ни желания, да и ваще... Если кто знает чего, лучше подскажите. А завтра погуглю, да.

С уважением.

Share this post


Link to post
Share on other sites

************************

Share this post


Link to post
Share on other sites

все верно, именно так и получается) но при этом все работает.

  • +1 1

Share this post


Link to post
Share on other sites

rel="slideshow" rel="gallery"

Всё верно, так и должно быть.

Странно, но у меня с такой конструкцией не работает совсем в версии движка 0.2.0. просто открывается картинка в новой вкладке браузера.

Share this post


Link to post
Share on other sites

rel="slideshow" rel="gallery"
Странно, но у меня с такой конструкцией не работает совсем в версии движка 0.2.0. просто открывается картинка в новой вкладке браузера.

Была таже фигня. Но вроде разобрался ))

Если выводит просто окошко. то скорее всего на странице товара (до того как начинаем смотреть картинку) ИЕ пишет о том что страница с ошибками.

У меня было 2

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

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

Сообщение: 'jQuery' - определение отсутствует

Строка: 4

Символ: 1

Код: 0

URI-код: http://сайт/catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js

Сообщение: Объект не поддерживает это свойство или метод

Строка: 42

Символ: 1

Код: 0

URI-код: http://сайт/index.php?route=product/product&path=18&product_id=43

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

Я вроде сделал так как и было написанно ))

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

<script src="catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js"> </script>

<link media="screen" rel="stylesheet" href="catalog/view/javascript/jquery/ColorBox/colorbox.css" />

А вышло что стоило сделать следующее:

3). Открываем файл catalog/view/theme/ВАША ТЕМА/template/common/header.tpl

находим сторочку

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

и ПОСЛЕ нее добавляем строки

<script src="catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js"> </script>

<link media="screen" rel="stylesheet" href="catalog/view/javascript/jquery/ColorBox/colorbox.css" />

И потом все дальнейшие шаги ))

Тогда все заработало (у меня)

Share this post


Link to post
Share on other sites

Заработало только когда переименовал папку colorbox в ColorBox.

Да, в IE не работает вообще.

Да, у меня тоже самое, обновите инструкцию - регистр имеет значение

slideshow:true, //Включаем СлайдШоу. Включен по умолчанию (если надо выключить - ставим true)

false

Share this post


Link to post
Share on other sites

Друзья, начал ставить Color Box но видимо что то напутал и теперь у меня даже стандартный превью не показывает.

Фаил catalog/view/theme/МОЯ ТЕМА/template/common/header.tpl выглядит так. Подскажите что я не то сделал- я уже не знаю как что менять.

<?php if (isset($_SERVER['HTTP_USER_AGENT']) && !strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6')) echo '<?xml version="1.0" encoding="UTF-8"?>'. "\n"; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/footerslider.css" />

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

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

<head>

<title><?php echo $title; ?></title>

<?php if ($keywords) { ?>

<meta name="keywords" content="<?php echo $keywords; ?>" />

<?php } ?>

<?php if ($description) { ?>

<meta name="description" content="<?php echo $description; ?>" />

<?php } ?>

<base href="<?php echo $base; ?>" />

<?php if ($icon) { ?>

<link href="<?php echo $icon; ?>" rel="icon" />

<?php } ?>

<?php foreach ($links as $link) { ?>

<link href="<?php echo str_replace('&', '&', $link['href']); ?>" rel="<?php echo $link['rel']; ?>" />

<?php } ?>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light,regular' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />

<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>

<script>

DD_belatedPNG.fix('img, #header .div3 a, #content .left, #content .right, .box .top');

</script>

<![endif]-->

<?php foreach ($styles as $style) { ?>

<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />

<?php } ?>

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

<script src="catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js"> </script>

<link media="screen" rel="stylesheet" href="catalog/view/javascript/jquery/ColorBox/colorbox.css" />

media="screen" />

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

<?php foreach ($scripts as $script) { ?>

<script type="text/javascript" src="<?php echo $script; ?>"></script>

<?php } ?>

<script type="text/javascript"><!--

function bookmark(url, title) {

if (window.sidebar) { // firefox

window.sidebar.addPanel(title, url, "");

} else if(window.opera && window.print) { // opera

var elem = document.createElement('a');

elem.setAttribute('href',url);

elem.setAttribute('title',title);

elem.setAttribute('rel','sidebar');

elem.click();

} else if(document.all) {// ie

window.external.AddFavorite(url, title);

}

}

//-->

</script>

<script src="catalog/view/javascript/jquery/ColorBox/jquery.colorbox.js"> </script>

<link media="screen" rel="stylesheet" href="catalog/view/javascript/jquery/ColorBox/colorbox.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/footerslider.css" />

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

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

<script>

$(document).ready(function(){

$("a[rel=slideshow]").colorbox({

title: true, //Показывать наименование Товара

slideshow: false, //Включаем СлайдШоу. Включен по умолчанию (если надо выключить - ставим true)

slideshowSpeed: 2500, //Скорость смены картинки

speed:1000, // Скорость эффекта "масштабирование"

preloading: true, //Значек загрузки

current: "Изображение {current} из {total}", //Выводим номер текущей и общее число картинок на русском

previous: "Назад", //Подсказки к кнопкам (для некоторых тем)

next: "Вперёд", //Подсказки к кнопкам (для некоторых тем)

close: "Закрыть", //Подсказки к кнопкам (для некоторых тем)

slideshowStart: "Продолжить", //Русифицируем кнопку Start для СлайдШоу

slideshowStop: "Пауза", //Русифицируем кнопку Stop для СлайдШоу

opacity: 0.7, //Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное

});

//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

</head>

<body>

<?php if (isset($common_error)) { ?>

<div class="warning"><?php echo $common_error; ?></div>

<?php } ?>

<div id="container">

<div id="container-inner">

<div id="header">

<div id="logo">

<?php if ($logo) { ?>

<a href="<?php echo str_replace('&', '&', $home); ?>"><img src="<?php echo $logo; ?>" title="<?php echo $store; ?>" alt="<?php echo $store; ?>" /></a>

<?php } ?>

</div>

<!-- /logo -->

<ul id="nav">

<li><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a></li>

<?php if (!$logged) { ?>

<li><a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"><?php echo $text_login; ?></a></li>

<?php } else { ?>

<li><a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a></li>

<?php } ?>

<li><a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"><?php echo $text_account; ?></a></li>

<li><a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a></li>

<li class="last"><a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></li>

</ul>

<!-- /nav -->

<div id="search">

<?php if ($keyword) { ?>

<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />

<?php } else { ?>

<input type="text" value="<?php echo str_replace(":","",$entry_search); ?>" id="filter_keyword" onclick="if(this.value=='<?php echo str_replace(":","",$entry_search); ?>') this.value = '';" onblur="if(this.value=='') this.value = '<?php echo str_replace(":","",$entry_search); ?>';" />

<?php } ?>

<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a>

</div>

<!-- /search -->

<div id="local">

<?php if ($currencies) { ?>

<form action="<?php echo str_replace('&', '&', $action); ?>" method="post" enctype="multipart/form-data" id="currency_form">

<div class="switcher">

<?php foreach ($currencies as $currency) { ?>

<?php if ($currency['code'] == $currency_code) { ?>

<div class="selected"><a><?php echo $currency['title']; ?></a></div>

<?php } ?>

<?php } ?>

<div class="option">

<?php foreach ($currencies as $currency) { ?>

<a onclick="$('input[name=\'currency_code\']').attr('value', '<?php echo $currency['code']; ?>'); $('#currency_form').submit();"><?php echo $currency['title']; ?></a>

<?php } ?>

</div>

</div>

<div style="display: inline;">

<input type="hidden" name="currency_code" value="" />

<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />

</div>

</form>

<?php } ?>

<?php if ($languages) { ?>

<form action="<?php echo str_replace('&', '&', $action); ?>" method="post" enctype="multipart/form-data" id="language_form">

<div class="switcher">

<?php foreach ($languages as $language) { ?>

<?php if ($language['code'] == $language_code) { ?>

<div class="selected"><a><img src="image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />  <?php echo $language['name']; ?></a></div>

<?php } ?>

<?php } ?>

<div class="option">

<?php foreach ($languages as $language) { ?>

<a onclick="$('input[name=\'language_code\']').attr('value', '<?php echo $language['code']; ?>'); $('#language_form').submit();"><img src="image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />  <?php echo $language['name']; ?></a>

<?php } ?>

</div>

</div>

<div>

<input type="hidden" name="language_code" value="" />

<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />

</div>

</form>

<?php } ?>

</div>

<!-- /local -->

<div id="breadcrumb">

<?php foreach ($breadcrumbs as $breadcrumb) { ?>

<?php echo str_replace(">","»",$breadcrumb['separator']); ?><a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><?php echo $breadcrumb['text']; ?></a>

<?php } ?>

</div>

<!-- /breadcrumb -->

</div>

<script type="text/javascript"><!--

function getURLVar(urlVarName) {

var urlHalves = String(document.location).toLowerCase().split('?');

var urlVarValue = '';

if (urlHalves[1]) {

var urlVars = urlHalves[1].split('&');

for (var i = 0; i <= (urlVars.length); i++) {

if (urlVars) {

var urlVarPair = urlVars.split('=');

if (urlVarPair[0] && urlVarPair[0] == urlVarName.toLowerCase()) {

urlVarValue = urlVarPair[1];

}

}

}

}

return urlVarValue;

}

$(document).ready(function() {

route = getURLVar('route');

if (!route) {

$('#tab_home').addClass('selected');

} else {

part = route.split('/');

if (route == 'common/home') {

$('#tab_home').addClass('selected');

} else if (route == 'account/login') {

$('#tab_login').addClass('selected');

} else if (part[0] == 'account') {

$('#tab_account').addClass('selected');

} else if (route == 'checkout/cart') {

$('#tab_cart').addClass('selected');

} else if (part[0] == 'checkout') {

$('#tab_checkout').addClass('selected');

} else {

$('#tab_home').addClass('selected');

}

}

});

//--></script>

<script type="text/javascript"><!--

$('#search input').keydown(function(e) {

if (e.keyCode == 13) {

moduleSearch();

}

});

function moduleSearch() {

url = 'index.php?route=product/search';

var filter_keyword = $('#filter_keyword').attr('value')

if (filter_keyword) {

url += '&keyword=' + encodeURIComponent(filter_keyword);

}

var filter_category_id = $('#filter_category_id').attr('value');

if (filter_category_id) {

url += '&category_id=' + filter_category_id;

}

location = url;

}

//--></script>

<script type="text/javascript"><!--

$('.switcher').bind('click', function() {

$(this).find('.option').slideToggle('fast');

});

$('.switcher').bind('mouseleave', function() {

$(this).find('.option').slideUp('fast');

});

//--></script>

Как аккуратнее написать- не знаю.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By 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; } До:

      После:

      Расширяем возможности горизонтального меню...
       
    • By 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;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • By 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)];}} Всё.
       
    • By tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • By tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



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

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

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

      Tree Category.zip
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.