Господа, вашими силами! Замена основной большой картинки товара на доп. изображения

Тема в разделе "Дизайн и оформление, шаблоны", создана пользователем Injaws, 09.11.2010.

  1. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Прошу помощи добрые и умные люди! Добился большой картинки в подробном описании товара, но нужно что бы она менялась при выборе дополнительных изображений, а не всплывала в виде LightBox или отдельном окне. Нигде не мог найти решение... Если не трудно подскажите...
     
  2.  
  3. koreeckz
    Offline

    koreeckz Активист => Cпециалист <=

    Регистрация:
    03.03.2009
    Сообщения:
    422
    Симпатии:
    30
    Пол:
    Мужской
    Используйте код встроенный в flypage_images
     
  4. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Хим.... Если можно то раскрыть ответ подробнее
     
  5. Offline

    maduzer Недавно здесь

    Регистрация:
    10.11.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    пару недель назад сделал нечто подобное
    долго искал готовые решения, но в итоге пришлось самому модифицировать virtuemart...
    что то похожее, но не совсем рабочее находил на форуме virtuemart.net
     
    Последнее редактирование: 23.08.2011
  6. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Очень здорово, то что надо. Так в чем секрет, какие нужно изменения произвести?
     
  7. Offline

    maduzer Недавно здесь

    Регистрация:
    10.11.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Последнее редактирование: 10.11.2010
  8. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо, буду смотреть, отпишусь потом как получилось)
     
  9. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    это не совсем подходит, у меня получается тоже самое, открывается отдельное окна и там меняются картинки.

    Я использую тему garden_flypage.tpl (измененную)
    <td align="right" valign="top" rowspan="4"><img src="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" ><br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?></td>

    вот мой код

    Мне нужно без открытия отдельного окна. Картинки должны изменяться основной странице.
     
  10. Offline

    maduzer Недавно здесь

    Регистрация:
    10.11.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    вот так выглядит мой файл flypage.tpl.php
    Код (CODE):
    1. <script type="text/javascript">
    2. window.addEvent('domready', function() {
    3.    
    4.     $$(".vmImgThumbs a").addEvent('click', function(event){
    5.    
    6.         var largePath = this.get("href");
    7.         var largeAlt =  this.get("title");
    8.                
    9.         $("VmLargeImg").set({ 'src': largePath, 'alt': largeAlt });
    10.            
    11.         return false;
    12.     });
    13. });
    14. </script>
    15.  
    16. <table width="100%" border="0" cellspacing="0" cellpadding="0" id="product_full_desc" align="center">
    17.   <tr>
    18.     <td>
    19.         <h1><?php echo $product_name ?> <?php echo $edit_link ?></h1>
    20.     </td>
    21.   </tr>
    22.   <tr align="center">
    23.     <td class="pictures">
    24.         <!-- product images -->
    25.         <table width="255px" height="255px"><tr align="center"><td valign="middle" style="vertical-align:middle;">
    26.                 <?php echo $product_image ?>
    27.         </td></tr></table>
    28.         <div class="vmImgThumbs" align="center">
    29.         <table height="115px"><tr align="center"><td valign="middle" style="vertical-align:middle;">   
    30.             <a title="" href="http://rammobile.ru/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>">
    31.                 <img src="components/com_virtuemart/shop_image/product/<?php echo $product_thumb_image ?>" border="0" alt="">
    32.             </a>                      
    33.             <?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>          
    34.         </td></tr></table>
    35.         </div>
    36.         <!-- /product images -->       
    37.     </td>
    38.   </tr>
    39.   <tr  align="center">
    40.     <td align="center"><?php echo $addtocart ?></td>
    41.   </tr>
    42.   <tr>
    43.     <td>
    44.         <?php echo $product_price_lbl ?>
    45.         <?php echo $product_price ?>
    46.         <br /><br />
    47.         <?php echo $product_description ?>
    48.     </td>
    49.   </tr>
    50. </table>
    51.  
    52.  
    53. <?php
    54. if( !empty( $recent_products )) { ?>
    55.     <div class="vmRecent">
    56.     <?php echo $recent_products; ?>
    57.     </div>
    58. <?php
    59. }
    60. if( !empty( $navigation_childlist )) { ?>
    61.     <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
    62.     <?php echo $navigation_childlist ?><br style="clear:both"/>
    63. <?php
    64. } ?>


    но ещё пришлось переписать функцию vmlistAdditionalImages, что бы она выводила картинки в нужном формате!

    вот вроде и все изменения :)
     
  11. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо что помогаете мне, но дело в том получается не совсем то что нужно. При открытии описания товара мы видим основное большое изображение и дополнительные картинки, при нажатии на дополнительные изображения открывается отдельное окно в котором видна основная картинка и доп. изображения и в ней есть возможность переключать изображения, но мне нужно что бы не открывалось отдельное окно с изображениями, а что бы дополнительные изображения менялись на месте ОСНОВНОГО ИЗОБРАЖЕНИЯ, без открытия отдельного окна с картинками

    Вот пример что что мне нужно: http://www.musicflowers.ru/flowers/roses/red/bouquet_shershe_la_fam.php

    Мой полный garden_flypage.tpl
    Код (PHP):
    1. <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
    2.  
    3. <?php echo $buttons_header // The PDF, Email and Print buttons ?>
    4.  
    5. <?php
    6. if( $this->get_cfg( 'showPathway' )) {
    7.     echo '<p><div class="pathway"' . $navigation_pathway . '</div></p>';
    8. }
    9. ?>
    10. <?php
    11. //  < Previous  |   Next >
    12. if( $this->get_cfg( 'product_navigation', 1 )) {
    13.     if( !empty( $previous_product )) {
    14.         echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
    15.     }
    16.     if( !empty( $next_product )) {     
    17.         echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
    18.     }
    19. }
    20. ?>
    21. <p style="clear:both;"><?php echo $navigation_childlist ?></p>
    22. <table border="0" align="center" style="width: 100%;">
    23.   <tbody>
    24.     <tr>
    25.       <td rowspan="1">
    26.       <h1><?php echo $product_name ?> <?php echo $edit_link ?></h1>
    27.       &nbsp;<?php echo $manufacturer_link ?>
    28.       </td>
    29.  
    30.           <td align="right" valign="top" rowspan="4"><img src="/components/com_virtuemart/shop_image/product/<?php echo $product_full_image ?>" ><br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?></td>
    31.  
    32.     </tr>
    33.     <tr>
    34.       <td rowspan="1"><font size="2"><?php echo $product_price ?></font><br /></td>
    35.     </tr>
    36.     <tr>
    37.       <td rowspan="1">
    38.         <hr style="width: 100%; height: 2px;" />
    39.         <p><?php echo $product_description ?></p>
    40.         <span style="font-style: italic;"><?php echo $file_list ?></span></td>
    41.     </tr>
    42.     <tr>
    43.       <td><hr style="width: 100%; height: 2px;" />
    44.         <div style="text-align: center;">
    45.             <?php echo $addtocart ?>
    46.         </div>
    47.       </td>
    48.       <td style="text-align: center;" rowspan="1"><?php echo $product_availability ?></td>
    49.     </tr>
    50.     <tr>
    51.       <td colspan="2"><?php echo $product_type ?></td>
    52.     </tr>
    53.     <tr>
    54.       <td colspan="2"><hr /><?php echo $product_reviews ?></td>
    55.     </tr>
    56.     <tr>
    57.       <td colspan="2"><?php echo $product_reviewform ?><br /></td>
    58.     </tr>
    59.     <tr>
    60.       <td colspan="2"><?php echo $related_products ?><br /></td>
    61.     </tr>
    62.     <tr>
    63.       <td rowspan="1" colspan="2">
    64.         <div style="text-align: center;"><?php echo $vendor_link ?></div>
    65.         <br />
    66.       </td>
    67.     </tr>
    68.   </tbody>
    69. </table>
     
  12. Offline

    maduzer Недавно здесь

    Регистрация:
    10.11.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    как успехи?
     
  13. Offline

    Injaws Недавно здесь

    Регистрация:
    09.11.2010
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Написал в предыдущем ответе... не совсем то что нужно и заодно там есть пример сайта с изображениями как мне нужно, посмотри плиз
     
  14. Offline

    dmonco Недавно здесь

    Регистрация:
    25.08.2009
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    И что? Все ответы закончились?

    Вот Вам пример, как это можно сделать:
    Всё вставляете в Вашу страничку товара. Не забудьте адрес домена прописать.

    Код (CODE):
    1. <?php
    2. define("SITE_URL", "http://ЗДЕСЬ АДРЕС ДОМЕНА/");
    3. define("PRODUCT_IMAGE", SITE_URL."/components/com_virtuemart/shop_image/product/");
    4. define("ANY_IMAGE", SITE_URL."/components/com_virtuemart/themes/default/templates/product_details/img/");
    5. ?>
    6.  
    7. <script type="text/javascript">
    8.  
    9.  
    10.   function changeImage(path)
    11.   {
    12.     jQuery("body").css("backgroumd-color", "red");
    13.  
    14.     jQuery("#big_img").attr("src", path);
    15.   }
    16.  
    17.   function subm(){
    18.     jQuery("#addtocart_4aeefd3566631").submit();
    19.   }
    20.  
    21.  
    22.   var size_flag = false;
    23.   function show_size()
    24.   {
    25.     if(!size_flag)
    26.       jQuery("#size").fadeIn();
    27.     else
    28.       jQuery("#size").fadeOut();
    29.  
    30.     size_flag = !size_flag;
    31.   }
    32. </script>
    33. <?
    34.  
    35. $patterns[0] = '/height="[0-9]{1,}"/';
    36. $patterns[1] =  '/width="[0-9]{1,}"/';
    37. $replacements[0] = 'height="458"';
    38. $replacements[1] = 'width="305"';
    39. $product_image = preg_replace($patterns, $replacements, $product_image);   
    40.  
    41.  
    42. ?>
    43.  
    44. <table cellpadding="0" cellspacing="0" border="0" align="center" class="p_maintable">
    45.     <tr>
    46.       <td rowspan="8" style="padding-right:40px; width:305px;"><img width="305" height="458" id="big_img" src="<?php echo PRODUCT_IMAGE.$product_full_image ?>" /></td>
    47.        
    48.     </tr>
    49.     </table>
    50. <?
    51.  
    52.     $product_id =  $this->vars['productArray']['product_id'];
    53.  
    54.     $db =& JFactory::getDBO();
    55.     $query = "
    56.                 SELECT *
    57.                 FROM #__vm_product_files
    58.                 WHERE file_product_id = ".$product_id;
    59.                
    60.  
    61.     $result = $db->setQuery($query);
    62.     $rows = $db->loadObjectList();
    63.    
    64.  
    65.  
    66. ?>     
    67.        
    68. <? if(count($rows)) { ?>       
    69.         <table cellpadding="0" cellspacing="0" border="0" align="left" class="p_racursimg">
    70.           <tr>
    71.  
    72. <?
    73.  
    74.     $count = (count($rows) > 3) ? 3 : count($rows);
    75.     for($i=0; $i<$count; $i++)       
    76.          echo '<td><img style="cursor:pointer;" onclick="changeImage('."'".$rows[$i]->file_name."'".');" src="'.$rows[$i]->file_name.'" width="94" height="141" /></td>';
    77. ?>
    78.  
    79.         </tr>
    80.         </table>
    81.  
    82. <?  } ?>


    Пример, как работает, можно посмотреть здесь: http://www.shopping-therapy.ru/index.php?option=com_virtuemart&page=shop.product_details&flypage=flypage.tpl&product_id=82&category_id=558&Itemid=13

    Теперь усложняем задачу.
    Предлагаю разобраться с этим вопросом по поводу динамической смены картинок местами ДО КОНЦА. [!]
    Во всем, блин, Интернете решения не нашел, всё что мог, уже перерыл.

    Значит задачка такая:

    Использую Joomla 1.5.20 + VirtueMart 1.1.5
    Для карточки товара подключил highslide

    Как сделать смену картинок там? Хайслайд свои эффекты использует. Не получается сделать по вышеуказанному коду.

    Прошу помощи. HELP HELP HELP
     
  15. Offline

    rewwer Недавно здесь

    Регистрация:
    20.12.2009
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    нужно просто подключить js.js.
    вот весь код:
    Код (CODE):
    1. <script type="text/javascript" src="js/js.js"></script>
    2. <?php
    3. define("SITE_URL", "http://wildberry.com.ua/");
    4. define("PRODUCT_IMAGE", SITE_URL."/components/com_virtuemart/shop_image/product/");
    5. define("ANY_IMAGE", SITE_URL."/components/com_virtuemart/themes/default/templates/product_details/img/");
    6. ?>
    7.  
    8. <script type="text/javascript">
    9.  
    10.  
    11. function changeImage(path)
    12. {
    13. jQuery("body").css("backgroumd-color", "red");
    14.  
    15. jQuery("#big_img").attr("src", path);
    16. }
    17.  
    18. function subm(){
    19. jQuery("#addtocart_4aeefd3566631").submit();
    20. }
    21.  
    22.  
    23. var size_flag = false;
    24. function show_size()
    25. {
    26. if(!size_flag)
    27. jQuery("#size").fadeIn();
    28. else
    29. jQuery("#size").fadeOut();
    30.  
    31. size_flag = !size_flag;
    32. }
    33. </script>
    34. <?
    35.  
    36. $patterns[0] = '/height="[0-9]{1,}"/';
    37. $patterns[1] = '/width="[0-9]{1,}"/';
    38. $replacements[0] = 'height="458"';
    39. $replacements[1] = 'width="305"';
    40. $product_image = preg_replace($patterns, $replacements, $product_image);   
    41.  
    42.  
    43. ?>
    44.  
    45. <table cellpadding="0" cellspacing="0" border="0" align="center" class="p_maintable">
    46. <tr>
    47. <td rowspan="8" style="padding-right:40px; width:305px;"><img width="305" height="458" id="big_img" src="<?php echo PRODUCT_IMAGE.$product_full_image ?>" /></td>
    48.  
    49. </tr>
    50. </table>
    51. <?
    52.  
    53. $product_id = $this->vars['productArray']['product_id'];
    54.  
    55. $db =& JFactory::getDBO();
    56. $query = "
    57. SELECT *
    58. FROM #__vm_product_files
    59. WHERE file_product_id = ".$product_id;
    60.  
    61.  
    62. $result = $db->setQuery($query);
    63. $rows = $db->loadObjectList();
    64.  
    65.  
    66.  
    67. ?> 
    68.  
    69. <? if(count($rows)) { ?>   
    70. <table cellpadding="0" cellspacing="0" border="0" align="left" class="p_racursimg">
    71. <tr>
    72.  
    73. <?
    74.  
    75. $count = (count($rows) > 3) ? 3 : count($rows);
    76. for($i=0; $i<$count; $i++) 
    77. echo '<td><img style="cursor:pointer;" onclick="changeImage('."'".$rows[$i]->file_name."'".');" src="'.$rows[$i]->file_name.'" width="94" height="141" /></td>';
    78. ?>
    79.  
    80. </tr>
    81. </table>
    82.  
    83. <? } ?>
     

    Вложения:

    • js.rar
      Размер файла:
      19.1 КБ
      Просмотров:
      8

Поделиться этой страницей

Загрузка...