I make up the layout of an online store, in the product there is a photo of the product and its variations (preview). enter image description here

Actually the question is, is the task of the layout designer or of the one who will pull the template onto the engine? If this is the task of the coder, then how best to implement it?

  • I would say this is the work of someone who will fill the base with goods. And the programmer should provide a convenient job for him, i.e. what would he stupidly upload photos to the product, and the program itself generates images of the desired size from it and displays where it is intended - Mike
  • All the design, the work of the preview product, a calculator - this is a coder. And now order processing is already a back-end. - HamSter
  • As I understand it, clicking on a thumbnail photo, it should be displayed in the main window. How to implement it? - Alexander
  • display the modal window with the correct size of the photo - pepel_xD

1 answer 1

This is the workbench at 100%. Simple without plug-ins on pure js like this:

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>

For greater cross-browser compatibility, you can use jQuery; Or even a plugin for this to find.

  • It is better to add a background-image and upload photos to it. Then the picture will not change size. And set the bacground-size: cover. This note if someone uses this script :) - Telion
  • @Levelleor completely disagree. If you need to center the image there are other ways, for example, transform translate with position absolute ; well, goodies table-cell ; In your commentary, you will lose track of the image upload status and slash possibly useful edges of the image. - Artem Gorlachev
  • Well, you can use contain. Track download pictures can script. It is necessary to control the size of the block with a picture so that the design would not collapse. In the end, when the main picture resizes, a very inconvenient navigation is obtained. - Telion
  • By the way, Transform translate can spoil the image quality and blur it, so I highly recommend it not to be used either. If so, then only table-cell ... - Telion
  • Looked at how you would track the background-image download. ) It only comes to my mind that xhr in string converted to base64 , but this is an amateur one. Yes, there can be trouble with transform, there is such a topic. - Artem Gorlachev