How to switch to a slideshow view via a simple click using jQuery

Scrolling down to view a complete list of photos can be very annoying, but on the other hand, some people don’t like slideshows and prefer the scrolling solution. There is a way to keep everyone happy: Just give them the option to switch between the two views easily. I’m going to show you one way to build such a solution.

Before I start diving into the code, I’ll explain what we will build. If you are impatient, you can play around with the demo and/or [download id=”12″ format=”1″]. We will start by having a regular list of photographs. You can scroll down to view them all as usual. The difference is that at the top of the page there is going to be a button that will allow you to switch to the slideshow view without having to use AJAX or load another page.

When you click ον it, all the photos (except from the first one) will disappear and you will be able to navigate through them either by using your keyboard’s left & right arrow keys or by clicking the left & right navigation buttons that will appear if you hover over the photo. Have a look at the demo if you haven’t done already and then let’s start building it.

First of all, let’s talk html:

We only need a simple button that will be used to switch between the views and a simple unordered list to hold our photos:




    
    
  • 
        
    
    • 
    
  • 
        
    
    • 
    
  • 
        
    
    •

Before we continue, please note 2 things:

  1. The slideshow effect can work with any content; for example, you can use only text or a combination of text and images.
  2. In the demo & the source code I’m using some markup & CSS only to make things look better; all the important stuff are explained in the tutorial.

Now, let’s go to the JavaScript code. All of the JS code will be included into a $(document).ready function. We will keep the selection of the view (either a list which is the default view or a slideshow) in a variable called mode, and we will deal with what happens when the user clicks the button to switch views:

var mode = 'list';

$('input#switch').click(function() {
   if(mode == 'list')
   {
      mode = 'slideshow';
      var children = $('ul#slideshow').children();
      children.css('display', 'none');
					
      children.first().css('display', 'block');
      children.first().addClass('active first');
      children.last().addClass('last');
					
      $('input#switch').val('View as list');
      $('input#switch').after('<p class="tip">Tip: You can use your right & left keyboard arrows to navigate!</p>');
   }
   else
   {
      mode = 'list';
      $('ul#slideshow').children().css('display', 'block');
      $('ul#slideshow').children().removeClass();
      $('input#switch').val('View as slideshow');
      $('p.tip').remove();
   }
});

Initially, if the current mode is set to “list”, we change it to “slideshow” and we begin by setting the value of the display CSS property to none for all the list items. Then, we select the first list item (i.e. the first photo), we reset its display value so it becomes visible and we add 2 classes to it, called active and first, which will be used later. We also add a class called last to the last element of the list. Finally, we change the text of the button and we add a paragraph containing a tip to the page.

If the user clicks the button again (which now indicates he’ll be back to the list mode), we change the mode value back to list, we make all the list items visible, remove all the classes that we added along with the tip and finally we reset the text of the button to its default value.

Our tip indicated that we can use our left & right arrow keys to navigate through the slideshow, so let’s build that next. The code to monitor if a key is pressed, identify its value and do something when this happens, is plain simple:

$(document).keydown(function(e){
   if (e.keyCode == 37 && mode == 'slideshow')
   {
      moveLeft();
   }
   else if (e.keyCode == 39 && mode == 'slideshow')
   {
      moveRight();
   }
});

As you can imagine, functions moveLeft() and moveRight() does all the hard work:

function moveLeft()
{
   var activeChild = $('ul#slideshow li.active');

   if(!activeChild.hasClass('first'))
   {
      activeChild.css('display', 'none');
      activeChild.prev().css('display', 'block');
      activeChild.removeClass('active');
      activeChild.prev().addClass('active');
   }
}
			
function moveRight()
{
   var activeChild = $('ul#slideshow li.active');
				
   if(!activeChild.hasClass('last'))
   {
      activeChild.css('display', 'none');
      activeChild.next().css('display', 'block');
      activeChild.removeClass('active');
      activeChild.next().addClass('active');
   }
}

I’ll first explain what moveRight() does: If the list item’s class is last, it indicates that it’s the last item of the list, therefore nothing happens. If it’s not, then the following sequence is executed:

  1. The active list item’s (indicated by the active class) display value is set to none.
  2. The item which is next in the list is selected and it becomes visible.
  3. The active class is removed from the currently active item and is transferred to the next one (the one that just became visible).

moveLeft() is working with the same principles, with 2 differences: Nothing happens if we’re at the first item of the list and we go backwards (the list item that becomes visible is the previous one).

All the mechanics that will allow the slideshow to work are here, but the navigation works only via the keyboard. Therefore, let’s add some mouse-clickable navigation as well:

//add these inside if(mode == 'list')
children.first().prepend('<a class="left-arrow">&lt;</a>');
children.first().prepend('<a class="right-arrow">&gt;</a>');
addHoverAndClickEffect();

//add these inside the else of the above if
$('a.left-arrow').remove();
$('a.right-arrow').remove();

//add these inside function's moveLeft() if
$('a.left-arrow').remove();
$('a.right-arrow').remove();
activeChild.prev().prepend('<a class="left-arrow">&lt;</a>');
activeChild.prev().prepend('<a class="right-arrow">&gt;</a>');
addHoverAndClickEffect();

//add these inside function's moveRight() if
$('a.left-arrow').remove();
$('a.right-arrow').remove();
activeChild.next().prepend('<a class="left-arrow">&lt;</a>');
activeChild.next().prepend('<a class="right-arrow">&gt;</a>');
addHoverAndClickEffect();

function addHoverAndClickEffect()
			{
				$('ul#slideshow li.active').hover(function () {
					$('a.left-arrow').css('display', 'block');
					$('a.right-arrow').css('display', 'block');
				}, function () {
					$('a.left-arrow').css('display', 'none');
					$('a.right-arrow').css('display', 'none');
				});
				
				$('a.left-arrow').click(function() {
					moveLeft()
				});
				
				$('a.right-arrow').click(function() {
					moveRight()
				});
			}

Using the above code, we add two anchor tags which represent a right and a left arrow so the user can navigate using the mouse. The addHoverAndClickEffect() function binds the click and hover event handlers to the anchor tags so they become clickable and visible when the user hovers over the photo.

That’s all! You can [download id=”12″ format=”1″] and view the demo if you wish.

Update on 22nd of February, 2014: I created a second version of this tutorial, adding a fade effect between the image changes, based on a reader’s question. Check out the demo.

PS: The comic strips used in the tutorial belong to the amazing PHD Comics.

Photo by fwickafwee