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

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

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

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

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


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

спасибо!

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

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

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

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

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


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

Уважаемый tim21701!

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

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

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

С уважением.

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

2 tim21701

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

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

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

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

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

С уважением.

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


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

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

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

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

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

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

scalePhotos: true,

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

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

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

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


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

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

Можно! (даже нужно!) ;) Открываете файл 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

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


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

Вот, ещё несколько опций, работающих с 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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

  • +1 1

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


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

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

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

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


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

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

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

  • +1 2

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


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

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

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


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

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

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

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


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

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

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

ае)

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

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

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


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

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

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

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

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

С уважением.

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


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

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

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


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

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

  • +1 1

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


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

rel="slideshow" rel="gallery"

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

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

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


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

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

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

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

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


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

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

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

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

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

false

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


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

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

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

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


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

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

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

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

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

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

Войти

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

Войти

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

    • От 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.