Версия ocStore 2.3.0.2.3
Срочно понадобилось для изображений опций увеличивать изображения при нажатии. Для этого можно воспользоваться плагином magnific-popup, который в стандартной сборке уже подключен в карточке товара, в файле \catalog\controller\product\product.php:
|
1 2 3 |
$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js'); $this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css'); |
В этом файле после строки
|
1 2 |
$product_option_value_data[] = array( |
добавляем
|
1 2 |
'imageforgallery' => $option_value['image'] ? $this->model_tool_image->resize($option_value['image'], 500, 500) : '', |
то есть изображение с нужным нам размером.
В файле catalog\view\theme\default\template\product\product.tpl строки:
|
1 2 3 4 |
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" /> <?php if ($option_value['image']) { ?> <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> |
заменяем на:
|
1 2 3 4 5 6 7 |
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" /> <?php if ($option_value['image']) { ?> <a class="options-gallery" href="<?php echo $option_value['imageforgallery']; ?>"> <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> </a> <?php } ?> |
и в самом конце перед
|
1 2 |
<?php echo $footer; ?> |
добавляем скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function() { $('.options-gallery').magnificPopup( { type: 'image', gallery: {enabled: true}, removalDelay: 500, mainClass: 'mfp-fade' }); }); </script> |
Данный подход можно использовать для создания галереи в любом месте сайта.