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


Изображения Товара В Мобильной Версии


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

#1 yula88

yula88

    Новичок

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

Отправлено 29 Декабрь 2018 - 09:44

Здравствуйте! Помогите доработать страницу товара в мобильной версии.

1. В мобильной версии, на странице товара, под основным фото, добавить стрелки и возможность листать фото.(СКРИНШОТ 1)
1.jpg

2. В мобильной версии, на странице товара, при увеличении изображения, добавить стрелки и возможность листать фото. (СКРИНШОТ 2)

2.jpg

3. В мобильной версии, на странице товара, над изображением,  добавить стрелки и возможность листать фото. (СКРИНШОТ 3)

3.jpg

#2 Vaccina

Vaccina

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

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

Отправлено 29 Декабрь 2018 - 14:30

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите и удалите:
.thumblist-box .prev,.thumblist-box .next{display:none!important;}

далее найдите:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}

замените на:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('{ASSETS_IMAGES_PATH}fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('{ASSETS_IMAGES_PATH}fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('{ASSETS_IMAGES_PATH}blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}

В раздел Сайт - Редактор шаблонов - загрузите следующее изображение:
fancybox_sprite.png

#3 yula88

yula88

    Новичок

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

Отправлено 29 Декабрь 2018 - 16:24

Просмотр сообщенияVaccina (29 Декабрь 2018 - 14:30) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите и удалите:
.thumblist-box .prev,.thumblist-box .next{display:none!important;}

далее найдите:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}

замените на:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('{ASSETS_IMAGES_PATH}fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('{ASSETS_IMAGES_PATH}fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('{ASSETS_IMAGES_PATH}blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}

В раздел Сайт - Редактор шаблонов - загрузите следующее изображение:
Прикрепленный файл fancybox_sprite.png

Спасибо, но получилось только по 1-му пункту.

#4 Vaccina

Vaccina

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

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

Отправлено 29 Декабрь 2018 - 16:44

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}
.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}
.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}
.fancybox-nav:hover span {
	visibility: visible;
}

замените на:
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: visible;
}
.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}
.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

далее зайдите в main.js - найдите:
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom, .vertical-ticker a').click(function(){

замените на:
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom, .vertical-ticker a, .general-img #zoom1').click(function(){


#5 yula88

yula88

    Новичок

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

Отправлено 29 Декабрь 2018 - 17:08

Просмотр сообщенияVaccina (29 Декабрь 2018 - 16:44) писал:

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}

замените на:
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: visible;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}

далее зайдите в main.js - найдите:
 // Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom, .vertical-ticker a').click(function(){

замените на:
 // Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom, .vertical-ticker a, .general-img #zoom1').click(function(){

Теперь при увеличении изображения можно листать, но стрелки не отображаются.

#6 Vaccina

Vaccina

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

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

Отправлено 03 Январь 2019 - 10:06

Здравствуйте.

Уточните пожалуйста, стрелки не отображаются именно при увеличении фото товара?

#7 yula88

yula88

    Новичок

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

Отправлено 04 Январь 2019 - 11:06

Просмотр сообщенияVaccina (03 Январь 2019 - 10:06) писал:

Здравствуйте.

Уточните пожалуйста, стрелки не отображаются именно при увеличении фото товара?

Здравствуйте! Под основным фото стрелки есть:

IMG_2412.PNG

При увеличении изображения листать можно, но стрелки не отображаются.

IMG_2413.PNG

#8 stasia

stasia

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

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

Отправлено 06 Январь 2019 - 13:10

Просмотр сообщенияyula88 (04 Январь 2019 - 11:06) писал:

Здравствуйте! Под основным фото стрелки есть:

Прикрепленный файл IMG_2412.PNG

При увеличении изображения листать можно, но стрелки не отображаются.

Прикрепленный файл IMG_2413.PNG

Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код(строки с 861 по 865):

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite@2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}

Замените его на:

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
/* background-image: url('fancybox_sprite@2x.png'); */
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}


#9 yula88

yula88

    Новичок

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

Отправлено 06 Январь 2019 - 16:27

Просмотр сообщенияstasia (06 Январь 2019 - 13:10) писал:


Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код(строки с 861 по 865):

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite@2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}

Замените его на:

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
/* background-image: url('fancybox_sprite@2x.png'); */
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}

Получилось. Спасибо.




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

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