Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

Разница:

......................................... FancyBox......................................................................Стандартный ThickBox

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


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

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

<script type="text/javascript" src="catalog/view/javascript/jquery/thickbox/thickbox-compressed.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />

Меняем их на эти:


<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script><script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" /><script type="text/javascript">$(document).ready(function() {$("a.thickbox").attr('rel','group');$("a.thickbox img").parent().fancybox({'overlayShow' : true, //* false - не "затемнять" окно.'speedIn' : 600, //* скорость появления картинки'speedOut' : 500, //* скорость исчезания картинки'transitionIn': 'elastic', //* анимации 'fade', 'elastic' и 'none''transitionOut': 'elastic', //* анимации 'fade', 'elastic' и 'none''easingIn' : 'easeOutBack','easingOut' : 'easeInBack'});});</script>

Всё. Изображение

+ Выводим номер текущей и общее число картинок. (В ColorBox эта функция по умолчанию)
+ Добавлены новые функции.
+ Отображение "Privacy Policy" и "Terms & Conditions".
+ У разных изображений разный размер. (Из темы про "ColorBox")

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

  • +1 12
Надіслати
Поділитися на інших сайтах

Вдруг свободное время будет, может быть в своём стиле разберётесь вот с этим.

У меня свободного времени, даже больше чем Вы можете себе представить ))))

И с этим я уже разобрался, только прикрутить это не куда. Интересно, но, не кошерно выглядит.

  • +1 1
Надіслати
Поділитися на інших сайтах

У меня свободного времени, даже больше чем Вы можете себе представить ))))

И с этим я уже разобрался, только прикрутить это не куда. Интересно, но, не кошерно выглядит.

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

Либо просто кнопка в определённом месте с надписью, к примеру, «Популярные товары» и нажав на неё предложенное во втором посте =]

Надіслати
Поділитися на інших сайтах


FancyBox не плох. Но названия картинок только на латинице кажет: Apple -OK, а вот если Эппл не показывает :unsure:

а у меня и русские буквы показывает

Надіслати
Поділитися на інших сайтах


FancyBox не плох. Но названия картинок только на латинице кажет: Apple -OK, а вот если Эппл не показывает :unsure:

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

У solus явно, что то с кодировкой... :(

Изображение

Надіслати
Поділитися на інших сайтах

пробовал установить но результат немного другой....открывает картинку отдельно...то есть на странице сама картинка и более ничего... картинка в углу располагается в полном размере

скачал jquery.fancybox-1.3.4

что не так??

Надіслати
Поділитися на інших сайтах


пробовал установить но результат немного другой....открывает картинку отдельно...то есть на странице сама картинка и более ничего... картинка в углу располагается в полном размере

скачал jquery.fancybox-1.3.4

что не так??

Что то не то сделали... Либо не там строки вставили...

И ещё, какие у вас скрипты (помимо этого) в файле header.tpl?

Надіслати
Поділитися на інших сайтах

Что то не то сделали... Либо не там строки вставили...

И ещё, какие у вас скрипты (помимо этого) в файле header.tpl?

вот мой код 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; ?>">
<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/fancybox/jquery.easing-1.3.pack.js"
></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"
></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css"
 media="screen" />
<script type="text/javascript">
$(document).ready(function() {
   $("a.thickbox").attr('rel','group');
   $("a.thickbox img").parent().fancybox({
 	'overlayShow' : true, //* false - не "затемнять" окно.
 	'speedIn' : 600, //* скорость появления картинки
 	'speedOut' : 500, //* скорость исчезания картинки
 	'transitionIn': 'elastic', //* анимации 'fade', 'elastic' и 'none'
 	'transitionOut': 'elastic', //* анимации 'fade', 'elastic' и 'none'
      'easingIn' : 'easeOutBack',
      'easingOut' : 'easeInBack'
   });   	
});
</script>
<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>
<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>



<script type="text/javascript">
reformal_wdg_w    = "713";
reformal_wdg_h    = "460";
reformal_wdg_domain    = "madeinchina";
reformal_wdg_mode    = 0;
reformal_wdg_title   = "Первый Китайский Магазин в Молдове";
reformal_wdg_ltitle  = "Оставьте свой отзыв";
reformal_wdg_lfont   = "";
reformal_wdg_lsize   = "";
reformal_wdg_color   = "#bab9b6";
reformal_wdg_bcolor  = "#aaabad";
reformal_wdg_tcolor  = "#FFFFFF";
reformal_wdg_align   = "left";
reformal_wdg_charset = "utf-8";
reformal_wdg_waction = 1;
reformal_wdg_vcolor  = "#9FCE54";
reformal_wdg_cmline  = "#E0E0E0";
reformal_wdg_glcolor  = "#105895";
reformal_wdg_tbcolor  = "#FFFFFF";
reformal_wdg_tcolor_aw4  = "#3F4543";
 
reformal_wdg_bimage = "7688f5685f7701e97daa5497d3d9c745.png";
 
</script>

<script type="text/javascript" language="JavaScript" src="http://reformal.ru/tabn2v4.js"></script><noscript><a href="http://madeinchina.reformal.ru">Первый Китайский Магазин в Молдове feedback</a> <a href="http://reformal.ru">на платформе <img src="http://widget.reformal.ru/i/reformal_ru.png" /></a></noscript>


</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[i]) {
				var urlVarPair = urlVars[i].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> 
Змінено користувачем 19th
добавлен тэг сполйер
Надіслати
Поділитися на інших сайтах


вот ссылка магазина

выберите любой товар и посмотрите низ страницы....это после замены родного кода на ваш

также попробуйте увеличить картинку :unsure:

Журнал ошибок чист

Надіслати
Поділитися на інших сайтах


вот мой код header.tpl

Совет.

1. Зайдите на эту страницу www.realcode.ru

2. Откройте файл со стилями, который идёт в архиве OC (по умолчанию). Выделите весь текст и вставьте в левое окно.

3. Содержимое Вашего stylesheet.css скопируйте в правое.

4. Увидите разницу, и найдёте где ошибка.

Изображение

Скрин - так, для примера.

вот ссылка магазина

Странно у Вас вкладки отображаются... Зачем тогда они вообще нужны - если их не открыть? Или это после установки FancyBox так вышло?

Попробуйте (на время) "закомментировать" все скрипты - которые Вы добавили в файл header.tpl от себя. Посмотрите что получилось...

[Добавлено]

Кстати, а почему у Вас нет этой строки в header.tpl:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
Змінено користувачем tim21701
Надіслати
Поділитися на інших сайтах

на счет вкладок... они перестали работать после установки фанси...

ок...попробую сравнить и посмотреть что не так...

спс за ваши труды

отпишусь по результатам...))

