Jump to content
Sign in to follow this  
VictorK

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

Recommended Posts

Добрый день.

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

PS в рамках OcS

Share this post


Link to post
Share on other sites

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

 

PS в рамках OS

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

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

Share this post


Link to post
Share on other sites

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

 

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,

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

 

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

 

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

Share this post


Link to post
Share on other sites

Продолжение

 

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

 

Открываем ....\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%;}

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

1390470257-1-71kb.png?nocache=1

 

Share this post


Link to post
Share on other sites

Спасибо.

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.