Увеличение Фото В Каталоге При Наведении
#1
Отправлено 07 Август 2013 - 08:20
#2
Отправлено 08 Август 2013 - 03:40
#3
Отправлено 08 Август 2013 - 07:53
#4
Отправлено 09 Август 2013 - 03:09
</figure> <h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>
и замените на
</figure> <div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> <h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>
далее найдите
{% ENDIF %} <div class="rating">
и замените на
{% ENDIF %} <div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> <div class="rating">
в файл стилей style.css добавьте
.goods_images_list { position: relative; } .goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; left: 80px; padding: 2px; top: 40px; max-height: 450px; max-width: 450px; }
в файл main.js добавьте
$(function() { $('.items a img').hover(function() { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); var size = goods_images_list.find('img').size(); if(size) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 3000)); } } }, function() { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); goods_images_list.find('div').hide(); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } }); });
#5
Отправлено 09 Август 2013 - 08:29
Еще, если на опустить страницу в самый низ, начинается загрузка других товаров, и на них всплывающие фото не отображаются.
#6
Отправлено 10 Август 2013 - 03:03
.containers .items, .containers2 .items { display: inline-block; float: none !important; height: 440px; overflow: hidden; vertical-align: top; width: 170px !important; }
и замените на
.containers .items, .containers2 .items { display: inline-block; float: none !important; height: 440px; vertical-align: top; width: 170px !important; }
для реализации задержки и применения для подгружаемых товаров - используйте код вместо предыдущего
$(function() { $('.items a img').live({ mouseenter: function () { $(this).data('hover'); setTimeout($.proxy(function() { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); var size = goods_images_list.find('img').size(); if(size && $(this).data('hover')) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 3000)); } } }, this), 2000); }, mouseleave: function () { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); goods_images_list.find('div').hide(); $(this).removeData('hover'); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } } }); });
интервал переключения изображений задается числом 3000 - равным 3м секундам. Размер фото ограничен в файле стилей
.goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; left: 80px; padding: 2px; top: 40px; max-height: 450px; max-width: 450px; }
свойствами max-height и max-width
Цитата
Если вы имеете в виду тайтл, с названием товара, то добавьте в main.js
$(function() { $('.items a img').each(function() { $(this).parent().removeAttr('title'); }); });
#7
Отправлено 10 Август 2013 - 08:07
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?
#8
Отправлено 10 Август 2013 - 08:33
Brend7111 (10 Август 2013 - 08:07) писал:
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?
Вы хотите убрать названия товаров из карусели?
Тогда так - добавьте в конец файла style.css код -
.mycarousel h3{display:none;}
#11
Отправлено 10 Август 2013 - 08:55
1. Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и вот это там не работает тоже:
$(function() { $('.items a img').each(function() { $(this).parent().removeAttr('title'); }); });
2. Что делать с миганием всплывающего фото при наведении на него курсора? Попробуйте навести на фото любого товара в каталоге в правом нижнем углу.
3. И как убрать всплывающие названия у сопуток и недавно просмотренных?
#12
Отправлено 10 Август 2013 - 10:20
Brend7111 (10 Август 2013 - 08:55) писал:
1. Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и вот это там не работает тоже:
$(function() { $('.items a img').each(function() { $(this).parent().removeAttr('title'); }); });
2. Что делать с миганием всплывающего фото при наведении на него курсора? Попробуйте навести на фото любого товара в каталоге в правом нижнем углу.
3. И как убрать всплывающие названия у сопуток и недавно просмотренных?
3) Добавьте в конец main.js код -
$(function() { $('.mycarousel2 li a img').each(function() { $(this).parent().removeAttr('title'); }); });
1)
Код -
$(function() { $('.items a img').each(function() { $(this).parent().removeAttr('title'); }); });работает например в каталоге, поэтому убирать его не нужно
Не очень понятно - Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются
По скольку не нашла товара в каталоге, у которого фото бы не высвечивалось. Объясните пожалуйста подробнее или может быть скинете пример?
#14
Отправлено 12 Август 2013 - 16:36
#15
Отправлено 13 Август 2013 - 02:09
Brend7111 (10 Август 2013 - 08:07) писал:
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?
У вас отсутствуют изменения из сообщения http://forum.storela...нии/#entry83521
Пожалуйста, примените данные изменения, и очистите кэш в вашем браузере.
#16
Отправлено 13 Август 2013 - 03:23
#17
Отправлено 13 Август 2013 - 06:08
$(this).data('hover');
и замените её на
$(this).data('hover', true).parent().removeAttr('title');
#18
Отправлено 13 Август 2013 - 06:36
#19
Отправлено 22 Август 2013 - 11:57
Сake (09 Август 2013 - 03:09) писал:
</figure> <h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>
и замените на
</figure> <div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> <h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>
далее найдите
{% ENDIF %} <div class="rating">
и замените на
{% ENDIF %} <div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> <div class="rating">
в файл стилей style.css добавьте
.goods_images_list { position: relative; } .goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; left: 80px; padding: 2px; top: 40px; max-height: 450px; max-width: 450px; }
в файл main.js добавьте
$(function() { $('.items a img').hover(function() { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); var size = goods_images_list.find('img').size(); if(size) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 3000)); } } }, function() { var goods_images_list = $(this).closest('.items').find('.goods_images_list'); goods_images_list.find('div').hide(); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } }); });
спасибо!
#20
Отправлено 22 Август 2013 - 18:11
прежде чем производить какие либо изменения сделайте бэкап вашего сайта
далее в админке магазина во вкладке сайт - редактор шаблонов найдите файл ТОВАРЫ
в файле найдите код
<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;"> <div class="imagem"><a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img class="goods-image-small" {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>
и добавьте после него код
<div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div>
далее там же найдите код
<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;"> <div class="imagem">
и замените на код
<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;"> <div class="slid"> <div class="imagem">
далее найдите код
</form> </div> <div class="clr"></div>
и замените на код
</form> </div> </div> <div class="clr"></div>
далее в файле main.css в конец файла добавьте код
.goods_images_list { position: relative; } .goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; left: 118px; padding: 2px; top: 11px; max-height: 359px; max-width: 512px; } .goods_images_list img {width:350px;}
далее в файле main.js добавьте код
$(function() { $('.imagem a img').hover(function() { var goods_images_list = $(this).closest('.slid').find('.goods_images_list'); var size = goods_images_list.find('img').size(); console.log(size); if(size) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 3000)); } } }, function() { var goods_images_list = $(this).closest('.slid').find('.goods_images_list'); goods_images_list.find('div').hide(); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } }); });
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных