Now I will try to explain everything ...

<div id="imageContainer"></div> // html, тут миниатюрмы будут <img id="realSizeImg"> // тут реальный размер картинки после клика по миниатюре

-

 #imageContainer img{ // css, делаем миниатюры и отступ между ними width: 10%; height: 10%; margin:10px; }

-

 var imagesArray = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); //массив с изображениями var imgCounter = 0; //счетчик, с помощью которого будем бегать по элементам массива window.onload = function () { var imageContainer = document.getElementById("imageContainer"); //где будут миниатюры for (var i = 0; i < imagesArray.length; i++) { //вытаскиваем все картинки var imgElement = document.createElement("IMG"); //создаем элементы <IMG> imgElement.src = imagesArray[i]; //каждому присваиваем линк на картинку imgElement.onclick = openRealSize; //при клике на миниатюру, запускаем функцию, которая открывает оригинал картинки в другом DIVe imageContainer.appendChild(imgElement); //прикрепляем <img> к родительскому контейнеру с миниатюрами } } function openRealSize() { var realSizeImgDiv = document.getElementById("realSizeImg"); //ищем <img> елемент, где будет открываться оригинал изображения realSizeImgDiv.src = this.src; //присваиваем ссылку на картинку }

Also imagine that we have 2 buttons "Forward" and "Back", and 2 functions, respectively, to realize the transition to the picture forward or backward. In them we used our imgCounter counter to make the array "cyclical", i.e. if the user is sitting in the picture 0 of the array element and presses back - we throw it at the very end of the array, and vice versa ... if at the end he presses Forward - we throw it at the very beginning of the array.

Now such a question is how to force the IMGamer imgCounter to assign the element number of the imagesArray in the image when clicking on the thumbnail. In order to click on the thumbnail ... by pressing the "left" and "right" buttons, it switches 1 back from the selected thumbnail or respectively 1 forward from the thumbnail.

I thought in the openRealSize function somehow through this assign ... failed.

    1 answer 1

    Cycle + condition, or - indexOf .

    UPD 2:

     for(i = 0; i < imagesArray.length; i++) if ( imagesArray[i] == this.src.match(/(\d+\.jpg)$/)[0] ) imgCounter = i;
    • I can’t comprehend something: “cycle + condition I understood to do in the openRealSize function? I had the idea to compare the“ link to the picture ”that came from this.src and the“ array contents ”, and in case of coincidence, assign the counter number to the variable element of the array, but does not work: ( - Denis Masster
    • Thanks a lot) I actually had the same cycle, the problem turned out to be that this.src gives the full path with the domain_name / 5.jpg and the elements in the array were stored just in the form 5.jpg solved this a bit "not dynamically", but it works .. if (" domain_name " + imagesArray [i] == this.src) do you have any idea how this could be solved without such crutches? for the <img> element - the link except for the full path cannot be pulled out at all. in php this would be solved through basename (), in javascript I haven’t seen such an analog yet - Denis Masster
    • In your case, see the code in the answer. - Oleg
    • I see, thank you again :) - Denis Masster