2

Верстаю макет интернет-магазина, в товаре есть фото товара и его вариации (превью). введите сюда описание изображения

Собственно вопрос, это задача верстальщика или того, кто будет натягивать шаблон на движок? Если это задача верстальщика, то как лучше реализовать это?

4
  • Я бы сказал это работа того, кто будет заполнять базу товарами. А программист должен обеспечить для него удобную работу, т.е. что бы он тупо заливал фото к товару, а программа уже сама генерит из него картинки нужных размеров и выводит где задумано
    – Mike
    8 сен 2016 в 21:04
  • Все оформление, работа превью товара, калькулятор - это верстальщик. А вот уже обработка заказа - это уже back-end.
    – SVE
    9 сен 2016 в 4:30
  • Я так понимаю, щелкая по миниатюре фото, она должна отображаться в основном окне. Как это реализовать? 9 сен 2016 в 4:34
  • выводи модальное окно, с нужным размером фотки
    – pepel_xD
    9 сен 2016 в 5:22

1 ответ 1

2

Это работа верстака на все 100%. По простому без плагинов на чистом js примерно так:

var thumbs = document.querySelectorAll('#thumbs > a');
var big = document.getElementById('big');

for (var i = 0; i < thumbs.length; i++) {
    thumbs[i].addEventListener('click', function(e) {
        e.preventDefault();
        big.src = this.href;
    });
}
#big { width: 300px; margin-bottom: 10px; display: block }

#thumbs a { display: block; float: left; margin-right: 10px; }
#thumbs a img { height: 50px; }
<div>
  <img src="//c4.staticflickr.com/9/8348/28914145963_11390118bf_k.jpg" id="big">
</div>
<div id="thumbs">
  <a href="//c4.staticflickr.com/9/8348/28914145963_11390118bf_k.jpg">
    <img src="//c4.staticflickr.com/9/8348/28914145963_487a628204_t.jpg">
  </a>
  <a href="//c5.staticflickr.com/9/8138/29253663020_bd1cfa9588_h.jpg">
    <img src="//c5.staticflickr.com/9/8138/29253663020_ac9d8fc85a_m.jpg">
  </a>
  <a href="//c6.staticflickr.com/8/7744/29465490141_87d5236c24_b.jpg">
    <img src="//c6.staticflickr.com/8/7744/29465490141_87d5236c24_t.jpg">
  </a>
</div>

Для большей кроссбраузерности можно использовать jQuery; Или вообще плагин для этого найти.

7
  • Лучше добавить background-image и заливать фотки в него. Тогда картинка не будет менять размер. И задать bacground-size: cover. Это примечание если кто воспользуется этим скриптом :)
    – Telion
    9 сен 2016 в 10:11
  • @Levelleor совсем несогласен. Если нужно отцентровать картинку есть другие способы, например transform translate с position absolute; ну ну крайняк table-cell; В вашем комментарии вы лишитесь отслеживать статус загрузки изображения и зарежете возможно полезные края картинки. 9 сен 2016 в 10:14
  • Ну можно использовать contain. Отслеживать загрузку картинки можно скриптом. Нужно контролировать размер блока с картинкой что бы дизайн не рухнул. В конце концов когда главная картинка меняет размер получается очень неудобная навигация.
    – Telion
    9 сен 2016 в 10:41
  • Кстати а Transform translate может испортить качество изображения и размыть его, так что его тоже крайне не рекомендую использовать. Если уж так то только table-cell...
    – Telion
    9 сен 2016 в 10:42
  • Посмотрел бы как вы будете отслеживать загрузку background-image. ) Мне в голову приходит только xhr в string с конвертацией в base64, но такая садамия на любителя. Да, с трансформом может быть беда, есть такая тема. 9 сен 2016 в 10:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.