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

tim21701 · 13 березня 2011

Итак, вместо стандартного 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

gdi31 · 13 березня 2011

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

tim21701 · 13 березня 2011

В 13.03.2011 в 16:24, 'gdi31' сказав:
Вдруг свободное время будет, может быть в своём стиле разберётесь вот с этим.

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

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

senty · 13 березня 2011

В 13.03.2011 в 17:52, 'tim21701' сказав:

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

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

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

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

userff · 13 березня 2011

tim21701 спасибо за fancybox

JohnPingvin · 14 березня 2011

Большое спасибо : )

Smallbear · 14 березня 2011

спасибо,очень симпатично получилось.

А может еще какие-то варианты есть,не подскажите где можно посмотреть?

solus · 14 березня 2011

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

Smallbear · 14 березня 2011

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

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

tim21701 · 15 березня 2011

В 14.03.2011 в 22:49, 'Smallbear' сказав:

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

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

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

Storm · 15 березня 2011

tim21701, спасибо! Как раз то, что надо :)

ergil · 15 березня 2011

tim21701, большое спасибо!!!

ergil · 15 березня 2011

А можно ли вывести номер текущей и общее число картинок? В виде 1 / 4, например.

fantasm · 15 березня 2011

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

скачал jquery.fancybox-1.3.4

что не так??

tim21701 · 15 березня 2011

В 15.03.2011 в 19:48, 'fantasm' сказав:

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

скачал jquery.fancybox-1.3.4

что не так??

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

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

fantasm · 15 березня 2011

В 15.03.2011 в 19:53, 'tim21701' сказав:

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

И ещё, какие у вас скрипты (помимо этого) в файле 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>

Змінено 16 березня 2011 користувачем 19th
добавлен тэг сполйер

fantasm · 15 березня 2011

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

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

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

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

tim21701 · 15 березня 2011

Цитата
вот мой код header.tpl

Совет.

Показати вміст

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

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

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

[Добавлено]

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

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

Змінено 15 березня 2011 користувачем tim21701

fantasm · 16 березня 2011

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

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

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

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

solus · 16 березня 2011

В 15.03.2011 в 19:18, 'ergil' сказав:
А можно ли вывести номер текущей и общее число картинок? В виде 1 / 4, например.

присоединяюсь к вопросу :rolleyes:

tim21701 · 16 березня 2011

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

Можно...

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

'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 - самое сильное

fantasm · 16 березня 2011

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

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

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

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

Змінено 16 березня 2011 користувачем fantasm

tim21701 · 16 березня 2011

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

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

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

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

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

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

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

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

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

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

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

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

Basfett · 17 березня 2011

Большое спасибо за Fancy.

А не подскажете, как изменить стиль навигации и подписи? Это вообще возможно?

monax · 21 березня 2011

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

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

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

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

Вхід

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

Recommended Posts

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

Надіслати

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

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

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

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information