[Решено?..] смена галавного изображения + cloudn zoom

[wowez]

Здравствуйте, искал метод как изменять главное изображение по клику на дополнительном, нашел решение, называется 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 не работает, скажите что не так, как объединить эти две очень классных и полезных вещи.

[coltman]

Тоже мучился с этой проблемой. Решается достаточно просто, нужно лишь заново вызвать cloudzoom после обработки клика по доп. изображению, т.е.

<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; ?>">';
  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();
    $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
  });
});
</script>