CODEWITHSUNDEEP
jquery
CMSCSS
CMSCSS

Reputation: 2176

Grab parent (and children) of button clicked so can have multiple galleries

I have a jsfildde here: http://jsfiddle.net/uh0cq4o8/2/

I've spent days trying to figure this out and doesn't understand if it's my selector and/or how I'm creating the gallery (show/hide images) but I can't work out how to advance the only gallery of the button clicked - not all other galleries on the page.

I'm trying something like this (and variations):

next = ($(this).closest('.gallery').find('.gallery-item.active').prev().length > 0) ?

The idea being that I travel up the dom to the closet .gallery parent, then find the active slide within with .find('.gallery-item.active').

But it doesn't work, can anyone see what I'm doing wrong? Very new to js/jquery so sorry if this is easy.

Upvotes: 0

Views: 40

Answers (1)

adeneo
adeneo

Reputation: 318272

You're using a ternary, like this

next = ($(this).closest('.gallery').find('.gallery-item.active').next().length > 0) 
         ? 
           $('.gallery-item.active').next() 
         : 
           $('.gallery-item:first-child');

That doesn't return the closest, then the active etc. it just returns $('.gallery-item.active').next(), which is all of them, you have to find the closest for each condition as well

next = ($(this).closest('.gallery').find('.gallery-item.active').next().length > 0) 
         ? 
           $(this).closest('.gallery').find('.gallery-item.active').next() 
         : 
           $(this).closest('.gallery').find('.gallery-item:first-child');

but it's probably easier to shorten that with a couple of additional variables

var gallery = $(this).closest('.gallery'),
    active  = gallery.find('.gallery-item.active').next();

next = active.length > 0 ? active : gallery.find('.gallery-item:first-child');

and of course you have to do the same for the previous etc.

Here's an updated version -> FIDDLE

Upvotes: 2

Related Questions