Замена картинки без перезагрузки страницы

AndryuKara · 23 Июл 2009

Всем здравствуйте!
Ситуация следующая (для Shop Script), фотографии товара - для каждого изображения залито ТОЛЬКО 2 фотографии: превью и большая фотка. При клике на превью страница перезагружается и в качестве главной высвечивается большая фотография. Есть скрипт, выполняющий смену картинок без перезагрузки:

PHP:

<script language='javascript'>
function show(path)
{ldelim}
    if (obj = document.getElementById('pic')) {ldelim}
        obj.src = path;
    {rdelim}
{rdelim}
</script>
<a href="#" onClick="show('images\big.jpg'); return false;"><img src="images/prevyu.jpg}"</a>

<img id="pic" src="images/1.jpg">

В файле product_detalied.tpl.html

<a href="#" onClick="show('????'); return false;"><img src="products_pictures/{$all_product_pictures}"></a>

Что вставить вместо '????'

Всем огромное спасибо за помощь.

13zone · 23 Июл 2009

вот как сделано у меня

HTML:

<td width="51" align="left" valign="top" style="padding:93px 0px 0px 0px;">
				<!--<img style="cursor: hand;" onMouseOver="show_img2();" onMouseOut="show_img1();"; src="images/catalog_color_panel.gif" alt="">-->
				<img class="imgover" src="images/color_gold.gif" onClick="show_img1();" alt=""><br>
				<img class="imgover" src="images/color_black.gif" onClick="show_img2();" alt=""><br>
				<img class="imgover" src="images/color_darkblue.gif" onClick="show_img3();" alt=""><br>
				<img class="imgover" src="images/color_orange.gif" onClick="show_img4();" alt=""><br>
				<img class="imgover" src="images/color_green.gif" onClick="show_img5();" alt=""><br>
				<img class="imgover" src="images/color_red.gif" onClick="show_img6();" alt=""><br>				</td>
				<!-- / Цветовая панель -->
								<!-- Большая картинка -->
				<td width="91" align="left" valign="top" style="padding:0px 0px 0px 10px;">
								<div id="img1"><img src="images/flomastercos-03.jpg" alt="" width="50"></div>
				<div id="img2" style="display:none;"><img src="images/flomastercos-04.jpg" alt="" width="50"></div>
				<div id="img3" style="display:none;"><img src="images/flomastercos-06.jpg" alt="" width="50"></div>
				<div id="img4" style="display:none;"><img src="images/flomastercos-01.jpg" alt="" width="50"></div>
				<div id="img5" style="display:none;"><img src="images/flomastercos-02.jpg" alt="" width="50"></div>
				<div id="img6" style="display:none;"><img src="images/flomastercos-05.jpg" alt="" width="40"></div>								</td>

+ подключаем доп ява скрипт в старницу

Код:

function show_img1()
{
	document.all["img1"].style.display = "";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "none";
			document.all["img7"].style.display = "none";
	
	document.all["link1"].style.display = "";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "none";	
		document.all["link6"].style.display = "none";
	document.all["link7"].style.display = "none";	
}

function show_img2()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "none";
	document.all["img7"].style.display = "none";

	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "none";
		document.all["link6"].style.display = "none";
	document.all["link7"].style.display = "none";

}

function show_img3()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "none";
	document.all["img7"].style.display = "none";

	
	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "none";
		document.all["link6"].style.display = "none";
	document.all["link7"].style.display = "none";

}

function show_img4()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "none";

	document.all["img7"].style.display = "none";

	
	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "";
	document.all["link5"].style.display = "none";
		document.all["link6"].style.display = "none";
			document.all["link7"].style.display = "none";
	
}

function show_img5()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "";
		document.all["img6"].style.display = "none";
			document.all["img7"].style.display = "none";
	
	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "";
		document.all["link6"].style.display = "none";
			document.all["link7"].style.display = "none";
}

function show_img6()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "";
			document.all["img7"].style.display = "none";
	
	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "none";
		document.all["link6"].style.display = "";
			document.all["link7"].style.display = "none";
}
function show_img7()
{
	document.all["img1"].style.display = "none";
	document.all["img2"].style.display = "none";
	document.all["img3"].style.display = "none";
	document.all["img4"].style.display = "none";
	document.all["img5"].style.display = "none";
		document.all["img6"].style.display = "none";
			document.all["img7"].style.display = "";
	
	document.all["link1"].style.display = "none";
	document.all["link2"].style.display = "none";
	document.all["link3"].style.display = "none";
	document.all["link4"].style.display = "none";
	document.all["link5"].style.display = "none";
		document.all["link6"].style.display = "none";
			document.all["link7"].style.display = "";
}


function initRollovers() { 
 if (!document.getElementById) return 
  
 var aPreLoad = new Array(); 
 var sTempSrc; 
 var aImages = document.getElementsByTagName('img'); 
 
 for (var i = 0; i < aImages.length; i++) {   
  if (aImages[i].className == 'imgover') { 
   var src = aImages[i].getAttribute('src'); 
   var ftype = src.substring(src.lastIndexOf('.'), src.length); 
   var hsrc = src.replace(ftype, '_h'+ftype); 
 
   aImages[i].setAttribute('hsrc', hsrc); 
    
   aPreLoad[i] = new Image(); 
   aPreLoad[i].src = hsrc; 
    
   aImages[i].onmouseover = function() { 
    sTempSrc = this.getAttribute('src'); 
    this.setAttribute('src', this.getAttribute('hsrc')); 
   }  
    
   aImages[i].onmouseout = function() { 
    if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_h'+ftype, ftype); 
    this.setAttribute('src', sTempSrc); 
   } 
  } 
 } 
} 
 
