Search the Community

Здравствуйте, искал метод как изменять главное изображение по клику на дополнительном, нашел решение, называется thumb-image-swap vqmod - вот этот код. <file name="catalog/controller/product/product.php"> <operation> <search position="after"><![CDATA['popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),]]></search> <add><![CDATA[// BOF oc_Thumb_image_swap.xml 'addthumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')), // EOF oc_Thumb_image_swap.xml]]></add> </operation> <operation> <search position="after"><![CDATA[$this->load->model('tool/image');]]></search> <add><![CDATA[// BOF oc_Thumb_image_swap.xml if ($product_info['image']) $this->data['addpopup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height')); else $this->data['addpopup'] = ''; // EOF oc_Thumb_image_swap.xml]]></add> </operation> </file> <file name="catalog/view/theme/*/template/product/product.tpl"> <operation> <search position="before"><![CDATA[<?php echo $footer; ?>]]></search> <add><![CDATA[<!-- BOF oc_Thumb_image_swap.xml --> <?php if ($images) { ?> <script type="text/javascript"><!-- $(function(){ var imgs = <?php echo json_encode($images); ?>; var html = ''; $.each(imgs,function(i,image){ html += '<div class="image" style="display:none;"><a href="' + image.popup + '" title="<?php echo $heading_title; ?>" class="colorbox">'; html += '<img src="' + image.addthumb + '" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>'; $('.image-additional').before(html); html = ''; }) html = '<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">'; html += '<img src="<?php echo $addpopup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>'; $('.image-additional').prepend(html); var images = $('div.left .image'); var thumbs = $('.image-additional a'); thumbs.removeClass('cboxElement').removeClass('colorbox'); images.children('a').colorbox({rel:'colorbox'}); thumbs.on('click',function(e){ e.preventDefault(); images.hide(); images.eq(thumbs.index(this)).show(); }); }); //--></script> <!-- EOF oc_Thumb_image_swap.xml --> <?php } ?>]]></add> </operation> </file>Ну тут понятно, добавились в контроллер в темплейт, и вот сам яваскрипт код, который обрабатывает скрытие и появление изображнеий + появление в колорбоксе, а у меня не колорбокс, а cloud-zoom который вызывается так. <div class="zoom-section"> <div class="image zoom-small-image"><a href="<?php echo $popup; ?>" class="thickbox cloud-zoom"> <img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></div></div> Яваскрипт я переделал так - ну уж простите как додумал. <script type="text/javascript"> $(function(){ var imgs = <?php echo json_encode($images); ?>; var html = ''; $.each(imgs,function(i,image){ html += '<div class="zoom-section"><div class="image zoom-small-image" style="display:none;">'; html += '<a href="<?php echo $popup; ?>" class="thickbox cloud-zoom"><img src="' + image.addthumb + '" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"/></a></div></div>'; $('.image-additional').before(html); html = ''; }) html = '<a href="<?php echo $popup; ?>" class="thickbox cloud-zoom" >'; html += '<img src="<?php echo $addpopup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>'; $('.image-additional').prepend(html); var images = $('div.right .image'); var thumbs = $('.image-additional a img'); thumbs.on('click',function(e){ e.preventDefault(); images.hide(); images.eq(thumbs.index(this)).show(); }); }); </script> Cloud-zoom работает только на первом изображении, при клике на дополнительных, изображение меняется, но cloud-zoom не работает, скажите что не так, как объединить эти две очень классных и полезных вещи.