You need to make a gallery so that the image is loaded when you click on the thumbnail:

enter image description here

How are these galleries made? Perhaps there are ready-made plugins?

  • github.com/sachinchoolur/lightslider - soledar10
  • It is necessary without a slider. Clicked on the thumbnail, the photo is loaded and changed. - Frontender
  • one
    @ViktorPavlov You most likely mean "you need without animation". Look in the plugin settings. There is an animation speed option. - YozhEzhi

2 answers 2

For your implementation of such a slider there is a wonderful plugin - Fotorama . It allows you to make and thumbnails, and paging on svaypu on mobile devices, and the download indicator is:

<!-- 1. Link to jQuery (1.8 or later), --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB --> <!-- fotorama.css & fotorama.js. --> <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB --> <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB --> <!-- 2. Add images to <div class="fotorama"></div>. --> <div class="fotorama" data-nav="thumbs"> <img src="http://s.fotorama.io/1.jpg"> <img src="http://s.fotorama.io/2.jpg"> </div>

If desired, the animation, if you do not need it in this case, you can turn off or change:

 <!-- 1. Link to jQuery (1.8 or later), --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB --> <!-- fotorama.css & fotorama.js. --> <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB --> <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB --> <!-- 2. Add images to <div class="fotorama"></div>. --> <div class="fotorama" data-nav="thumbs" data-transition="slide" data-clicktransition="crossfade"> <img src="http://s.fotorama.io/1.jpg"> <img src="http://s.fotorama.io/2.jpg"> </div> 

     //создаСм ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события Π½Π° ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π΅: $('#gallery img').click(function(){ //ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ адрСс ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· Π΄Π°Ρ‚Π°-Ρ‚Π΅Π³Π°: var adress=$(this).data('src') //устанавливаСм ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² src основной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ $('#big img').attr('src',adress) }) 
     #gallery img{ cursor:pointer; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="big"> <img src="https://placehold.it/300.png/09f/fff"> </div> <div id="gallery"> <img src="https://placehold.it/100.png/09f/fff" data-src="https://placehold.it/300.png/09f/fff"> <img src="https://placehold.it/100.png/f90/fff" data-src="https://placehold.it/300.png/f90/fff"> <img src="https://placehold.it/100.png/f09/fff" data-src="https://placehold.it/300.png/f09/fff"> <img src="https://placehold.it/100.png/0f9/fff" data-src="https://placehold.it/300.png/0f9/fff"> </div>

    • Your option is no different from mine. Only in my still shows the download image. - Frontender