Я хочу нажимать на миниатюру для отображения изображений из массива

Question

Я думал, что это будет просто, но я не могу соединиться между отображением изображений миниатюр из массива изображений в Div.

Я заимствую идеи из примера, который я видел по переменным.

В принципе, у меня есть Div с первым загруженным изображением, а затем требуется, чтобы исходное изображение было заменено на то, что выбрано в миниатюрах снизу.

У меня есть массив, и я думал, что буду индексировать элементы списка (метод отображения миниатюр в HTML); просто не могу заставить их синхронизироваться (очень новые для переменных - если у кого-то есть какие-то подсказки или твердые ресурсы по изучающим переменным и синтаксис, который также будет замечателен).

HTML

<div class="gallery"> 
    <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" /> 
</div> 
<div class="thumbs"> 
    <ul class="galleryThumbs"> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/sam.jpg" /> 
     </li> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/cat.jpg" /> 
     </li> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/horse.jpg" /> 
     </li> 
    </ul> 
</div> 

Jquery

$(function() { 
    var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"]; 
    var indexNum = ("li.gallery").index(); 
    var indexed = imageName + indexNum; 

    $("img").click(function() { 
     $("#switcher").attr("src", indexed); 

     if (indexNum > 2)(indexNum = 0); 

    }); 
}); 

Answer 1

Вы были близки. Я не уверен, что еще вы пытаетесь сделать, но это покрывает простой кликер изображения:

$(function() { 
    var images = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"]; 

    $("img").click(function() { 
     var index = $(this).parent().index(); 

     $('#switcher').attr('src', images[index]); 
    }); 
}); 

Demo

Answer 2

Вам нужно получить индекс изображения, вы можете сделать это с помощью функции .index() в JQuery. Найти индекс изображения, которое щелкнули, они смотрят вверх элемент в массиве, как, например:

var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"]; 

     $("img").click(function() { 
      //Get our image index from all images in the gallery 
      var myIndex = $(".gallery img").index(this) - 1; 
      $("#switcher").attr("src", imageName[myIndex]); 
     }); 

Вы можете также сделать его гораздо чище по вышеизложенным массив изображения и просто установив полный размер изображения в качестве данных атрибут ваших миниатюр, как, например:

$(function() { 
 
    $("img").click(function() { 
 
    var $input = $(this); 
 
    $("#switcher").attr("src", $input.attr("data-large")); 
 
    }); 
 
});

<div class="gallery"> 
 
    <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" /> 
 
</div> 
 
<div class="thumbs"> 
 
    <ul class="galleryThumbs"> 
 
    <li class="gallery"> 
 
     <img class="thumb" src="Images/thumbs/sam.jpg" data-large="Images/samlrg.jpg" /> 
 
    </li> 
 
    <li class="gallery"> 
 
     <img class="thumb" src="Images/thumbs/cat.jpg" data-large="Images/catlrg.jpg" /> 
 
    </li> 
 
    <li class="gallery"> 
 
     <img class="thumb" src="Images/thumbs/horse.jpg" data-large="Images/horselrg.jpg" /> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

Есть два JQuery конструкции, которые могли бы помочь вам здесь: Во-первых вы можете разжиться щелкнутым элемент, как это:

$("img").click(function() { 
    $(this) // will refer to the image element clicked 
}); 

См the docs для более подробной информации.

Во-вторых, вы можете использовать JQuery-х data() function для доступа к данным, связанные с элементом:

$("img").click(function() { 
    //gives you whatever you stored under the key 'index' 
    var index = $(this).data('index'); 
}); 

Однако, вы должны хранить данные в элементе как-то раньше. (Вы также можете сохранить URL-адрес изображения вместо индекса). Таким образом, всякий раз, когда вы создаете элемент и иметь ссылку на него, вы можете прикрепить данные к нему, как это:

element.data('key', value); 

Как показано в ответе @MariusSoft, вы также можете установить данные с помощью атрибута в вашей HTML-разметка.

Answer 4

Вам необходимо добавить обработчика в img.большой палец и прочитать индекс элемента щелкнул

var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"]; 

$("img.thumb").click(function() { 
    var imageUrl=imageName[$("img.thumb").index(this)]; 
    $("#switcher").attr("src", imageUrl); 
}); 

Пример: http://jsfiddle.net/lTasty/51khoatj/

Answer 5

Я не знаю, как генерируется ваш HTML, но если это динамический вы могли бы сделать что-то вроде этого:

<div class="gallery"> 
    <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" /> 
</div> 
<div class="thumbs"> 
    <ul class="galleryThumbs"> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/sam.jpg" altSrc="Images/samlrg.jpg" /> 
     </li> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/cat.jpg" altSrc="Images/catlrg.jpg" /> 
     </li> 
     <li class="gallery"> 
      <img class="thumb" src="Images/thumbs/horse.jpg" altSrc="Images/horselrg.jpg" /> 
     </li> 
    </ul> 
</div> 

<script> 
    $(document).ready(function() { 

     //When someone clicks any image with the class "thumb" 
     $(".thumb").click(function() { 
      //Get that image's altSrc attribute value 
      var altSrc = $(this).attr("altSrc"); 

      //Set the main images src to that value   
      $("#switcher").attr("src", altSrc); 
     }); 
    }); 
</script> 

В основном сохранить альтернативное изображение в качестве настраиваемого атрибута для каждого эскиза, а затем использовать его для изменения атрибута src на основном изображении. Нет необходимости в массиве.