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

[tim21701]

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

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

....

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

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

[aachernishev]

спасибо!

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

current: "Изображение {current} из {total}

выглядит как : ??????????? 1 ?? 4

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

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

[AlexFisher]

Уважаемый tim21701!

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

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

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

С уважением.

[tim21701]

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

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

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

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

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

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

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

[tim21701]

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

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

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

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

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

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

scalePhotos: true,

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

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

[AlexFisher]

2 tim21701

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

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

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

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

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

С уважением.

[aachernishev]

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

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

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

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

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

scalePhotos: true,

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

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

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

[tim21701]

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

Можно! (даже нужно!) ;) Открываете файл 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 и кликните на изображение... ПОСМОТРИТЕ РАЗНИЦУ!

[tim21701]

Вот, ещё несколько опций, работающих с 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 (При значение "false’ ColorBox скрывает изображение товара, выходящие за пределы окна)

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

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

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

[afwollis]

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

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

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

[tim21701]

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

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

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

[ergil]

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

rel="slideshow" rel="gallery"

и открывается только картинка на странице.

[kopaweb19]

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

[tim21701]

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

rel="slideshow" rel="gallery"

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

[ergil]

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

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

[Googlah]

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

[ergil]

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

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

[aachernishev]

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

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

ае)

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

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

[AlexFisher]

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

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

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

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

С уважением.

[sitecreator]

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

[EvzeNsx]

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

[sitecreator]

rel="slideshow" rel="gallery"

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

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

[oporto]

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" />

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

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

[Surfer7]

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

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

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

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

false

[samsonio]

Друзья, начал ставить 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>

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