How can I make javascript change main div depending on what thumbnail is clicked?

Question

I have the following items laid out in static blocks:

<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>

Along with a thumbnail navigation block below:

<div class="image-compare-nav owl-carousel owl-theme">
    <div class="owl-wrapper">
        <div class="owl-item">
            <a href="#" rel="image-compare-1" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-2" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-3" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-4" class="item"></a>
        </div>
    </div>
</div>

At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.

It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.

So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.

What am I doing wrong?

UPDATE

I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.

Any ideas?

use [jQuery attr()](http://api.jquery.com/attr/) to both get and set `src` — charlietfl, Feb 27 '15 at 17:12
@charlietfl Can you please explain this, where to use it, and what it will do? — Lee, Feb 27 '15 at 17:14

score 0 · Accepted Answer · answered Mar 02 '15 at 16:28

0

Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.

Something like this:

<div class="twentytwenty-container" data-image-num="1">
    <img />
</div>

<div class="imageSet" data-image-num="1">
    <img />
</div>


$('.imageSet').click(function() {
    var imageNum = $(this).attr('data-image-num');
    $('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});

JSFiddle

answered Mar 02 '15 at 16:28

APAD1

13,509
8
43
72

I would recommend the use of `.data()` instead of `.attr()` in this case like: `$(this).data('image-num')`... Also, avoid the use of hyphenated key. see http://stackoverflow.com/questions/7261619/jquery-data-vs-attr – gmo Mar 02 '15 at 17:24
That looks interesting, but it's not removing the large div when another small one is loaded? – Lee Mar 03 '15 at 08:41
This code doesn't remove anything it just shows/hides an image depending on what thumbnail you click on. – APAD1 Mar 03 '15 at 15:30
Thanks, have updated my question to make it clearer what I'm after – Lee Mar 03 '15 at 16:37
I have created an added a jSFiddle that matches what i'm after. Would you be able to have a go at that, and create a fork? – Lee Mar 04 '15 at 14:09

How can I make javascript change main div depending on what thumbnail is clicked?

1 Answers1

JSFiddle