Search the Community

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