/    Sign up×
Community /Pin to ProfileBookmark

JS querySelector addEventListenerer index getElementsByClassName parent div only

Copy linkTweet thisAlerts:
Jan 25.2023

I have a page with some images displayed as modals inside accordions, simple 3 image across grid- works as planned click on image modal with caption and close button displayed- these are “open one at a time” accordions- if A is opened B closes / if B is opened A closes / so only 1 accordion is expanded at a time


no navigation I used W3 schools CSS and JS samples to put together to achieve and works as I intended-


I needed navigation for the images once clicked simple back/forward/exit (or the square space grid gallery function)


I have been able to achieve the navigation function with JS query indexing a UL/list


However all images present on the page are indexed, and displayed instead of only the images inside the accordion


Symptoms:


-Accordion A has 10 images


-Accordion B has 7 images


-Accordion C has 9 images


26 images are indexed and cycled thru no matter what image or what accordion is clicked on-


Desired results:


After an image is clicked inside accordion B modal pops up with navigation cycling thru only the 7 images inside Accordion B and the navigation stops once last image is reached.


The same for the other images inside the other accordions, regardless of number of images and position in document, only the images contained within that accordion are cycled.




[code pen](https://codepen.io/preppietrash/pen/ExpoYNO)



it was suggested to me at another forum to look at `var images = activeSection.querySelectorAll(‘img’);`
so it would only index the active section, which makes sense, however; I could not figure out where to insert and what to change in order for it to work.



thanks

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJan 26.2023 — @preppietrash#1650217

Hi and welcome to the forum!

>it was suggested to me at another forum to look at

>var images = activeSection.querySelectorAll('img');

Obviously over there they forgot to tell you how to get that `activeSection</C>. Take a look at <C>closest</C>, this function steps upwards in the dom and finds the first ancestor matching the parameter (selector):

<CODE>`<i>
</i> // Go through all of the images with our custom class
for (let i = 0; i &lt; images.length; i++) {
const img = images[i]; // and attach our click listener for this
img.addEventListener("click", (event) =&gt; {
// event.target is the image having been clicked
// get all images in the same panel:
const imagesInsidePanel = event.target.closest('ul').querySelectorAll('img');
// find index in that set of images:
const idx = imagesInsidePanel.findIndex(element =&gt; element.src == event.target.src);
openModal(idx);
});
}<i>
</i>``
(not tested)

However this would require additional modifications.

As an alternative I strongly recommend using a mature script for displaying images in a modal: Fancybox. Additionally it supports mobiles and swiping.

https://fancyapps.com/docs/ui/fancybox/
×

Success!

Help @preppietrash spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...