Sliding gallery index

On my gallery page at my other website I have an index that slides in across the page, so that a user can easily access any image set they like at any time.

Example index

Here's a dummy gallery with the index, with buttons that highlight according to which thumbnail is selected...



The basic idea is that a mouse-over on the 'index' button is detected by js, which then sets the css class 'visible' to the index div, causing it to transform to its position set in the css across the screen, from its normal position off the screen. When the mouse moves off the index button or any of its child divs, or an index item is clicked, the 'visible' class is removed and the menu transforms back to its normal off-screen position.

But there is a notable problem, that you would find immediately with such a simple construct, which is that after clicking on an index item, the index then slides off-screen, but in the process it catches the mouse hover on it and it returns back over the screen, giving the feeling it's stuck, and you can't move the mouse fast enough to stop it.

Maybe you could use a time delay to prevent another mouse hover event (actually I didn't try that as a solution, I only just thought of it). But what I did was to set an argument in the mouse-over listener function, to make it work only if the variable 'clicked' is false. When clicking on an item, the variable is set to true and the mouse-over event will not trigger.

But that means that after clicking an item and the 'clicked' var is set to true, you will not be able to trigger the mouse-over again on the index button, until the variable is made false. So what I did was to surround the index button with a small div, and set a js listener event to it, which sets the variable to false on mouse-over. So the mouse has to pass over it to reach the index button and the var is set false, so that the menu can display.

Here is my javascript...

<!--JAVASCRIPT FOR SHOW/HIDE INDEX)--> const index = document.querySelector('.gallery-index'); // index button const indexBtn = document.querySelector('#index'); const submenu = document.querySelector('.index-content'); const reset = document.querySelector('.mouse-reset'); clicked = false; index.addEventListener('mouseover', () => { // show menu if (!clicked) { submenu.classList.add("visible"); stopscroll(); } }); index.addEventListener('mouseout', () => { // recede menu submenu.classList.remove("visible"); resumescroll(); }); //event listener on each button - use forEach document.querySelectorAll('.index-fetch').forEach((button) => { button.addEventListener('click', function() { submenu.classList.remove("visible"); // recede menu on btn click submenu.scrollTop = 0; clicked = true; } );}) reset.addEventListener('mouseover', () => { clicked = false; // reset var clicked }); function closeindex() { submenu.classList.remove("visible"); }  

A few notes..
I use the 'stopscroll' and 'resumescroll' fn's I made before with the lightbox js, to prevent the page scrolling up and down when the mouse scroll button is used on the index.

The fn part 'submenu.scrollTop' makes sure that the index returns to the top if it was scrolled down to find an entry and clicked, so that when it is called again it looks neat and not stuck at the bottom.

The 'clicked = false;' variable setting at top might not be needed, since I have a listener on mouse over on the 'mouse-reset' div.

The 'closeindex' fn at the bottom is called by a click on a 'X' on the index top corner, with the 'close-index' css class (see the page layout below).


For touch screens, the index button is tapped and there is no mouse-over event to trigger the index.
So I add this js segment below to the script...

<!--JAVASCRIPT FOR INDEX TAP EVENTS ON MOBILE)--> indexBtn.addEventListener('click', () => { submenu.classList.add("visible"); submenu.scrollTop = 0; stopscroll(); });  

And the index page layout looks something like this..

View code

<div class="mouse-reset"></div> <div class="gallery-index"> <div class="gallerybutton" id="index">Index</div> <div class="index-content"> <span class="close-index" onclick="closeindex()">×</span> <div class="index-col"> <div class="index-header">Group1</div> <div class="index-line">Subject1 <div> {% include index-fetch-button.html target="01a" id="01a" label="1A" %} {% include index-fetch-button.html target="01b" id="01b" label="1B" %} </div></div> <div class="index-line">Subject2 <div> {% include index-fetch-button.html target="02a" id="02a" label="2A" %} {% include index-fetch-button.html target="02b" id="02b" label="2B" %} </div></div> <div class="index-line">Subject3 <div> {% include index-fetch-button.html target="03a" id="03a" label="3A" %} {% include index-fetch-button.html target="03b" id="03b" label="3B" %} </div></div> <div class="index-line">Subject4 <div> {% include index-fetch-button.html target="04a" id="04a" label="4A" %} {% include index-fetch-button.html target="04b" id="04b" label="4B" %} </div></div> </div> <div class="index-col"> <div class="index-header">Group2</div> <div class="index-line">Subject5 <div> {% include index-fetch-button.html target="5a" id="5a" label="5A" %} {% include index-fetch-button.html target="5b" id="5b" label="5B" %} </div></div> <div class="index-line">Subject6 <div> {% include index-fetch-button.html target="6a" id="6a" label="6A" %} {% include index-fetch-button.html target="6b" id="6b" label="6B" %} </div></div> <div class="index-line">Subject7 <div> {% include index-fetch-button.html target="7a" id="7a" label="12A" %} {% include index-fetch-button.html target="7b" id="7b" label="7B" %} </div></div> <div class="index-line">Subject8 <div> {% include index-fetch-button.html target="8a" id="8a" label="8A" %} {% include index-fetch-button.html target="8b" id="8b" label="8B" %} </div></div> </div> </div> </div>  