window.onload = initRollovers;

(скопируй код, создай файл имя.js и подключи <script src="имя.js" type="text/javascript"></script> )

все нормально работает )

AndryuKara · 23 Июл 2009

Как это реализовать, когда известны адреса и названия файлов мне понятно. Мне не понятно в каком виде в цикле прописать адрес "большого" изображения.
У вас скрипт меняет изображение при НАВЕДЕНИИ на него курсором мышки и если я правильно понимаю это работает только на первых 7 фотографиях товара (а если фотографий 40?

), мне же надо чтобы изображение изменялось по клику (но страница не должна перезагружаться).

Адрес файла,который превью мне понятен это:

HTML:

/products_pictures/{$all_product_pictures[i]}

а вот адрес БОЛЬШОЙ КАРТИНКИ, соответсвующей этому превью я никак не могу сообразить как его прописать.

AndryuKara · 25 Июл 2009

Всем спасибо кто обратил внимание на мой пост

Решение нашел - 3 дня ковырялся.
Результат можно увидеть тут:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

PS: не сочтите за рекламу

13zone · 25 Июл 2009

нашел решение - выкладывай ) (другим думаю интересно будет также)

я тебе предлагал этот же вариант (только у меня тут сделано не на ШС)

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

djslap · 29 Июл 2009

AndryuKara написал(а):
Всем спасибо кто обратил внимание на мой пост
Решение нашел - 3 дня ковырялся.
Результат можно увидеть тут:

*** скрытое содержание ***

PS: не сочтите за рекламу

Красиво получилось! Не поделишься - как это сделать?

AndryuKara · 6 Сен 2009

Решение вопроса поднятого в качестве темы:

Извините, что не сразу ответил, был в отпуске

В файле product_detailed.tpl.html добавляем:

PHP:

<script language='javascript'>
function show(path)
{ldelim}
    if (obj = document.getElementById('pic')) {ldelim}
        obj.src = path;
    {rdelim}
{rdelim}
</script>

К картинке - которая высвечивается в качестве основной (у меня она "большая") добавляем:

HTML:

<img id="pic" ****>

Вышеприведенный скрипт меняет картинку без перезагрузки страницы.
Далее в этом же файле:
Там где: "{if $all_product_pictures}" - это условие при котором показываются уменьшенные копии картинок при условии их существования, адрес картинки должен иметь вид

HTML:

<img src="products_pictures/{$all_product_pictures[i]}">

Теперь в файле "includes/product_detailed.php"
строки:

PHP:

{
					if ( $picture[2] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[2]) )
						{
							$all_product_pictures[]=$picture[2];
							$all_product_pictures_id[] = $picture[0];
						}
					}
					else if ( $picture[1] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[1]) )
						{
							$all_product_pictures[]=$picture[1];
							$all_product_pictures_id[] = $picture[0];
						}
					}
				}

заменяем на:

PHP:

{
					if ( $picture[3] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[3]) )
						{
							$all_product_pictures[]=$picture[2];
							$all_product_pictures_norm[]=$picture[1];
							$all_product_pictures_id[] = $picture[0];
						}
					}
					else if ( $picture[1] != "" )
					{
						if ( file_exists("./products_pictures/".$picture[1]) )
						{
							$all_product_pictures[]=$picture[2];
						$all_product_pictures_norm[]=$picture[1];
							$all_product_pictures_id[] = $picture[0];
						}
					}
				}

У меня все это дело работает при условии что загружаются только первая и вторая фотография, то есть третьей фотографии ни для какого товара у меня не залито. Залита только первая и вторая.
В решении этого вопроса очень помог вот этот пост: Для просмотра ссылки Войди или Зарегистрируйся
Всем большое спасибо и удачи!

sasa82 · 10 Сен 2009

13zone написал(а):
нашел решение - выкладывай ) (другим думаю интересно будет также)
я тебе предлагал этот же вариант (только у меня тут сделано не на ШС)
*** скрытое содержание ***

глянь мой вариант. основано на технологии Highslide. Мне почему-то этот вариант более понравилса.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

хотя это все уже на этом форуме поднималось. Если нравится напиши, помогу прикрутить.

dmonco · 6 Дек 2010

!!!

Спасибо!!! Но чувствую без бутылки пива здесь не разобраться.
На данный момент в virtuemart стоит highslide для карточки товара. Какой туда запихнуть код, чтобы при нажатии thumbnail меняла основное изображение. Буду очень благодарен, если кто подскажет.

Замена картинки без перезагрузки страницы

AndryuKara

Писатель

13zone

Профессор

AndryuKara

Писатель

AndryuKara

Писатель

13zone

Профессор

djslap

AndryuKara

Писатель

sasa82

Постоялец

dmonco

Писатель