#1
Отправлено 26 Март 2014 - 18:17
Как добавить кнопку "Увеличить изображение" под главное фото в карточке товара?
Пример: http://covermarket16...4-4S-fioletovij
Чтобы на сайте поверх страницы открывалось фото товара в натуральную величину. С возможностью пролистывания всех фото этого товара.
И желательно чтобы это было именно кнопкой (как кнопка "купить", на картинке выше), а не ссылкой.
Подскажите пожалуйста, как мне реализовать данную вещь. Спасибо!
#2
Отправлено 26 Март 2014 - 20:20
ChicksRoom (26 Март 2014 - 18:17) писал:
Как добавить кнопку "Увеличить изображение" под главное фото в карточке товара?
Пример: http://covermarket16...4-4S-fioletovij
Чтобы на сайте поверх страницы открывалось фото товара в натуральную величину. С возможностью пролистывания всех фото этого товара.
И желательно чтобы это было именно кнопкой (как кнопка "купить", на картинке выше), а не ссылкой.
Подскажите пожалуйста, как мне реализовать данную вещь. Спасибо!
Попробуйте сделать по этой инструкции. Если все получится, можно потом будет вывести кнопкой
#5
Отправлено 27 Март 2014 - 01:19
Цитата
#6
Отправлено 27 Март 2014 - 03:46
Сake (27 Март 2014 - 01:19) писал:
Большое спасибо! всё получилось))
Могу ли я спросить у вас еще кое-что!?)
1) Можно ли увеличить отступ между ссылкой на увеличение и рамкой фото товара? Если да, где искать значения?
2) Можно ли увеличить отступ между полосой и виджетом Вк?
3) Как кнопку "Купить" сделать шире?
4-а) Можно ли увеличить отступ? Как?
4-б) отпадает.
И можно ли сделать всплывающее окошко в каталоге сделать полупрозрачным?
Заранее благодарю и огромное спасибо!!!)
#7
Отправлено 27 Март 2014 - 04:08
.goodsImageZoom a { margin-top: 10px; display: block; }2.вы вставляли данный виджет в шаблоне Товар, перед ним пропишите <br />
3.найдите:
input.button_cart_product { background-color: #FF99CC; }замените на:
input.button_cart_product { background-color: #FF99CC; width: 130px; }далее можете по своему усмотрению увеличить или уменьшить стиль width
4.1.перед кодом виджета данной кнопки пропишите <br />
5.найдите:
.prod_hold > div .prod-info-fly { width: 200px; }замените на:
.prod_hold > div .prod-info-fly { opacity: 0.9 !important; width: 200px; }
#8
Отправлено 27 Март 2014 - 04:38
Vaccina (27 Март 2014 - 04:08) писал:
.goodsImageZoom a { margin-top: 10px; display: block; }2.вы вставляли данный виджет в шаблоне Товар, перед ним пропишите <br />
3.найдите:
input.button_cart_product { background-color: #FF99CC; }замените на:
input.button_cart_product { background-color: #FF99CC; width: 130px; }далее можете по своему усмотрению увеличить или уменьшить стиль width
4.1.перед кодом виджета данной кнопки пропишите <br />
5.найдите:
.prod_hold > div .prod-info-fly { width: 200px; }замените на:
.prod_hold > div .prod-info-fly { opacity: 0.9 !important; width: 200px; }
Спасибо большое! Единственное что не получилось - пункт 4.1, почему -не знаю(( не хочет отступать, ни в какую!
И еще хотел узнать - при добавлении прозрачности на всплывающее окно (пункт 5), можно ли сделать прозрачным только его фон? не затрагивая других элементов этого окна?
#9
Отправлено 27 Март 2014 - 04:47
<div style="margin-top:15px;"> код кнопки </div>5.тогда лучше найдите:
.prod_hold > div .prod-info-fly, .prod_hold_recent > div .prod-info-fly { background: #FFFFFF; bottom: -252px; display: none; left: 0; min-height: 120px; opacity: 0; padding: 20px 5px; position: absolute; text-align: center; width: 210px; }и замените на:
.prod_hold > div .prod-info-fly, .prod_hold_recent > div .prod-info-fly { background: rgba(255, 255, 255, 0.5); bottom: -252px; display: none; left: 0; min-height: 120px; opacity: 0; padding: 20px 5px; position: absolute; text-align: center; width: 210px; }
#10
Отправлено 27 Март 2014 - 04:58
Vaccina (27 Март 2014 - 04:47) писал:
<div style="margin-top:15px;"> код кнопки </div>5.тогда лучше найдите:
.prod_hold > div .prod-info-fly, .prod_hold_recent > div .prod-info-fly { background: #FFFFFF; bottom: -252px; display: none; left: 0; min-height: 120px; opacity: 0; padding: 20px 5px; position: absolute; text-align: center; width: 210px; }и замените на:
.prod_hold > div .prod-info-fly, .prod_hold_recent > div .prod-info-fly { background: rgba(255, 255, 255, 0.5); bottom: -252px; display: none; left: 0; min-height: 120px; opacity: 0; padding: 20px 5px; position: absolute; text-align: center; width: 210px; }
спасибо!!!!!!!!!)
#11
Отправлено 28 Март 2014 - 17:35
Подскажите, что я упустила?
В итоге всех моих манипуляций картинка увеличивается, но на весь экран, а хочется чтобы рамка с крестиком как тут:
http://covermarket16...4-4S-fioletovij
SL - 281321
#12
Отправлено 28 Март 2014 - 22:58
ritikkk (28 Март 2014 - 17:35) писал:
Подскажите, что я упустила?
В итоге всех моих манипуляций картинка увеличивается, но на весь экран, а хочется чтобы рамка с крестиком как тут:
http://covermarket16...4-4S-fioletovij
SL - 281321
$(function() { $('a[rel="gallery"]').fancybox(); // Увеличение изображение при клике на него и открытие галереи изображений $('.goodsImageZoom a, .image-additional a').click(function(){ if($(this).closest('.image-additional').length) { $('.goodsImageZoom').attr('data', $(this).attr('data')); return(true); } $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click'); return(false); }); });
Темы с аналогичным тегами кнопка, увеличить
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Веган →
Страница товара →
Добавление Кнопки Быстрого ЗаказаАвтор Гость_Vugi_* , 25 сент. 2020 кнопка, купитьв1клик, ыстрыйзаказ |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Техно →
Каталог товаров →
Кнопка Под ЗаказАвтор Гость_like.hornet.6_* , 09 апр. 2020 под заказ, кнопка, техно |
|
|||
Вопросы работы сервиса StoreLand →
Инструкция по использованию (документация) →
КнопкаАвтор Гость_неизвестность_* , 12 мая 2016 Кнопка |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лазурь →
Кнопка "под Заказ" (Лазурь)Автор Гость_Aza102_* , 20 янв. 2016 Кнопка, под, заказ, тема, лазурь и 2 еще... |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лазурь →
Изменение общей стилистики →
Как Добавить КнопкуАвтор Гость_Clean-tool.ru_* , 15 окт. 2015 кнопка |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных