Создание зума для изображений товара - получилось, но есть загвоздка

[polevser]

Доброй ночи, пытался интегрировать на движок часть верстки связанной с выводом изображений на карточке товара, в моем случае используется скрипт "лупы", и для правильной работы скрипта используется 3 изображения:

• thumb
• small
• large

В случае с движком, это переменные:

thumb

popup

и добавленная мной для превьюшек small

 

Вот так вот выглядит код верстки:

          <div class="product-view__gallery">
            <div class="product-view__gallery__main">
              <img id="product-view__gallery__main__img" src="images/inline/small/iphone--1.jpg" width="300" height="300" alt="" data-zoom-image="images/inline/large/iphone--1.jpg" class="product-view__gallery__main__img">
            </div>
            
            <div id="product-view__gallery__thumbs" class="product-view__gallery__thumbs">
              <div class="product-view__gallery__thumbs__item">
                <a href="product.html" data-image="images/inline/small/iphone--1.jpg" data-zoom-image="images/inline/large/iphone--1.jpg" class="product-view__gallery__thumbs__item__link">
                  <img src="images/inline/thumb/iphone--1.jpg" width="50" height="96" alt="" class="product-view__gallery__thumbs__item__link__img">
                </a>
              </div>
              <div class="product-view__gallery__thumbs__item">
                <a href="product.html" data-image="images/inline/small/iphone--2.jpg" data-zoom-image="images/inline/large/iphone--2.jpg" class="product-view__gallery__thumbs__item__link">
                  <img src="images/inline/thumb/iphone--2.jpg" width="14" height="100" alt="" class="product-view__gallery__thumbs__item__link__img">
                </a>
              </div>
              <div class="product-view__gallery__thumbs__item">
                <a href="product.html" data-image="images/inline/small/iphone--2.jpg" data-zoom-image="images/inline/large/iphone--2.jpg" class="product-view__gallery__thumbs__item__link">
                  <img src="images/inline/thumb/iphone--2.jpg" width="14" height="100" alt="" class="product-view__gallery__thumbs__item__link__img">
                </a>
              </div>
            </div>
            <i class="icon--arrow-left product-view__gallery__arrow"></i><i class="icon--arrow-right product-view__gallery__arrow"></i>
          </div>

Вот так вот в шаблоне у меня:

    <?php if ($thumb || $images) { ?>
          <div class="product-view__gallery">
      <?php if ($thumb) { ?>
            <div class="product-view__gallery__main">
              <img id="product-view__gallery__main__img" src="<?php echo $thumb; ?>" width="300" height="300" alt="" data-zoom-image="<?php echo $popup; ?>" class="product-view__gallery__main__img">
            </div>
      <?php } ?>
      <?php if ($images) { ?>
            <div id="product-view__gallery__thumbs" class="product-view__gallery__thumbs">
<?php foreach ($images as $image) { ?>
              <div class="product-view__gallery__thumbs__item">
                <a href="product.html" data-image="<?php echo $image['small']; ?>" data-zoom-image="<?php echo $image['popup']; ?>" class="product-view__gallery__thumbs__item__link">
                  <img src="<?php echo $image['thumb']; ?>" width="50" height="96" alt="" class="product-view__gallery__thumbs__item__link__img">
                </a>
              </div>
<?php } ?>
            </div>
            <i class="icon--arrow-left product-view__gallery__arrow"></i><i class="icon--arrow-right product-view__gallery__arrow"></i>
      <?php } ?>
          </div>
    <?php } ?>   

И вот код контроллера в месте решения вопросов по изображениям:

           
            $this->load->model('tool/image');

            if ($product_info['image']) {
                $this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
            } else {
                $this->data['popup'] = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
            }
            
            if ($product_info['image']) {
                $this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
                $this->document->setOgImage($this->data['thumb']);
            } else {
                $this->data['thumb'] = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
            }

            $this->data['images'] = array();

                if ($product_info['image']) {
                    $this->data['images'][] = array(
                        'popup' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
                        'small' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')),
                        'thumb' => $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
                    );
                }
            
            $results = $this->model_catalog_product->getProductImages($this->request->get['product_id']);
            
            foreach ($results as $result) {
                $this->data['images'][] = array(
                    'popup' => $this->data['popup'] = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
                    'small' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')),
                    'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
                );
            }
                       

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

 

 

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

      <?php if ($thumb) { ?>
            <div class="product-view__gallery__main">
              <img id="product-view__gallery__main__img" src="<?php echo $thumb; ?>" width="300" height="300" alt="" data-zoom-image="<?php echo $popup; ?>" class="product-view__gallery__main__img">
            </div>
      <?php } ?>

То через переменную data-zoom-image="<?php echo $popup; ?>" идет почему-то отображение последнего изображения из дополнительных, а не изображение которое главное.

 

То есть должно идти: /image/cache/data/products/Falcon%20Eye%20FE-D80C-500x500.jpg

 

А идет почему-то ссылка на отображение пятого полного изображения: /image/cache/data/products/Falcon%20Eye%20FE-D80C-5-500x500.jpg

 

Вот собственно пример из исходного кода страницы:

<div class="product-view__gallery__main">
              <img id="product-view__gallery__main__img" src="/image/cache/data/products/Falcon%20Eye%20FE-D80C-228x228.jpg" alt="" data-zoom-image="/image/cache/data/products/Falcon%20Eye%20FE-D80C-5-500x500.jpg" class="product-view__gallery__main__img" height="300" width="300">
</div>

Подскажите пожалуйста, как решить эту небольшую загвоздку.

 

Заранее премного благодарен!

 

 

 

 

[polevser]

Кто нибудь может за вознаграждение хотя бы помочь? Просто я не программист, лишь рисую и верстаю, поэтому такие задачи сложны.

Плюс там еще некоторые моменты будут при интеграции, и если кто-то заинтересован в том чтобы помочь комплексно с интеграцией верстки и пары модулей, то я был бы рад оплатить от А до Я работу. Не размениваясь на мелочи.

 

Возможно я даже ошибся темой, если модераторы тут, то прошу перенести мои два топика в другой раздел.