Зумировани и изменение картинки при наведении на нее (на CSS)

[VictorK]

Добрый день.

 

Нашел в интернете очень интересные спецэффекты для фото.

1.Увеличение картинки при наведении (зум).

2.При наведении на картинку, она меняется на другую.

 

Все это сделано на css без js. Там же есть и код всего этого, но куда и как правильно вставить не совсем разобрался.

Вот ссылки:

1.http://shpargalkablog.ru/2012/10/uvelichenie-kartinki-pri-navedenii.html

2.http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html

 

Помогите разобраться, думаю это многим будет интересно.

[Marusia]

Поддерживаю, мне то же интересно)) мне вообще все интересно, все что надо исправить)))

[Shkip]

Внедрить код не проблема, главное в контроллере получить еще одну переменную - картинку без ресайза.

 

PS в рамках OcS

[VictorK]

Внедрить код не проблема, главное в контроллере получить еще одну переменную - картинку без ресайза.

 

PS в рамках OS

Это сильно сложно?

Или много возни?

[Shkip]

В контроллерах я не силен, чуть позже попробую сделать такую фишку в списке категорий

 

UPD

открываем ...\catalog\view\theme\default\template\product\category.tpl

 

после 

if ($result['image']) {$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));} else {$image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));}

добавляем

$zoomimage = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

после

$this->data['products'][] = array('product_id'  => $result['product_id'],'thumb'       => $image,

добавляем

'zoomthumb'       => $zoomimage,

все, в контроллере получили картинку с размером установленном в настройках как *Размер всплывающего изображения товара:*

 

дальше идет правка файла шаблона категории

 

Продолжение следует...

[Shkip]

Продолжение

 

В списке категорий пока не удалось ровно реализовать зумирование ( картинки отображаются, зумируются, но перестает работать переключатель сетка\лист). Пока решил не отвлекаться на это, а реализовать зум в модуле. Первый попавшийся модуль - Рекомендуем.

 

Открываем ....\catalog\controller\module\featured.php

после 

if ($product_info) {
if ($product_info['image']) {
$image = $this->model_tool_image->resize($product_info['image'], $setting['image_width'], $setting['image_height']);
} else {
$image = false;
}

добавляем

$zoomimage = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

после 

$this->data['products'][] = array(
'product_id' => $product_info['product_id'],
'thumb'     => $image,

добавляем

'zoomthumb'     => $zoomimage,

Все, в контроллере получили картинку с размером установленном в настройках как *Размер всплывающего изображения товара:*

Дальше идет правка файла шаблона модуля Рекомендуем

Открываем ...\catalog\view\theme\[ваша_тема]\template\module\featured.tpl

Находим

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

и меняем на 

<div class="izo-zoom1"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"/><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><img src="<?php echo $product['zoomthumb']; ?>"/></div>

Открываем файл ...\catalog\view\theme\[ваша_тема]\stylesheet\stylesheet.css и конце файла добавляем

.izo-zoom1 {
position: relative;
overflow: hidden;
display: inline-block;
}

.izo-zoom1 img:nth-of-type(1) {
max-width: 350px; max-height: 350px;
z-index: 2;
position: relative;
}

.izo-zoom1 span {
border-bottom: 36px solid rgba(0, 0, 0, 0);
z-index: 3;
width: 50%;
position: absolute; left: 0px; top: 0px;
cursor: zoom-in;
}
.izo-zoom1 span:nth-child(even) {left: 50%;}
.izo-zoom1 span:nth-of-type(3), .izo-zoom1 span:nth-of-type(4) {top: 10%;}
.izo-zoom1 span:nth-of-type(5), .izo-zoom1 span:nth-of-type(6) {top: 20%;}
.izo-zoom1 span:nth-of-type(7), .izo-zoom1 span:nth-of-type(8) {top: 30%;}
.izo-zoom1 span:nth-of-type(9), .izo-zoom1 span:nth-of-type(10) {top: 40%;}
.izo-zoom1 span:nth-of-type(11), .izo-zoom1 span:nth-of-type(12) {top: 50%;}
.izo-zoom1 span:nth-of-type(13), .izo-zoom1 span:nth-of-type(14) {top: 60%;}
.izo-zoom1 span:nth-of-type(15), .izo-zoom1 span:nth-of-type(16) {top: 70%;}
.izo-zoom1 span:nth-of-type(17), .izo-zoom1 span:nth-of-type(18) {top: 80%;}
.izo-zoom1 span:nth-of-type(19), .izo-zoom1 span:nth-of-type(20) {top: 90%;}

.izo-zoom1 img:nth-of-type(2) {
width: 200%; max-width: 200%;
position: absolute; top: 0;
border-bottom: 200px solid #fff;
}
.izo-zoom1:hover img:nth-of-type(2) {
z-index: 2;
transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}

.izo-zoom1 span:nth-child(odd):hover ~ img:nth-of-type(2) {left: 0;}
.izo-zoom1 span:nth-child(even):hover ~ img:nth-of-type(2) {left: -100%;}
.izo-zoom1 span:nth-of-type(3):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(4):hover ~ img:nth-of-type(2) {top: -11%;}
.izo-zoom1 span:nth-of-type(5):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(6):hover ~ img:nth-of-type(2) {top: -22%;}
.izo-zoom1 span:nth-of-type(7):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(8):hover ~ img:nth-of-type(2) {top: -33%;}
.izo-zoom1 span:nth-of-type(9):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(10):hover ~ img:nth-of-type(2) {top: -44%;}
.izo-zoom1 span:nth-of-type(11):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(12):hover ~ img:nth-of-type(2) {top: -55%;}
.izo-zoom1 span:nth-of-type(13):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(14):hover ~ img:nth-of-type(2) {top: -66%;}
.izo-zoom1 span:nth-of-type(15):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(16):hover ~ img:nth-of-type(2) {top: -77%;}
.izo-zoom1 span:nth-of-type(17):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(18):hover ~ img:nth-of-type(2) {top: -88%;}
.izo-zoom1 span:nth-of-type(19):hover ~ img:nth-of-type(2), .izo-zoom1 span:nth-of-type(20):hover ~ img:nth-of-type(2) {top: -99%;}

Сохраняемся и проверяем наше творение

 

[VictorK]

Спасибо.

Попробую, отпишусь.

Кое-что из простого на этом сайте я уже использовал у себя, понравилось.