CODEWITHSUNDEEP
jqueryhtmlvariables
user5222215
user5222215

Reputation:

I want clicking on a thumbnail to display images from an array

I thought this would be simple, but I can't bridge between my thumbnail images display from an array of images in a Div.

I'm borrowing ideas from an example I saw on variables.

Basically, I have a Div with the first image pre-loaded, and then want the initial image to be replaced by what is selected in the thumbnails underneath.

I have an array, and thought I would index the list items (thumbnails method of display in HTML); just can't get them synced up (very new to variables - if anyone has any tips or solid resources on learning variables and the syntax that would be great, also).

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);

    });
});

Upvotes: 0

Views: 2509

Answers (5)

Jason
Jason

Reputation: 15355

I'm not sure how your HTML is being generated but if it's dynamic you could do something like this:

<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>

Basically store the alternate image as a custom attribute of each thumbnail then use that to change the src attribute on the main image. No array necessary.

Upvotes: 0

Marius Dornean
Marius Dornean

Reputation: 131

You need to get the image index, you can do this using the .index() function of jQuery. Find the index of the image which was clicked, them look up the item in your array as such:

 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]);
        });

You can also make it much cleaner by foregoing the image array and just setting the full size image as a data attribute of your thumbnails as such:

 $(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>

Upvotes: 1

LTasty
LTasty

Reputation: 2008

You need to add hander to img.thumb and read the index of element clicked

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);
});

Example: http://jsfiddle.net/lTasty/51khoatj/

Upvotes: 0

lex82
lex82

Reputation: 11317

There are two jquery constructs that might help you here: First you can get hold of the clicked element like this:

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

See the docs for more details.

Second, you can use jQuery's data() function to access data associated with the element:

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

However, you have to store the data at the element somehow before. (You might also want to save the image url instead of the index). So whenever you create the element and have a reference to it, you can attach data to it like this:

element.data('key', value);

As also shown in the answer of @MariusSoft, you can also set the data via an attribute in your HTML markup.

Upvotes: 0

isherwood
isherwood

Reputation: 61114

You were close. I'm not sure what else you're trying to do, but this covers the simple image clicker:

$(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

Upvotes: 0

Related Questions