Перейти к содержанию
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>

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

 

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

 

 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Aristocrat
      300.00 руб
      Скачать/Купить дополнение


      Загрузчик изображений для товара
      Написать данный мод меня подвигла очень неудобная и долгая загрузка изображений в OpenCart.
      Чем этот модуль лучше других?
      1. Очень простой код, не изменяет системных файлов
      2. Простая установка (работает на vqmod)
      3. К товару можно загрузить неограниченное количество изображений
      4. В папке "изображения" можно загружать любое количество изображений
      5. Работает также как и загрузчик изображений в одноклассниках и ВКонтакте
      6. Автоматически прописывает изображения товару после загрузки
      Установка:
      Скопировать содержимое папок admin и vqmod в корневую директорию Вашего магазина (файлы не будут перезаписаны)
      Работает на всех версиях OpenCart: v1.5.3, v1.5.3.1, v1.5.4, v1.5.4.1, v1.5.5, v1.5.5.1, v1.5.6 и др.
      Добавил Aristocrat Добавлено 31.08.2013 Категория Прочее  
    • От nowremont
      Доброй ночи форумчане! Помогите будьте добры решить такую задачу
      Обнаружил в магазине такую проблему: под главным изображений в карточке товара не выводятся дополнительные изображения, а инспектор кода выдаёт такие ошибки: 
      1. jquery-ui-Failed to load resource: the server responded with a status of 404 ()
       
      2. Uncaught TypeError: Cannot set property '_renderItem' of undefined
          at HTMLDocument.<anonymous> (divan-dzhoker:2239)
          at j (cache_js.js:2)
          at Object.fireWith [as resolveWith] (cache_js.js:2)
          at Function.ready (cache_js.js:2)
          at HTMLDocument.I (cache_js.js:2)
       
      Почитав о подобных проблемах, выяснилось - это следствие того, что скрипт jquery-ui-1.10.4.custom.min.js не правильно работает с библиотекой. Познаний СМS хватило на то, чтобы заменить этот скрипт на такой же, но с другого моего сайта с таким же шаблоном и версией Опенкарт (версия jquery тоже совпадает). 
      Результата никакого, в коде к сожалению не силён, как починить ума не приложу.
      Заранее спасибо за помощь!

    • От Aristocrat
      Написать данный мод меня подвигла очень неудобная и долгая загрузка изображений в OpenCart.
      Чем этот модуль лучше других?
      1. Очень простой код, не изменяет системных файлов
      2. Простая установка (работает на vqmod)
      3. К товару можно загрузить неограниченное количество изображений
      4. В папке "изображения" можно загружать любое количество изображений
      5. Работает также как и загрузчик изображений в одноклассниках и ВКонтакте
      6. Автоматически прописывает изображения товару после загрузки
      Установка:
      Скопировать содержимое папок admin и vqmod в корневую директорию Вашего магазина (файлы не будут перезаписаны)
      Работает на всех версиях OpenCart: v1.5.3, v1.5.3.1, v1.5.4, v1.5.4.1, v1.5.5, v1.5.5.1, v1.5.6 и др.
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.