Надіслати
Поділитися на інших сайтах


А можно ли вывести номер текущей и общее число картинок?

Можно...

Поставьте запятую после строки:

'easingOut' : 'easeInBack'
И добавьтеэтот код:

'titlePosition' 	: 'over',
'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Изображение ' + (currentIndex + 1) + ' из ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
				}
Изображение

Значение поля 'over' в строке 'titlePosition' можете поменять на: 'inside' или 'outside'.

И ещё...

Если, Вы хотите изменить цвет затемнения страницы - во время просмотра, добавьте эти две строки:

'overlayColor'        : '#7fc7ff', //* Цвет затемнения
 'overlayOpacity'    : 0.6, //* Сила затемнения, (допустимые значения от 0.1 до 1) 0.1 - самое слабое, 1 - самое сильное
  • +1 2
Надіслати
Поділитися на інших сайтах

всё отлично работает...

проблема была ламерская...распаковал архив и закинул его полностью...а надо было лишь папку фанси...;)

с меня плюсик...))

P.S. спсасибо за www.realcode.ru ...удобный и полезный сервис

Змінено користувачем fantasm
Надіслати
Поділитися на інших сайтах


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

centerOnScroll - Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.

padding - отступ контента (фотографий) от краев окна;

imageScale - принимает значение true - контент (изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента;

zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;

zoomSpeedIn - скорость анимации в мс при увеличении фото;

zoomSpeedOut - скорость анимации в мс при уменьшении фото;

zoomSpeedChange - скорость анимации в мс при смене фото;

frameWidth - ширина окна, px;

frameHeight - высота окна, px;

hideOnContentClick - Если true закрывает окно по клику по любой его точке (кроме элементов навигации).

Установка: "функция" : значение, (К примеру: "frameWidth" : 400,)

Надіслати
Поділитися на інших сайтах

tim21701, подскажите, пожалуйста, как бороться с тем, что после установки FancyBox ломается отображение документа "Политика безопасности" (по дефолту), который при регистрации личного кабинета всплывал по клику в ThickBoxе.

Чтобы было понятнее, приведу пример: http://6color.octemplate.ru/index.php?route=account/create Если кликнуть на фразу "Политика Безопасности" (внизу, где написано "Я прочитал раздел "Политика Безопасности" и согласен с правилам") - документ всплывает в лайтбоксе (тикбоксе). А после установки FancyBox он открывается в том же окне и очень некрасиво (чисто текст на белом фоне и никаких признаков сайта :( )...

То же самое творится и на странице оформления покупки без регистрации кабинета.

Что надо прописать в файле catalog/language/russian/account/create.php вместо class="thickbox"? Или где-то в другом месте надо править?

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.