Using jQuery addClass in a sequence of variable length

Question

I'm trying to use jQuery to generate my own gallery with a div of clickable thumbnails that show/hide a big image when the corresponding thumbnail is clicked.

I've got it working but only with a known number of images (in this case 3) in the gallery. What if I have 30 images in a gallery? I don't want to have to write out the code below 30 times!

What I really want is to change this code....

$('#slideshow-thumbs img.1').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.1').removeClass('hide');
    $('#main-slideshow img.1').addClass('show');
});

$('#slideshow-thumbs img.2').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.2').removeClass('hide');
    $('#main-slideshow img.2').addClass('show');
});

$('#slideshow-thumbs img.3').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.3').removeClass('hide');
    $('#main-slideshow img.3').addClass('show');
});

...to a format more like this (where n is a number and j is the total number of images in the gallery):

for (n=1; n<=j; n++) {

$('#slideshow-thumbs img.n').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.n').removeClass('hide');
    $('#main-slideshow img.n').addClass('show');
});

}

But I don't know how to write this properly in jQuery as I'm new to it. Would really appreciate some help! I would also like the script to calculate what j (the total number of images in the gallery) is too (by detecting it from the html I assume), so that the script will work for any gallery of any size.

Thanks in advance for any help.

Related HTML:

<div id="main-slideshow">
    <img class="1 show" src="images/booklet-open.jpg"/>
    <img class="2 hide" src="images/booklets.jpg" />
    <img class="3 hide" src="images/poster-1.jpg" />
</div>

<div id="slideshow-thumbs">
    <img class="1 active" src="images/booklet-open-thumb.jpg" />
    <img class="2 inactive" src="images/booklets-thumb.jpg" />
    <img class="3 inactive" src="images/poster-1-thumb.jpg" />
</div>

Related CSS:

.inactive {
    opacity:0.5;
}

.active {
    opacity: 1;
}

.hide {
    display:none;
}

.show {
    display:block;
}

Community · Accepted Answer · 2017-05-23 11:56:44Z

1

You were close, just need to use the variable n, and not the string. I've also combined the last two statements, as you don't need to refetch the element. As Danny pointed out, you can find j the following way.

Attempt 1 (Wrong):

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        $('#main-slideshow img.show').removeClass('show').addClass('hide');
        $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
    });
}

However, this solution is susceptible to the looping problem. Essentially, since that part of code is in a closure, it retains reference to the n variable even after the for loop has proceeded. Therefore, when an img is clicked, it looks for the max n value (in this case 4), and nothing happens. To avoid it, try putting the values that use n in an object (in this case, a function). There are numerous solutions, feel free to experiment.

Attempt 2 (Correct):

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        toggleImages(n);
    });
}

function toggleImages(n) {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
}

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jan 16, 2013 at 20:28

Igor

34.3k14 gold badges83 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Danny Over a year ago

He also wanted j to be calculated. Based on his post it is likely something like $('#slideshow-thumbs img').size().

Sarah Over a year ago

Hi, thank you both for your help. I tried adding it to my test page and it's not working? I'm sure it's me (probably my syntax) and not you, I'm really new at this, but: allatsee.com/gallerytest/test-slideshow.html allatsee.com/gallerytest/js/slideshow.js @Danny (As a sidenote, I'm a "she" not a "he"...heh)

Igor Over a year ago

@user1984868 Which part doesn't work? Can you update your question with the related html?

Sarah Over a year ago

@GrailsGuy When I click on any thumbnail the main image disappears and doesn't reappear, see the test page linked above. I've just realised I removed .show from my CSS before I even posted this question as I decided it was irrelevant - but I don't think that matters because as long is .hide is removed then the image should display.

Igor Over a year ago

@user1984868 Oh, my mistake, it's the looping problem: stackoverflow.com/questions/1451009/…. Basically, it is always using the max n value, rather than what it is at initialization. I'll update my answer in a minute.

|

antejan · Accepted Answer · 2013-01-16 20:43:01Z

0

You don't need so many classes and for loop. Look at this demo http://jsfiddle.net/eaTjM/1/

$("#slideshow-thumbs img").click(function(){
  $(this).addClass("active").siblings().removeClass("active");
  $("#main-slideshow img").eq($(this).prevAll().length)
    .addClass("show").siblings().removeClass("show")
});

$(this).prevAll().length gives us clicked preview index and .eq() method gives image by this index.

answered Jan 16, 2013 at 20:43

antejan

2,64416 silver badges15 bronze badges

1 Comment

Sarah Over a year ago

Thank you, this worked, although to be honest I don't quite understand how it does! I will try and investigate both of the answers I've been given, thank you again for your help!

Collectives™ on Stack Overflow

Using jQuery addClass in a sequence of variable length

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related