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

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


Recommended Posts

...подскажите, пожалуйста, как бороться с тем, что после установки FancyBox ломается отображение документа "Политика безопасности"...

Добавьте этот код:

$("a.thickbox").fancybox({
      'speedIn' : 600,
      'speedOut' : 500,
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'easingIn' : 'easeOutBack',
      'easingOut' : 'easeInBack',
      'autoDimensions': false,
      'width': 800,
      'height': 480,
      'hideOnContentClick': true,
      'titleShow': false
   });
Тогда и "Политика безопасности" (Privacy Policy) будет открываться так же - как и изображения товара.

Пример:

Изображение

...приведу пример: http://6color.octemp...=account/create...

Что то, я на этом сайте, вообще FancyBox не вижу. ;)
  • +1 1
Надіслати
Поділитися на інших сайтах

так там и не должно быть fancy.

приводили пример сайта, где "всплывает" дока, которая ломается при установке fancy.

так что все в поряде.

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

так там и не должно быть fancy.

приводили пример сайта, где "всплывает" дока, которая ломается при установке fancy.

Именно так.

tim21701, спасибо.

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


tim21701, после добавления вот этого кода:

Добавьте этот код:

$("a.thickbox").fancybox({
      'speedIn' : 600,
      'speedOut' : 500,
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'easingIn' : 'easeOutBack',
      'easingOut' : 'easeInBack',
      'autoDimensions': false,
      'width': 800,
      'height': 480,
      'hideOnContentClick': true,
      'titleShow': false
   });

пропадает название товара:

post-5108-0-16013600-1300892258_thumb.jpg

Как сие исправить?

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


У меня непонятно как и почему случился глюк - открываются сразу окна и FancyBox и ThickBox. Причем FancyBox работал после установки нормально более недели. Попытки править header.php не приносят результата.

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


Вроде разобрался. С тегами комментариев напутал.

Ага. Но лучше их вообще удалить. Если только Вы не планируете thickbox потом назад вернуть... ;)

<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" />
Надіслати
Поділитися на інших сайтах

