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

Тема в разделе "Shop-script", создана пользователем AndryuKara, 23 июл 2009.

Статус темы:
Закрыта.
  1. AndryuKara

    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>

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

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

    13zone

    Регистр.:
    22 ноя 2008
    Сообщения:
    190
    Симпатии:
    45
    вот как сделано у меня
    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> )

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

    AndryuKara Писатель

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

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

    HTML:
    /products_pictures/{$all_product_pictures[i]}
    а вот адрес БОЛЬШОЙ КАРТИНКИ, соответсвующей этому превью я никак не могу сообразить как его прописать.
     
  4. AndryuKara

    AndryuKara Писатель

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

    http://prezident-mebel.ru/index.php?productID=109

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

    13zone

    Регистр.:
    22 ноя 2008
    Сообщения:
    190
    Симпатии:
    45
    нашел решение - выкладывай ) (другим думаю интересно будет также)

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

    http://13zone.freehostia.com/berkly-2/catalog.html
     
  6. djslap

    djslap

    Регистр.:
    29 сен 2007
    Сообщения:
    193
    Симпатии:
    2
    Красиво получилось! Не поделишься - как это сделать?
     
  7. AndryuKara

    AndryuKara Писатель

    Регистр.:
    25 апр 2009
    Сообщения:
    8
    Симпатии:
    0
    Решение вопроса поднятого в качестве темы:

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

    sasa82 Постоялец

    Регистр.:
    10 мар 2009
    Сообщения:
    109
    Симпатии:
    5
    глянь мой вариант. основано на технологии Highslide. Мне почему-то этот вариант более понравилса. http://www.santehnika04.ru/index.php?productID=118 хотя это все уже на этом форуме поднималось. Если нравится напиши, помогу прикрутить.
     
  9. dmonco

    dmonco Писатель

    Регистр.:
    25 апр 2009
    Сообщения:
    7
    Симпатии:
    2
    !!!

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