Быстрый Просмотр
#101
Отправлено 28 Август 2014 - 18:01
#102
Отправлено 28 Август 2014 - 20:16
Danil (27 Август 2014 - 10:11) писал:
1)Зайдите в cartpanel.css и найдите код
#float-cart { position: fixed; top: 0; left: 50%; margin: 0 auto; margin-left: -500px; width: 1000px; z-index: 10000; color: #fff; background-color: #ECEA2E; padding: 10px 0 10px; display: none; font: 10pt arial, helvetics, sens-serif; border-bottom: 1px solid #009900; border-radius: 0px 0px 15px 15px; -moz-border-radius: 0px 0px 15px 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc); }И замените на
#float-cart { position: fixed; top: 0; left: 50%; margin: 0 auto; margin-left: -500px; width: 1000px; z-index: 2000; color: #fff; background-color: #ECEA2E; padding: 10px 0 10px; display: none; font: 10pt arial, helvetics, sens-serif; border-bottom: 1px solid #009900; border-radius: 0px 0px 15px 15px; -moz-border-radius: 0px 0px 15px 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc); }2) Зайдите в main.css и добавьте код
.pad-box .goodsDataOpinion { display: none; }
В html найдите код
Ещё вопрос: почему когда убираю отзывы из быстрого просмотра они исчезают и со страницы товара?
#104
Отправлено 28 Август 2014 - 20:35
Danil (27 Август 2014 - 10:11) писал:
1)Зайдите в cartpanel.css и найдите код
#float-cart { position: fixed; top: 0; left: 50%; margin: 0 auto; margin-left: -500px; width: 1000px; z-index: 10000; color: #fff; background-color: #ECEA2E; padding: 10px 0 10px; display: none; font: 10pt arial, helvetics, sens-serif; border-bottom: 1px solid #009900; border-radius: 0px 0px 15px 15px; -moz-border-radius: 0px 0px 15px 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc); }И замените на
#float-cart { position: fixed; top: 0; left: 50%; margin: 0 auto; margin-left: -500px; width: 1000px; z-index: 2000; color: #fff; background-color: #ECEA2E; padding: 10px 0 10px; display: none; font: 10pt arial, helvetics, sens-serif; border-bottom: 1px solid #009900; border-radius: 0px 0px 15px 15px; -moz-border-radius: 0px 0px 15px 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75); filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc); }2) Зайдите в main.css и добавьте код
.pad-box .goodsDataOpinion { display: none; }
В html найдите код
Вот этой инструкцией.
#105
Отправлено 28 Август 2014 - 20:48
tolikkansk (28 Август 2014 - 20:35) писал:
Вместо:
.pad-box .goodsDataOpinion { display: none; }
напишите:
table.arcticmodal-container_i .goodsDataOpinion { display: none; }
и отмените изменения из сообщения
http://forum.storela...ку/#entry155641
#106
Отправлено 29 Август 2014 - 01:18
sotil (28 Август 2014 - 11:31) писал:
Спасибо, Cake! Заработало
Подскажите как реализовать такую функцию?
У вас сейчас именно так и реализовано, за исключением увеличения размера блока товара. Корректно так реализовать не получиться, так как при увеличении блока (при наведении) будут опускаться нижние блоки с товаром. В результате блоки с товарами будут судорожно прыгать.
Может посмотрите на этот сайтwildberries? тут реализовано, то что меня интересует
Хотелось бы чтобы при наведении на блок с товаром в "таблице" , предлагались дополнительные картинки для просмотра.
А расширения просто накладываются на смежные товарные блоки
Добавьте в самый конец файла стилей main.css следующий код
.goodsListItemBlock { position: relative; } .goodsListItem, .content_page, .goodsListItemBlock { overflow: visible; } .goodsListItemImages { background: #fff; border: 1px solid #ccc; display: none; height: 300px; left: -62px; position: absolute; top: -1px; width: 60px; z-index: 9999; } .goodsListItemBlock:hover .goodsListItemImages { display: block; } .goodsListImage a { border-bottom: 1px solid #ccc; display: block; padding: 10px 0; } .goodsListImage a:hover { outline: 2px solid #8052c2; }
далее в файл main.js вставьте код
$(function() { $('.goodsListImage a').click(function() { $(this).closest('.goodsListItemBlock') .find('.goodsListItemImage img').attr('src', $(this).attr('href')); return(false); }).hover(function() { $(this).trigger('click'); }); });
далее в шаблон "Товары" после строки
<div class="goodsListItemBlock withBorder cornerAll">
вставьте код
<div class="goodsListItemImages"> {% FOR images %} <div class="goodsListImage"> <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
tolikkansk (28 Август 2014 - 08:06) писал:
Возможно вы использовали не предназначенный вам код для файла main.js. В сообщении http://forum.storela...100#entry155407 приведено 2 разных содержимого файла main.js. Используйте только содержимое предназначенное для вашего файла. Смотрите сообщение по цитатам.
tolikkansk (28 Август 2014 - 17:30) писал:
Выполните замену содержимого файла main.js как было сказано ранее в сообщении http://forum.storela...100#entry155407
#107
Отправлено 29 Август 2014 - 08:43
Сake (29 Август 2014 - 01:18) писал:
.goodsListItemBlock { position: relative; } .goodsListItem, .content_page, .goodsListItemBlock { overflow: visible; } .goodsListItemImages { background: #fff; border: 1px solid #ccc; display: none; height: 300px; left: -62px; position: absolute; top: -1px; width: 60px; z-index: 9999; } .goodsListItemBlock:hover .goodsListItemImages { display: block; } .goodsListImage a { border-bottom: 1px solid #ccc; display: block; padding: 10px 0; } .goodsListImage a:hover { outline: 2px solid #8052c2; }
далее в файл main.js вставьте код
$(function() { $('.goodsListImage a').click(function() { $(this).closest('.goodsListItemBlock') .find('.goodsListItemImage img').attr('src', $(this).attr('href')); return(false); }).hover(function() { $(this).trigger('click'); }); });
далее в шаблон "Товары" после строки
<div class="goodsListItemBlock withBorder cornerAll">
вставьте код
<div class="goodsListItemImages"> {% FOR images %} <div class="goodsListImage"> <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
Подскажите как можно ограничить количество картинок до 5 при этом сохранить иконку основной картинки
#108
Отправлено 29 Август 2014 - 23:38
<div class="goodsListItemImages"> {% FOR images %} <div class="goodsListImage"> <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
заменить на код
<div class="goodsListItemImages"> {% FOR images %}{% IF goods.images.index > 5 %}{break}{% ENDIF %} <div class="goodsListImage"> <a href="{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
#109
Отправлено 30 Август 2014 - 06:50
Сake (29 Август 2014 - 23:38) писал:
<div class="goodsListItemImages"> {% FOR images %} <div class="goodsListImage"> <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
заменить на код
<div class="goodsListItemImages"> {% FOR images %}{% IF goods.images.index > 5 %}{break}{% ENDIF %} <div class="goodsListImage"> <a href="{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a> </div> {% ENDFOR %} </div>
#111
Отправлено 30 Август 2014 - 11:50
Ирина345 (30 Август 2014 - 11:24) писал:
Убрал endif , вроде заработало
Еще надо сделать, чтобы исходная картинка возвращалась на место после просмотра доп картинок
#114
Отправлено 02 Сентябрь 2014 - 02:08
$(function() { $('.goodsListItemBlock').mouseleave(function() { var objImageLink = $(this).find('.goodsListImage:first a'); if (objImageLink.length) { $(this).find('.goodsListItemImage img').attr('src', objImageLink.attr('href')); } }); });
#115
Отправлено 02 Сентябрь 2014 - 06:52
Ещё хочется сделать нижний блок с кнопкой "быстрый просмотр" появлялся при наведении , также как справа появляются доп картинки
#116
Отправлено 02 Сентябрь 2014 - 13:15
sotil (02 Сентябрь 2014 - 06:52) писал:
Ещё хочется сделать нижний блок с кнопкой "быстрый просмотр" появлялся при наведении , также как справа появляются доп картинки
#117
Отправлено 02 Сентябрь 2014 - 21:39
Ирина345 (02 Сентябрь 2014 - 13:15) писал:
1 Как показано на картинке, товарный блок в списке "ТАБЛИЦА", если на нём нет курсора занимает минимальную площадь, при наведении курсора он должен расширяться вправо (реализовано) и вниз (необходимо сделать), чтобы в правом наросте показались дополнительные картинки (реализовано), в нижнем была кнопка "быстрый просмотр" (реализовано наполовину). Задумка позволяет сэкономить занимаемую площадь, например уменьшив исходный товарный блок или увеличить картинку в блоке.
2 Когда всплывает модальное окно, добавленный блок с доп картинками, некоторое время остаётся поверх модального окна, пока мышка не сдвинется.
#118
Отправлено 02 Сентябрь 2014 - 22:00
sotil (02 Сентябрь 2014 - 21:39) писал:
2 Когда всплывает модальное окно, добавленный блок с доп картинками, некоторое время остаётся поверх модального окна, пока мышка не сдвинется.
1.если реализовать Вашу идею, то товар к сожалению при наведение будет сдвигаться(пример на скриншоте)
#120
Отправлено 03 Сентябрь 2014 - 02:29
.fastview { background: #f1f1f1; border: 1px solid #d9d9d9; border-radius: 10px; clear: both; display: none; height: 18px; margin: 0 auto; padding: 5px; width: 150px; }замените на:
.fastview { background: none repeat scroll 0 0 #f1f1f1; border: 2px solid #ff8b36; bottom: -34px; clear: both; display: none; height: 20px; left: -1px; margin: 0 auto; padding: 5px; position: absolute; width: 206px; z-index: 99; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных