Опубликовано: 16 января 2016
Карточка товара: дополнительные фото слева , а не снизу. Есть решение
Подскажите пожалуйста , как такое реализовать.
Заранее , большое спасибо Вам за ответ.
- Коломна, ул. Кирова, 60а, офис 7
- +7 (995) 656-25-45
- kolmakov.igor@gmail.com
Комментарии (4)
Можно сделать этот блок обтекаемым
- если изображений много, то часть будет размещаться слева от основного, а часть снизу
- если изображений мало, то они слева от основного
- если доп. изображений нет, то фото как и было ранее на всю ширину
1. в файле "product.images.html" (магазин-витрина-шаблоны)
заменить строку
<div class="image" id="product-core-image">
на
<div class="image{if count($product.images) > 1} mimg{/if}" id="product-core-image">
2. в пользовательских стилях прописать правила
@media only screen and (min-width: 580px){ .mimg.image#product-core-image { float: right; } .more-images { text-align: left; } .more-images .image { text-align: center; margin: 0 3px 9px; } } @media only screen and (min-width: 1366px){ .mimg.image#product-core-image { width: 78%; } } @media only screen and (min-width: 1210px) and (max-width: 1366px){ .mimg.image#product-core-image { width: 75%; } } @media only screen and (min-width: 580px) and (max-width: 1210px){ .mimg.image#product-core-image { width: 70%; } }Если в товаре мало дополнительных фото, то основное фото выходит за границы
перед конструкцией
{/if}
</figure>
пропишите
<div class="clear-both"></div>
Добрый день, сделал по инструкции, но почему-то не получилось. Теперь так http://g-bike.ru/product/termokruzhka-contigo-west...
Попробуйте так:
@media only screen and (min-width: 1366px){ .mimg.image#product-core-image { width: 65%; } } @media only screen and (min-width: 1210px) and (max-width: 1366px){ .mimg.image#product-core-image { width: 60%; } } @media only screen and (min-width: 580px) and (max-width: 1210px){ .mimg.image#product-core-image { width: 55%; } }Сейчас если много фото, то при заполнении слева, дополнительные фото уходят вниз основного фото. Возможно ли что бы начинался слева второй ряд.
И второй вопрос, как сделать отображение дополнительные фото не слева, а справа от фото.
1) При использовании текущего подхода построения размещения основного и дополнительных изображений сделать описанную вами модификацию нельзя.
2) Для смены расположения дополнительных изображений в строках:
.mimg.image#product-core-image { float: right; } .more-images { text-align: left; }сделайте следующую замену:
.mimg.image#product-core-image { float: left; } .more-images { text-align: right; }