1
Изображения Товара В Мобильной Версии
Автор yula88, 29 дек. 2018 09:44
Сообщений в теме: 8
#1
Отправлено 29 Декабрь 2018 - 09:44
Здравствуйте! Помогите доработать страницу товара в мобильной версии.
1. В мобильной версии, на странице товара, под основным фото, добавить стрелки и возможность листать фото.(СКРИНШОТ 1)
2. В мобильной версии, на странице товара, при увеличении изображения, добавить стрелки и возможность листать фото. (СКРИНШОТ 2)
3. В мобильной версии, на странице товара, над изображением, добавить стрелки и возможность листать фото. (СКРИНШОТ 3)
1. В мобильной версии, на странице товара, под основным фото, добавить стрелки и возможность листать фото.(СКРИНШОТ 1)
2. В мобильной версии, на странице товара, при увеличении изображения, добавить стрелки и возможность листать фото. (СКРИНШОТ 2)
3. В мобильной версии, на странице товара, над изображением, добавить стрелки и возможность листать фото. (СКРИНШОТ 3)
#2
Отправлено 29 Декабрь 2018 - 14:30
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите и удалите:
далее найдите:
замените на:
В раздел Сайт - Редактор шаблонов - загрузите следующее изображение:
Зайдите в раздел Сайт - Редактор шаблонов - 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; }
В раздел Сайт - Редактор шаблонов - загрузите следующее изображение:
#3
Отправлено 29 Декабрь 2018 - 16:24
Vaccina (29 Декабрь 2018 - 14:30) писал:
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите и удалите:
далее найдите:
замените на:
В раздел Сайт - Редактор шаблонов - загрузите следующее изображение:
fancybox_sprite.png
Зайдите в раздел Сайт - Редактор шаблонов - 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
Отправлено 29 Декабрь 2018 - 16:44
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
далее зайдите в main.js - найдите:
замените на:
.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
Отправлено 29 Декабрь 2018 - 17:08
Vaccina (29 Декабрь 2018 - 16:44) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
далее зайдите в main.js - найдите:
замените на:
.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
Отправлено 03 Январь 2019 - 10:06
Здравствуйте.
Уточните пожалуйста, стрелки не отображаются именно при увеличении фото товара?
Уточните пожалуйста, стрелки не отображаются именно при увеличении фото товара?
#8
Отправлено 06 Январь 2019 - 13:10
yula88 (04 Январь 2019 - 11:06) писал:
Здравствуйте! Под основным фото стрелки есть:
IMG_2412.PNG
При увеличении изображения листать можно, но стрелки не отображаются.
IMG_2413.PNG
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
Отправлено 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 анонимных