Очень нужна помощь((((

[sarik1986]

как сделать так чтобы картинки товара не открывались в Popup окошке а там же где основная картинка.пожалуйста помогите.очень нужно это сделать.у меня Opencart 1.5.1

[Fizik87]

На одном из сайтов я делал так:

$(document).ready(function() {
$(".fancybox").click(function(){
	$('.product_mini_img a').removeClass('active_i');
	$(this).addClass('active_i');
	var attr_a = $(this).attr('href');
	var old_img = $("#big_image img").attr('src');
	$('a.active_i img').fadeOut(200).attr('src',old_img).fadeIn(200);
	$('a.active_i').attr('href',old_img);
	$("#big_image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
	$("#big_image a").attr('href',attr_a);
	return false;
});
});

Измени только классы и id на те что у тебя в блоках и все...

[sarik1986]

На одном из сайтов я делал так:

$(document).ready(function() {
$(".fancybox").click(function(){
	$('.product_mini_img a').removeClass('active_i');
	$(this).addClass('active_i');
	var attr_a = $(this).attr('href');
	var old_img = $("#big_image img").attr('src');
	$('a.active_i img').fadeOut(200).attr('src',old_img).fadeIn(200);
	$('a.active_i').attr('href',old_img);
	$("#big_image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
	$("#big_image a").attr('href',attr_a);
	return false;
});
});

Измени только классы и id на те что у тебя в блоках и все...

спасибо огромное.только на каком файле это изменить?на product.tpl?

[Fizik87]

да в product.tpl

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

[sarik1986]

да в product.tpl

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

извини пожалуйста за тупейший вопрос а где там id и классы?как узнать какие они у меня и где именно менять в коде?спасибо заранее

[Fizik87]

Это я скинул яваскрипт...

его нужно просто вставить в файл product.tpl

Если скинете ссылку на магазин сам приобразую в тоот вид какой нужен...

[sarik1986]

Это я скинул яваскрипт...

его нужно просто вставить в файл product.tpl

Если скинете ссылку на магазин сам приобразую в тоот вид какой нужен...

спасибо Вам огромное.дай бог Вам счастья.вот ссылка на сайт. http://www.mystore.az

[sarik1986]

ответа нет(((

[Fizik87]

как сделаю выложу...

там то делов на пару минут, но эти пару минут вначале найти нужно...

[Fizik87]

Этот скрипт попробуй вставить в файл product.tpl

<script type="text/javascript">
$(document).ready(function() {
	$("ul.image-additional .fancybox").click(function(){
		$('ul.image-additional a').removeClass('active_i');
		$(this).addClass('active_i');
		var attr_a = $(this).attr('href');
		var old_img = $(".image img").attr('src');
		$('a.active_i img').fadeOut(200).attr('src',old_img).fadeIn(200);
		$('a.active_i').attr('href',old_img);
		$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
		$(".image a").attr('href',attr_a);
		return false;
	});
});
</script>

Поидеи должен сразу заработать

[sarik1986]

Этот скрипт попробуй вставить в файл product.tpl

<script type="text/javascript">
$(document).ready(function() {
	$("ul.image-additional .fancybox").click(function(){
		$('ul.image-additional a').removeClass('active_i');
		$(this).addClass('active_i');
		var attr_a = $(this).attr('href');
		var old_img = $(".image img").attr('src');
		$('a.active_i img').fadeOut(200).attr('src',old_img).fadeIn(200);
		$('a.active_i').attr('href',old_img);
		$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
		$(".image a").attr('href',attr_a);
		return false;
	});
});
</script>

Поидеи должен сразу заработать

Спасибо.сделал.но не совсем получилось.если не сложно посмотрите что там выходит.открываются картинки там где надо.но еще и все картинки открываются внизу в увелеченном виде и еще fancybox тоже открывается.вообщем каша какая то..как исправить это можно?может где то в коде надо отключить фансибокс.и как делать чтоб картинки просто менялись там а не внизу все выходили?((((

[Fizik87]

Для тега "a" которы находиться внутри <div class="image"> измени класс,допустим, на fancybox2 и параметр rel тоже

В стилях нужно дописать:

.image {
	text-align:center;
}
.image img {
	width:228px;
	height:auto;
}
.image-additional img {
	width:74px;
	height:74px;
}

И

$('.fancybox').fancybox({cyclic: true});

Заменить на

$('.fancybox2').fancybox({cyclic: true});

[sarik1986]

Для тега "a" которы находиться внутри <div class="image"> измени класс,допустим, на fancybox2 и параметр rel тоже

В стилях нужно дописать:

.image {
	text-align:center;
}
.image img {
	width:228px;
	height:auto;
}
.image-additional img {
	width:74px;
	height:74px;
}

И

$('.fancybox').fancybox({cyclic: true});

Заменить на

$('.fancybox2').fancybox({cyclic: true});

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

[Fizik87]

Я незаметил что и на других страницах у тебя класс image есть

Чтобы на главной странице не увеличивались

.image img

замени на

.product-info .image img

только почему то маленкие картинки тоже меняются((((

А что они не должны меняться?

[sarik1986]

А что они не должны меняться?

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

[sarik1986]

А что они не должны меняться?

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

[Fizik87]

Попробуй так

<script type="text/javascript">
	$(document).ready(function() {
		$("ul.image-additional .fancybox").click(function(){
			$('ul.image-additional a').removeClass('active_i');
			$(this).addClass('active_i');
			var attr_a = $(this).attr('href');
			$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
			$(".image a").attr('href',attr_a);
			$('.fancybox2').fancybox({cyclic: true});
			return false;
		});
	});
</script>

[sarik1986]

Попробуй так

<script type="text/javascript">
	$(document).ready(function() {
		$("ul.image-additional .fancybox").click(function(){
			$('ul.image-additional a').removeClass('active_i');
			$(this).addClass('active_i');
			var attr_a = $(this).attr('href');
			$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);
			$(".image a").attr('href',attr_a);
			$('.fancybox2').fancybox({cyclic: true});
			return false;
		});
	});
</script>

ты просто гений....спасибо тебе брат огромное.ты мне оочень помог.последняя просьба и я больше не буду надоедать. я сделал вместо .click .hover чтоб при наведении уже картинки менялись.а можно сделать так чтоб когда мышка на картинке чтоб она не мигала так долго.чтоб просто появилась картинка и все.ато картинки у меня fade in fade out даже смотреть невозможно))))спасибо

[Fizik87]

$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);

в этой строчке напиши просто

$(".image img").attr('src',attr_a);

[sarik1986]

$(".image img").fadeOut(200).attr('src',attr_a).fadeIn(200);

в этой строчке напиши просто

$(".image img").attr('src',attr_a);

теперь все просто суппеер.)))спасибо

[Fizik87]

Посмотрел что у тебя получилось...

Добавь еще следующие параметры:

в css для класса image

.image {
	min-height:230px;
}

и в js допиши:

	$("#image-additional a").click(function(){
		return false;
	});