The index buttons...

View code

<div class="gallerybutton index-fetch" id="{{include.id}}" onclick="fetchHtml('{{include.target}}');">{{include.label}}</div>  

And the CSS..

View code

.mouse-reset { /* empty div behind index button to reset the flag clicked in js! */ width: 100px; height: 30px; }} .gallery-index { position: fixed; top: 380px; left: 5px; z-index: 99; } .index-content { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; position: absolute; left: -5px; top: -20px; background-color: #222222; border-radius: 9px; width: 100vw; height: 75vh; overflow-y: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,1.2); z-index: 99; opacity: 0.9; transform: translateX(-100%); transition: 0.3s ease-in; transition-delay: 0s; } .index-content.visible { transform: translateX(0%); transition: 0.5s ease-out; /* css scroll to top on transition??? */ } .index-col { background-color: #303030; border: solid 1px #A4A4A4; border-radius: 5px; height: 340px; width: 97vw; padding: 25px 120px 25px 120px; align: top; } .index-header { margin-bottom: 15px; font-style: italic; font-size: 2.5rem; font-weight: 500; } .index-line { display: flex; padding: 5px; font-size: 2.4rem; justify-content: space-between; } .index-fetch { display: inline-block; margin-right: 0px; padding: 0px; width: 210px; font-size: 2.4rem; } .activeIndex { background: rgba(126,7,9,0.9); } .activeLine { background: rgba(55,0,0,0.9); border: solid 1px #A4A4A4; border-radius: 4px; } @media only screen and (min-device-width: 768px){ .gallery-index, .mouse-reset { position: fixed; top: 260px; left: 5px; z-index: 99; } .index-content { height: 65vh; } .index-col { height: 200px; width: 250px; padding: 15px; } .index-header { margin-bottom: 8px; font-size: 1.3rem; } .index-line { font-size: 1rem; } .index-fetch { width: 70px; font-size: 1rem; }} @media only screen and (max-device-width: 1200px) and (orientation: landscape){ .index-content { top: -120px; }} .close-index { color: #AFAFAF; cursor:pointer; position: absolute; top: 50px; left: 10px; font-size: 45px; font-weight: bold; }  

The index animation here is really simple, you could always fade it in or expand from the top corner or spin it orsomething.

Buttons

Notice that the buttons on the index each have their own id. This id needs to be identical to the argument sent by each button or thumbnail which is caught by js as 'target', and is used by the script to fetch new html (see my One page image gallery page ).

Being identical to the 'target' value makes the process simple, as we then declare in the script that id = `${target}` , which is a value sent by the correct button.

We use this var 'id' to set the class 'activeIndex' and 'activeLine' to the element with the id matching the 'target' called by the onClick.

The js first clears all buttons/lines of the style class to make sure none are highlighted, then it applies the highlight to the new active button and its line (using closest sibling).

Note that alll the buttons in the gallery are caling 'fetchHtml' and so the js snippet below should be placed inside that fn, to pick up the 'target' argument sent by the click. (I'm not fetching html on this page however.)

<!--JAVASCRIPT FOR HIGHLIGHT ACTIVE BUTTON)--> document.querySelectorAll('.index-fetch').forEach((button) => { button.classList.remove("activeIndex"); }) document.querySelectorAll('.index-line').forEach((line) => { line.classList.remove("activeLine"); }) id = `${target}`; document.getElementById(id).classList.add("activeIndex"); document.getElementById(id).closest('.index-line').classList.add('activeLine'); }  

On this page, I also add id's to the thumbnails, like 'id=01aT' (adding a 'T'). Then I make a new var called id1, and set a 'focus' class to the thumbnail with the id. The js first removes the class from all the thumbs...

document.querySelectorAll('.launcher').forEach((button) => { button.classList.remove("focus"); }) id1 = `${target}T`; document.getElementById(id1).classList.add("focus");