Перейти к содержимому


Добавление Кнопки "увеличить Изображение".

кнопка увеличить

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 11

#1 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 26 Март 2014 - 18:17

Добрый вечер!

Как добавить кнопку "Увеличить изображение" под главное фото в карточке товара?
Пример: http://covermarket16...4-4S-fioletovij
Изображение

Чтобы на сайте поверх страницы открывалось фото товара в натуральную величину. С возможностью пролистывания всех фото этого товара.

И желательно чтобы это было именно кнопкой (как кнопка "купить", на картинке выше), а не ссылкой.

Подскажите пожалуйста, как мне реализовать данную вещь. Спасибо!

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Март 2014 - 20:20

Просмотр сообщенияChicksRoom (26 Март 2014 - 18:17) писал:

Добрый вечер!

Как добавить кнопку "Увеличить изображение" под главное фото в карточке товара?
Пример: http://covermarket16...4-4S-fioletovij
Изображение

Чтобы на сайте поверх страницы открывалось фото товара в натуральную величину. С возможностью пролистывания всех фото этого товара.

И желательно чтобы это было именно кнопкой (как кнопка "купить", на картинке выше), а не ссылкой.

Подскажите пожалуйста, как мне реализовать данную вещь. Спасибо!

Попробуйте сделать по этой инструкции. Если все получится, можно потом будет вывести кнопкой


#3 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 26 Март 2014 - 20:50

Просмотр сообщенияMikDark (26 Март 2014 - 20:20) писал:

Попробуйте сделать по этой инструкции. Если все получится, можно потом будет вывести кнопкой

спасибо!) будем пробовать.

#4 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 26 Март 2014 - 21:27

Просмотр сообщенияMikDark (26 Март 2014 - 20:20) писал:

Попробуйте сделать по этой инструкции. Если все получится, можно потом будет вывести кнопкой

что-то дельного ничего не вышло из этого(

#5 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 27 Март 2014 - 01:19

Подобный вопрос рассматривался в следующей теме форума http://forum.storela...ести-модификаци Вам необходимо выполнить инструкцию из сообщения #6 для вашего вопроса по увеличению изображения - после цитаты

Цитата

Добавить увеличение картинки как в Сиянии..., типа под картинкой сделать ссылку "увеличить" (лучше кнопкой..., хотя я ее и сам потом прикручу)


#6 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 27 Март 2014 - 03:46

Просмотр сообщенияСake (27 Март 2014 - 01:19) писал:

Подобный вопрос рассматривался в следующей теме форума http://forum.storela...ести-модификаци Вам необходимо выполнить инструкцию из сообщения #6 для вашего вопроса по увеличению изображения - после цитаты

Большое спасибо! всё получилось))

Могу ли я спросить у вас еще кое-что!?)

Изображение

1) Можно ли увеличить отступ между ссылкой на увеличение и рамкой фото товара? Если да, где искать значения?
2) Можно ли увеличить отступ между полосой и виджетом Вк?
3) Как кнопку "Купить" сделать шире?
4-а) Можно ли увеличить отступ? Как?
4-б) отпадает.


И можно ли сделать всплывающее окошко в каталоге сделать полупрозрачным?
Изображение

З
аранее благодарю и огромное спасибо!!!)

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Март 2014 - 04:08

1.В main.css в самый конец вставьте:
.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 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 27 Март 2014 - 04:38

Просмотр сообщенияVaccina (27 Март 2014 - 04:08) писал:

1.В main.css в самый конец вставьте:
.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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Март 2014 - 04:47

4.1 попробуйте код кнопки обернуть в div, пример:
<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 ChicksRoom

ChicksRoom

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 27 Март 2014 - 04:58

Просмотр сообщенияVaccina (27 Март 2014 - 04:47) писал:

4.1 попробуйте код кнопки обернуть в div, пример:
<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 ritikkk

ritikkk

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 58 сообщений
  • ГородМосква

Отправлено 28 Март 2014 - 17:35

Здравствуйте!
Подскажите, что я упустила?

В итоге всех моих манипуляций картинка увеличивается, но на весь экран, а хочется чтобы рамка с крестиком как тут:
http://covermarket16...4-4S-fioletovij


SL - 281321

#12 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 28 Март 2014 - 22:58

Просмотр сообщенияritikkk (28 Март 2014 - 17:35) писал:

Здравствуйте!
Подскажите, что я упустила?

В итоге всех моих манипуляций картинка увеличивается, но на весь экран, а хочется чтобы рамка с крестиком как тут:
http://covermarket16...4-4S-fioletovij


SL - 281321
Здравствуйте, изменения на Вашем сайте выполнили. Нужно было дописать в main.js
$(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);
  });
});






Темы с аналогичным тегами кнопка, увеличить

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных