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

Статус
В этой теме нельзя размещать новые ответы.

AndryuKara

Писатель
Регистрация
25 Апр 2009
Сообщения
8
Реакции
0
Всем здравствуйте!
Ситуация следующая (для 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>

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

Всем огромное спасибо за помощь.
 
вот как сделано у меня
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> )

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

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

HTML:
/products_pictures/{$all_product_pictures[i]}

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



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

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

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

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

Красиво получилось! Не поделишься - как это сделать?
 
Решение вопроса поднятого в качестве темы:

Извините, что не сразу ответил, был в отпуске :)
В файле 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];
						}
					}
				}
У меня все это дело работает при условии что загружаются только первая и вторая фотография, то есть третьей фотографии ни для какого товара у меня не залито. Залита только первая и вторая.
В решении этого вопроса очень помог вот этот пост: Для просмотра ссылки Войди или Зарегистрируйся
Всем большое спасибо и удачи!
 
нашел решение - выкладывай ) (другим думаю интересно будет также)
я тебе предлагал этот же вариант (только у меня тут сделано не на ШС)
*** скрытое содержание ***

глянь мой вариант. основано на технологии Highslide. Мне почему-то этот вариант более понравилса. хотя это все уже на этом форуме поднималось. Если нравится напиши, помогу прикрутить.
 
!!!

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