Все починил и "политика безопасности" выдается в нормальном окне, но никак не смог добиться выравнивая текста по левому краю :(

Выравнивая текста по левому краю, пока не осилил... :(
Надіслати
Поділитися на інших сайтах

Выравнивая текста по левому краю, пока никто не осилил... Даже на офф-форуме ОпенКарта :(

В ThickBox выдается с выравниваем по левому. Ковырялся в css FancyBox, но без успеха. Возможно нужен комплекс изменений, в том числе и в header.php
Надіслати
Поділитися на інших сайтах


...после установки FancyBox для домена постоянно сыпятся ошибки:

No such file or directory), ..."GET /fancybox/fancy_shadow_ne.png...
No such file or directory

В архиве есть папка fancybox, в ней расположены все необходимые для скрипта файлы изображения (в формате .png). Убедитесь в этом.

Если они там есть (но ошибка осталась) откройте файл со стилями fancybox: catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css и (в самом конце) увидите путь, для ваших 3-х файлов "fancy_shadow_..." - которые он не может найти, и пропишите к ним "абсолютные" пути.

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

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

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

Напишите где, Вы хотите видеть это. Я реализую, нет проблем...
Надіслати
Поділитися на інших сайтах

No such file or directory

В архиве есть папка fancybox, в ней расположены все необходимые для скрипта файлы изображения (в формате .png). Убедитесь в этом.

Если они там есть (но ошибка осталась) откройте файл со стилями fancybox: catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css и (в самом конце) увидите путь, для ваших 3-х файлов "fancy_shadow_..." - которые он не может найти, и пропишите к ним "абсолютные" пути.

К сожалению, это не помогло. Так как начальная часть пути все-равно подставляется разная в зависимости от категории, т.е. при переходе с главной все нормально, а если из категории, то уже нет. Ошибка возникает только в IE.
Надіслати
Поділитися на інших сайтах


Уважаемые гуру, у меня вопрос, для вас, наверное, элементарный.

Как убрать белую подложку для картинок (изображений). Абсолютно везде.

Сейчас выглядит так

Изображение

ИМХО ужасно уродливо, а хотелось бы, прозрачный фон, или наследующий из соответствующего блока.

Заранее БОЛЬШОЕ спасибо.

Если где то уже обсуждалось - простите, я попробовал поискать, но, видимо, неправильно формирую запрос.

Блин, поставил fancybox - появилась трабла, а конкретно - при увеличении изображения оно открывается не в popp-up, а в том же окне во весь экран, без возможности перехода к след. изображению, без названия и т.п. Не закрывается по по клику, не закрывается нажатием ESC.

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


...Как убрать белую подложку для картинок (изображений). Абсолютно везде....

Самый простой способ, загружать изображения Вашего товара в формате *png у которых выставлять "transparent background" в любом графическом редакторе.

Тогда "подложка" будет прозрачной абсолютно везде.

Пример:

Изображение

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

Тим, спасибо. Что то я торможу.

Можно еще получить Вашу консультацию по второму вопросу.

Блин, поставил fancybox - появилась трабла, а конкретно - при увеличении изображения оно открывается не в popp-up, а в том же окне во весь экран, без возможности перехода к след. изображению, без названия и т.п. Не закрывается по по клику, не закрывается нажатием ESC.

Ниже мой header.tpl

[<?php if (!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" />
<!--[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.4.3.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/fadeslideshow.js"></script>
<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({
   'padding' 7,
   'imageScale' : true,
   'frameHeight' : 1024,
   'frameHeight' : 860,
   'hideOnContentClick' : true,
    	'overlayShow' : true,
    	'speedIn' : 600,
    	'speedOut' : 500,
    	'transitionIn': 'elastic',
    	'transitionOut': 'elastic',
  	'easingIn' : 'easeOutBack',
  	'easingOut' : 'easeInBack',
  	'titlePosition' : 'outside',
  	'titleFormat' : 'title',
{ 
return '<span id="fancybox-title-over">Изображение ' + (currentIndex + 1) + ' из ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
}
});
</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>
<script type="text/javascript">
$(function(){
if($('#slideshow').length === 1)
var mygallery=new fadeSlideShow({
   wrapperid: "slideshow",
   dimensions: [570, 200],
   imagearray: [
  	["catalog/view/theme/default10/image/slide1.png", "http://lafloria.000a.biz/store/index.php?route=common/home&theme=default10", "_self", ""],
  	["catalog/view/theme/default10/image/slide2.png", "http://lafloria.000a.biz/store/index.php?route=common/home&theme=default10", "_self", ""],
  	["catalog/view/theme/default10/image/slide3.png", "http://lafloria.000a.biz/store/index.php?route=common/home&theme=default10", "_self", ""]
   ],
   displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
   persist: true,
   fadeduration: 500,
   descreveal: "ondemand",
   togglerid: ""
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
    	$("#pageflip").hover(function() {
            	$("#pageflip img , .msg_block").stop()
                    	.animate({
                            	width: '307px', 
                            	height: '319px'
                    	}, 500); 
            	} , function() {
            	$("#pageflip img").stop() 
                    	.animate({
                            	width: '50px', 
                            	height: '52px'
                    	}, 220);
            	$(".msg_block").stop() 
                    	.animate({
                            	width: '50px', 
                            	height: '50px'
                    	}, 200);
    	});
});
</script>
</head>
<body>
<div id="pageflip">
  <a href="https://myopencart.com/download.php">
  <img src="catalog/view/theme/BookStore/image/page_flip.png" alt="Качаем магазин" />
  <span class="msg_block">Скачать русский OpenCart</span>
  </a>
</div>
<div id="container">
<div id="header">
  <div class="div1">
	<div class="div2">
  	<?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>
	<div class="div3"><a href="<?php echo str_replace('&', '&', $special); ?>" style="background-image: url('catalog/view/theme/default10/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default10/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&', $contact); ?>" style="background-image: url('catalog/view/theme/default10/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&', $sitemap); ?>" style="background-image: url('catalog/view/theme/default10/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>
	<div class="div4">
			<div class="left"></div>
			<div class="right"></div>
		<div class="center">
			<a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
			<?php if (!$logged) { ?>
			<a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
			<?php } else { ?>
			<a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
			<?php } ?>
			<a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a>
		</div>
	</div>	
	<div class="div5">
  	<div class="left"></div>
  	<div class="right"></div>
  	<div class="center">
    	<div id="search">
      	<div class="div8"><?php echo $entry_search; ?> </div>
      	<div class="div9">
        	<?php if ($keyword) { ?>
        	<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
        	<?php } else { ?>
        	<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
        	<?php } ?>
        	<select id="filter_category_id">
          	<option value="0"><?php echo $text_category; ?></option>
          	<?php foreach ($categories as $category) { ?>
          	<?php if ($category['category_id'] == $category_id) { ?>
          	<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
          	<?php } else { ?>
          	<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
          	<?php } ?>
          	<?php } ?>
        	</select>
      	</div>
      	<div class="div10">  <a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a> <a href="<?php echo str_replace('&', '&', $advanced); ?>"><?php echo $text_advanced; ?></a></div>
    	</div>
  	</div>
	</div>
  </div>
  <div class="div6">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center">
  	<?php if (isset($common_error)) { ?>
  	<div class="warning"><?php echo $common_error; ?></div>
  	<?php } ?>
  	<div id="breadcrumb">
    	<?php foreach ($breadcrumbs as $breadcrumb) { ?>
    	<?php echo $breadcrumb['separator']; ?><a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><?php echo $breadcrumb['text']; ?></a>
    	<?php } ?>
  	</div>
  	<div class="div7">
    	<?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>
	</div>
  </div>
</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>
Надіслати
Поділитися на інших сайтах


Самый простой способ, загружать изображения Вашего товара в формате *png у которых выставлять "transparent background" в любом графическом редакторе.

Только надо сразу предупредить, что файлы с расширением *png весят в несколько раз больше оптимизированных файлов с расширением *jpg. А это чревато увеличением в разы кол-ва необходимого места под сайт, плюс во столько же раз возрастает время подгрузки картинок.

madbadjack, Вам решать, что лучше. Сделать, чтобы на Ваш взгляд было красиво, но медленно и тяжеловесно, или оставить, как есть. ;)

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


Только надо сразу предупредить, что файлы с расширением *png весят в несколько раз больше оптимизированных файлов с расширением *jpg. А это чревато увеличением в разы кол-ва необходимого места под сайт, плюс во столько же раз возрастает время подгрузки картинок.

madbadjack, Вам решать, что лучше. Сделать, чтобы на Ваш взгляд было красиво, но медленно и тяжеловесно, или оставить, как есть. ;)

Ну по поводу размеров я в курсе. Для меня это не очень критично. Я предполагаю, что фоток будет не более 500-600 на круг. Размер в 150 (jpg) или 450 (png) Кб увеличит общий размер директивы до 200 метров (максимум), останется еще 4,8 гига на остальное :) Что касается скорости загрузки, то если у человека медленно грузится 400 кило, то ему надо что то решать с интернет-провайдером. С учетом того, что книги будут стоить не менее 7-8 тыс. руб./шт., (судя по показанному мне прайс-листу) малоимущих посетителей не предполагается.
Надіслати
Поділитися на інших сайтах


Мда...к сожалению, придется снести, ибо подсказки я видимо уже не получу :(

Можно пример Вашего "глюка" посмотреть? Дайте ссылку..
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Вхід

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

Вхід зараз

×
×
  • Створити...

Important Information

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