Увеличение Фото В Каталоге При Наведении
#21
Отправлено 22 Август 2013 - 20:19
1. Однако можно сделать чтобы картинка не дрожала, чтобы когда наводишь мышку в границы блока картинки, большая картинка встала без тряски. (есть какой то момент при наведении мышки когда картинка не знает показываться или нет, пусть этот момент будет на границе блока картинки
2 В opera и не только в Opera в мозиле и хроме у большинства товаров вся информация в СПИСКЕ встала снизу изображения
3 в ТАБЛИЦЕ бы тоже такое реализовать
#22
Отправлено 22 Август 2013 - 20:44
#23
Отправлено 23 Август 2013 - 03:05
$(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'); } }); });
используйте
$(function() { $('.prd-image a img').live({ mouseenter: function () { $(this).data('hover', true).parent().removeAttr('title'); setTimeout($.proxy(function() { var goods_images_list = $(this).closest('.prd-image').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('.prd-image').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'); } } }); });
Восстановите код шаблона "Товары" из резервной копии, после в шаблоне "Товары" найдите
<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 class="prd-image"> <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 class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> </div>
В файл стилей main.css добавьте
.prd-image { position: relative; }
#24
Отправлено 24 Август 2013 - 04:10
С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'); } }); });
НЕТ в шаблоне лайт такого кода соответственно на этом моменте все и встало
В шаблоне "Товары" найдите
</figure>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>
#25
Отправлено 24 Август 2013 - 09:50
Уточните что именно вы хотите изменить в вашем шаблоне ?
#26
Отправлено 24 Август 2013 - 16:06
Taisia (24 Август 2013 - 09:50) писал:
Уточните что именно вы хотите изменить в вашем шаблоне ?
Ну тема у нас тут одна
Увеличение Фото В Каталоге При Наведении
Простo уважаемый пользователь Сake пишет что это подходит к к любым шаблонам
#27
Отправлено 26 Август 2013 - 09:41
Сake (23 Август 2013 - 03:05) писал:
$(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'); } }); });
используйте
$(function() { $('.prd-image a img').live({ mouseenter: function () { $(this).data('hover', true).parent().removeAttr('title'); setTimeout($.proxy(function() { var goods_images_list = $(this).closest('.prd-image').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('.prd-image').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'); } } }); });
Восстановите код шаблона "Товары" из резервной копии, после в шаблоне "Товары" найдите
<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 class="prd-image"> <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 class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> </div>
В файл стилей main.css добавьте
.prd-image { position: relative; }
Ничего хорошего не произошло, title не убрался, картинки двоятся, описание находится под изображением , может быть связано с тем , что я не восстанавливал резервную копию "ТОВАРЫ", т.к. не знаю как это сделать, однако данный код :
<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>при общем бэкапе в "ТОВАРЫ" есть
Я вернулся на предыдущий этап, хотелось бы , чтобы в СПИСОК описание и цены встали напротив позиции и убрать title
#28
Отправлено 27 Август 2013 - 04:12
на данный же момент у вас не заменен код javascript в файле main.js. Вам необходимо произвести изменение после восстановления шаблона как говориться в http://forum.storela...__20#entry85813
Цитата
Да, данная реализация подходит для любого шаблона, это означает то, что её можно применить к любому шаблону, так как нет каких либо ограничений. Все подобные изменения будь то изменение корзины или отображение изображений при наведении - основываются в первую очередь на реализации, а затем только на уникальности каждого шаблона. По сути эта уникальность заключается только в порядке блоков и их имен. Просто искать код, и копировать его, или вставлять не думая - не получиться, по выше изложенной причине уникальности шаблона. Код по сути работать будет, но не так как ожидается. Данная тема относиться к теме "Вечность", но так же тут обсуждается и другие шаблоны по интеграции данного кода. Если вы прочитали всю тему, а затем дошли до сообщения http://forum.storela...__20#entry85813
то должно быть заметили, что вся реализация свелась к одной строке
<a href="{goods.URL}"><img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" alt="{goods.NAME}" /></a>
которая есть в каждой теме оформления, шаблона "Товары". Все изменения основываются именно на данной строке. Все что необходимо сделать это выполнить инструкцию из сообщения http://forum.storela...__20#entry85813 код javascript необходимо добавить в main.js все остальное производится в шаблоне "Товары". После в файл стилей main.css или style.css вставить все классы которые начинаются с .goods_images_list и .prd-image
Я еще раз вас прошу, прочитать всю тему внимательнее. Вы можете вставлять изменения частями, если что-то не получается - сообщайте, но не удаляйте изменений с вашего сайта.
#29
Отправлено 27 Август 2013 - 08:25
Сake (27 Август 2013 - 04:12) писал:
Спасибо!
#30
Отправлено 27 Август 2013 - 09:20
Ещё хотелось бы убрать всплывающую надпись при наведении на картинку.
И как можно отрегулировать размер и положение всплывающего окна?
Спасибо!
#31
Отправлено 27 Август 2013 - 09:30
sotil (27 Август 2013 - 09:20) писал:
1) Вы говорите о всплывающем сообщении картинок в каталоге? Нужно убрать?
2) Размер и всплывающее окно Быстрого заказа?
#32
Отправлено 27 Август 2013 - 09:38
Так же при наведении на картинку в каталоге всплывает окно с увеличенным изображением товара ( то о чём речь), как отрегулировать его положение и размер?
И на сайте повилась ошибка JS
Спасибо!
Аккаунт SL-171968
Да и большая картинка перестала всплывать, блин...
#33
Отправлено 27 Август 2013 - 10:04
1 как в каталоге при наведении на изображение всплывало увеличенное изображение и если есть доп изображения, они чередовались,
2 Убрать всплывающее окошко предлагающее перейти на страницу
#34
Отправлено 27 Август 2013 - 12:01
sotil (27 Август 2013 - 10:04) писал:
1 как в каталоге при наведении на изображение всплывало увеличенное изображение и если есть доп изображения, они чередовались,
2 Убрать всплывающее окошко предлагающее перейти на страницу
2 -
Можно ли изменить вид всплывающей подсказки?
Всплывающая подсказка, добавляемая к изображениям через атрибут title тега <img>, является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и ее настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.
Подробнее здесь - http://htmlbook.ru/f...hchey-podskazki
Поэтому либо убрать прямо в Каталоге -
<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>удалив - title="Перейти на страницу «{goods.NAME}»"
Далее найдите код и удалите код, указанный выше.
<div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
#35
Отправлено 27 Август 2013 - 15:57
Что толку 2 без 1 , странный подход....
#36
Отправлено 28 Август 2013 - 08:20
Цитата
Ну почему же, я отвечаю ежедневно за исключением выходных дней.
Давайте еще разок по порядку. Вам необходимо сделать следующее
1) В шаблоне "Товары" найти
<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 class="prd-image"> <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 class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> </div>
2) далее в файле стилей main.css (если у вас нет файла main.css, но есть файл style.css - то необходимо вставлять в style.css)
.prd-image { position: relative; } .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; }
вся стилизация всплывающего окна - задается именно в этих стилях. Свойства top и left задают положение окна относительно изображения товара. Если вам необходимо изменить размер или другие параметры - меняйте данные стили.
3) В самый конец файла main.js вставьте
$(function() { $('.prd-image a img').bind('mouseenter', function () { $(this).data('hover', true).parent().removeAttr('title'); setTimeout($.proxy(function() { var goods_images_list = $(this).closest('.prd-image').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); }); $('.prd-image a img').bind('mouseleave', function () { var goods_images_list = $(this).closest('.prd-image').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'); } }); });
После всех изменений - очистите кэш в вашем браузере.
#37
Отправлено 28 Август 2013 - 08:25
.goodsListItem, .goodsListItemBlock { overflow: visible !important; }
если же реализация необходима только для списка - то данное изменение проделывать не нужно.
#38
Отправлено 28 Август 2013 - 11:59
Сake (28 Август 2013 - 08:25) писал:
.goodsListItem, .goodsListItemBlock { overflow: visible !important; }
если же реализация необходима только для списка - то данное изменение проделывать не нужно.
В списке всё получилось спасибо!
Для таблицы бы хотелось положение изображения отдельно прописывать...
#39
Отправлено 29 Август 2013 - 02:46
.goodsListItem .goods_images_list > div { left: 118px !important; top: 11px !important; }
после задать уже другие значения left и top
#40
Отправлено 10 Октябрь 2013 - 21:02
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных