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

Прошу помощи добрые и умные люди! Добился большой картинки в подробном описании товара, но нужно что бы она менялась при выборе дополнительных изображений, а не всплывала в виде LightBox или отдельном окне. Нигде не мог найти решение... Если не трудно подскажите...

 

Используйте код встроенный в flypage_images

 

Хим.... Если можно то раскрыть ответ подробнее

 

пару недель назад сделал нечто подобное
долго искал готовые решения, но в итоге пришлось самому модифицировать virtuemart...
что то похожее, но не совсем рабочее находил на форуме virtuemart.net

 

Очень здорово, то что надо. Так в чем секрет, какие нужно изменения произвести?

 

честно говоря уже сложно вспомнить

делал исходя из этого: http://forum.virtuemart.net/index.php?topic=76661.0;

и этого: http://anton.shevchuk.name/javascript/mootools-for-beginners/ (пример: http://anton.shevchuk.name/wp-demo/mootools-for-beginners/img-replacement.html)

 

Спасибо, буду смотреть, отпишусь потом как получилось)

 

это не совсем подходит, у меня получается тоже самое, открывается отдельное окна и там меняются картинки.

Я использую тему 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>

вот мой код

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

 

вот так выглядит мой файл 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, что бы она выводила картинки в нужном формате!

вот вроде и все изменения

 

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

Вот пример что что мне нужно: 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>

 

как успехи?

 

Написал в предыдущем ответе... не совсем то что нужно и заодно там есть пример сайта с изображениями как мне нужно, посмотри плиз

 

И что? Все ответы закончились?

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

Код (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

 

нужно просто подключить 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. <? } ?>