Smart multi-slideshow control.

This may come in handy:

Imagine that You'd like to showcase Your selected works in a form of several slideshows, vertically arranged one next to each other. Suppose You want to provide Your Guest with a fully convenient experience, so that (s)he can take their time viewing the pictures. Whenever (s)he would like to, (s)he would click to switch to the next (or the previous) photo.

From the layout perspective, however, such a set could require several next/prev. buttons for each slideshow. What if You could have only one single pair for all of them? When it comes to showcase photography or design work - it is usually a good idea to harness as much space on the screen as possible - so the pictures will probable be quite large, one visible slideshow at a time (to see another one just scroll the page downward). Then You could control each of those slideshows with a single pair of control buttons - influencing the one which is actually visible on the screen at the moment.

How You could achieve this idea? It is possible thanks to that jQuery can determine how far You've scrolled a web page. You can define several "levels" for each slideshow. Then, when a particular level is reached - the control buttons will influence the appropriate slideshow.

Code-wise the general idea is simple: once You created a HTML "grid" consisting of several slideshows (divs) - create a double-part jQuery code: the first part will be responsible for sliding pictures (once a user clicks one of control buttons) - while the second part will be responsible for recognizing which slideshow is currently displayed on the screen = i.e. should response to the control buttons. So let's take a closer look on each of those steps.

I. Prepare the HTML grid.
There are many ways to design a HTML grid for the slideshows. Here You are the most important information You can use as guidelines:

• slideshows should be vertically stacked,
• a single slideshow (as well as a single picture within it) should take most of the available screen space, leaving just a little bit for the previous and the next one, just to indicate their existence for Your Guest,
• inside each slideshow put "a wiiiiide box" :) - it should contain all the pictures involved, stacked horizontally - first define the width of a single picture, second the max. number of pictures which can be involved in any slideshow, third the overall box width, i.e. the width of a single picture multiplied by the max. number of pictures,
• the last part is the easiest one: create control buttons - You can do it by many different ways, what is important is that there should be two control buttons (to initiate sliding to the next or the previous picture), they should have their own id's, and they should be clickable;

A good advice:
Although Your slideshows are stacked vertically, there probably be enough pictures inside them, which are stacked horizontally - so in the end it will make Your page horizontally scrolled as well. In such a case it is a good practice to hide the horizontal scroll bar of a web-browser window: because You don't want Your Guest to slide pictures by hand, but rather to provide Them a nicely-looking experience of pictures which slide automatically once a Guest uses slideshow control buttons. So You can hide a horizontal scrollbar very easily: just add this line to the body definition within Your CSS style sheet:

overflow-x: hidden;

Another good advice:
With jQuery You can make every element clickable (e.g. a div). In such a case it may be a good idea to visually indicate that some particular element is meant to be clicked - by changing the cursor's appearance while it's hovering within the element's area - to the one which indicates that a user can click something. To make it so, add this line to the element's CSS definition:

cursor: pointer;

II. Double-part jQuery code - i.e. "the engine" :) .
When You have the HTML grid done, You are ready to make it alive with the help of jQuery.

First, let's handle a universal slideshow mechanism - note that:

• #right and #left are My control buttons,
• .inside is a CSS class for each wiiiide box (see earlier on),
• .current is a CSS class for the slideshow which is actually displayed/visible on the screen (I will address this part later on - now it is just informative);

/* click to slide left */

$("#right").on("click", function() {
$( ".current .inside" ).animate({
left: "-=1080",
duration: "600"
}, 500 );
});

/* click to slide right */

$("#left").on("click", function() {
$( ".current .inside" ).animate({
left: "+=1080",
duration: "600"
}, 500 );
});

What does this code mean? It defines what will happen if a user clicks the #left or the #right element (control buttons). Once clicked, an element with an .inside CSS class (a wiiide box with pictures, which is placed within the slideshow with the .current CSS class) should move itself 1080px to the left (or right). 1080px is My single picture width. '+=' or '-=' are relative animation properties, which make multiple (endless) clicking possible (without a '=' sign a user could slide only once - which doesn't make sense in case of multiple picture slideshows).

Now, let's do the part which I find the most interesting: how to find out which slideshow is currently visible on the screen? Start with checking how far downwards the page is scrolled while a slideshow is visible. Later on You will use this knowledge as a reference point to "label" a slideshow "on the fly", on the scroll level basis.

First of all, in order to determine each scrolling level You need to have all Your slideshows put in place first. You don't need to fulfill them with proper pictures now - what is important is that they should take its own space to make the page scrollable. So at this point it is a good idea to go back to Your HTML "slideshow grid" and complete it with all slideshows You want to showcase on Your website (in case You haven't done this by now).

Once You've done this, You can check out the precise scrolling level for each slideshow. Here is the thing, though: You need to decide at which precise moment the control buttons should influence the next slideshow on the screen. It's up to You - in My case I decided to start switch to the another slideshow the moment it is visible a little bit more than its half.

If You have Your Own take on this, let's find out what are the precise values for each scrolling level. To do so, You need to apply a short code snippet first. Open the jQuery code for Your website and add this one to it:

$(document).scroll(function () {
console.log(window.scrollY);
});

Once You save it, open the Developer tools in Your web-browser (in Chrome You can do that by CTRL+SHIFT+I), then switch to the "Console" bookmark within it (there are several bookmarks, starting with "Elements", "Sources", "Network", and so on). Once You click the "Console", there should be nothing there, just empty area. Now begin to scroll Your page, having the Console window visible in the same time - You should notice that it begins to fill with numbers. Those numbers correspond to the current scrolling level. Scroll Your page exactly to the first point when You want the first slideshow not be influenced by control buttons anymore (so the second one should be) - and note the last number which is now displayed within the Console window. Then repeat the process for all the rest slideshows.

Once You discover all the scrolling levels, You can complete the code. Make some space (double enter) after the line

console.log(window.scrollY);

within the code snippet You've recently added. You'll fill this space with several code snippets - one per a single scrolling level. The template looks as follows:

if (window.scrollY < 698) {
console.log("slideshow 1")
$( "#slideshow" ).addClass( "current" );
$( "#slideshow2, #slideshow3, #slideshow4, #slideshow5, #slideshow6" ).removeClass("current");
}

The code above refers to the first slideshow out of the six-item set. It means that if the vertical scrolling level is lower than 698:

1. Write "slideshow 1" within the console window (thanks to this it will be easier for You to analyze the code behavior once You've implement it).
2. Ascribe the .current CSS class to the first slideshow.
3. Remove the .current CSS class from all the rest slideshows.

Here You are the code for the second scrolling level:

if (window.scrollY > 698 && window.scrollY < 1541) {
console.log("slideshow 2")
$( "#slideshow2" ).addClass( "current" );
$( "#slideshow, #slideshow3, #slideshow4, #slideshow5, #slideshow6" ).removeClass("current");
}

At this point You should be able to understand what is all about: that it defines a range (in this case between 698 and 1541 scrolling levels) within which the second slideshow should be influenced by the control buttons - and that it properly "juggles" with the .current class, ascribing it to the proper slideshow (i.e. the second one = #slideshow2), while removing it from all the rest.

Note:
In case of the last slideshow (the last of the lot) You can use a simpler form (like in case of the first one), using just

if (window.scrollY > 4032) {

instead of defining a range ("4032" is again just an example).

If You'd like to see how all of this could work in action - look at this page, click “see in action”, then use the control buttons on top of the screen to influence various slideshows, depending on how far down- or upwards You scroll the page.