Новые форумы для: пользователей, администраторов, математиков и филологов.
0

Сейчас попробую все обьяснять...

<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; //присваиваем ссылку на картинку
}

Также представим, что имеем 2 кнопки "Вперед" и "Назад", и 2 функции соответственно, чтобы реализовать переход на картинку вперед или на картинку назад. В них мы использовали наш счетчик imgCounter, чтобы сделать массив "цикличным", т.е. если юзер сидит на картинке 0 элемента массива и нажимает назад - кидаем его в самый конец массива, и наоборот... если он в конце и жмет Вперед - кидаем его в самое начало массива.

Теперь такой вопрос, как заставить при нажатии на миниатюру присвоить СЧЕТЧИКУ imgCounter номер элемента массива imagesArray? Для того, чтобы после нажатия на миниатюру... нажимая на кнопки "влево" и "вправо" оно переключалось на 1 назад от выбранной миниатюры или на соответственно на 1 вперед от миниатюры.

Думал в функции openRealSize как-то через this присвоить... не получилось.

задан 22 Фев 20:17

Denis%20Masster's gravatar image

Denis Masster
3518
98% принятых

изменен 22 Фев 20:21

%D0%A5%D1%8D%D1%88%D0%9A%D0%BE%D0%B4's gravatar image

ХэшКод
5.4k427

1

Цикл + условие, или - indexOf.

UPD 2:

for(i = 0; i < imagesArray.length; i++)
  if ( imagesArray[i] == this.src.match(/(\d+\.jpg)$/)[0] )
    imgCounter = i;
ссылка

отвечен 22 Фев 20:21

exec's gravatar image

exec
263213

изменен 23 Фев 0:06

не получается у меня что-то это осмыслить :(

цикл + условие я так понял делать в функции openRealSize?

была идея сравнивать 'ссылку на картинку' пришедшую по this.src и 'содержимым массива', и в случае совпадения присваивать переменной счетчика номер этого элемента массива, но не работает :(

(22 Фев 20:43) Denis Masster

спасибо огромное )

вообще у меня такой же цикл был, проблема оказалась в том что this.src дает полный путь с http://именем_домена/5.jpg а элементы в массиве хранились просто в виде 5.jpg

решил это немного "не динамично", но зато работает..

if ("http://domain_name/" + imagesArray[i] == this.src )

есть какие-то идеи как это можно было бы решить без таких костылей? у элемента <img> - ссылку кроме как полного пути, никак вытащить нельзя. в php это решилось бы через basename(), в javascript пока такого аналога не встречал

(22 Фев 21:27) Denis Masster

В вашем случае так - смотрите код в ответе.

(23 Фев 0:06) exec

Понятно, спасибо вам еще раз :)

(23 Фев 21:21) Denis Masster
Ваш ответ

Если вы не нашли ответ, задайте вопрос.

Здравствуйте

ХэшКод - это совместно редактируемый форум вопросов и ответов для начинающих и опытных программистов.

Присоединяйтесь!

отмечен:

×1,561

задан
22 Фев 20:17

показан
104 раза

обновлен
23 Фев 21:21

Отслеживать вопрос

по почте:

Зарегистрировавшись, вы сможете подписаться на любые обновления

по RSS:

Ответы

Ответы и Комментарии