I want to streamline this whole mess in the code a bit, as the images will become larger and they will occupy a decent place. Here is the actual code:

<img alt="Фото" src="/big-img-1.jpg" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview" idx="0" title="Кликните для увеличения изображения" itemprop="image"> <img alt="Превью: 1" src="/small-img-1.jpg" class="gphoto active" onclick="var el=getElementById('ipreview'); el.src='big-img-1.jpg'; el.setAttribute('idx',0); $('.gphoto').removeClass( 'active' ); $( this ).addClass( 'active' ); return false" /> <img alt="Превью: 2" src="/small-img-1.jpg" class="gphoto" onclick="var el=getElementById('ipreview'); el.src='big-img-2.jpg'; el.setAttribute('idx',1); $('.gphoto').removeClass( 'active' ); $( this ).addClass( 'active' ); return false" /> <img alt="Превью: 3" src="/small-img-1.jpg" class="gphoto" onclick="var el=getElementById('ipreview'); el.src='big-img-3.jpg'; el.setAttribute('idx',2); $('.gphoto').removeClass( 'active' ); $( this ).addClass( 'active' ); return false" /> <img alt="Превью: 4" src="/small-img-1.jpg" class="gphoto" onclick="var el=getElementById('ipreview'); el.src='big-img-4.jpg'; el.setAttribute('idx',3); $('.gphoto').removeClass( 'active' ); $( this ).addClass( 'active' ); return false" />

When you click, the link to the main image is replaced and idx is written to increase in the lightbox.

In general, the script is not very complicated, I am trying to write it now, however I wanted to clarify the sequence of actions. We take the class .gphoto and on click perform the actions prescribed in onclick. How can I set up an image inside a large image and its id to enlarge the main image? What attributes to use for this, what do you think of "srcset" for referring to large images?

Do not kick much. I'm just learning.

  • 1. Can you have only one “big” photo? 2. Do you have the same classes for large and small pictures or not? - Vadim Ovchinnikov

1 answer 1

According to your code, you can do this:

 $(function() { $('.gphoto').click(function() { $('#ipreview').attr('src', $(this).attr('data-big-img')).attr('idx', $(this).attr('data-idx')); $('.gphoto.active').removeClass('active'); $(this).addClass('active'); return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img alt="Фото" src="/big-img-1.jpg" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview" idx="0" title="Кликните для увеличения изображения" itemprop="image"> <img alt="Превью: 1" src="/small-img-1.jpg" class="gphoto active" data-big-img="big-img-1.jpg" data-idx="0" /> <img alt="Превью: 2" src="/small-img-1.jpg" class="gphoto" data-big-img="big-img-2.jpg" data-idx="1" /> <img alt="Превью: 3" src="/small-img-1.jpg" class="gphoto" data-big-img="big-img-3.jpg" data-idx="2" /> <img alt="Превью: 4" src="/small-img-1.jpg" class="gphoto" data-big-img="big-img-4.jpg" data-idx="3" />

  • Thank you very much. Exactly what wanted. - Alexander Goroshev