A lot of newer e-commerce websites and blog archives have started organizing listings in various formats. The interface will feature a set of icons to switch between different views, such as thumbnails or full details. It can be a pleasing design aesthetic for many typical webpages where you need to share a lot of content which can also be easily indexed.
For this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos. Users have the ability to flip forward and backwards in the photos list, or choose a specific image from the thumbnail view. I believe this interface can work with almost any type of slideshow webpage layout. And if you are running a dynamic CMS then you could build a page template which includes dynamic images inside the unordered list element.
Live Demo – Download Source Code
Getting Started
There is not too much HTML worth going over, but the main section is focused on the thumbnail and slideshow views. These two content sections are separated by divs and use CSS to switch between the display styles.
<div id="thumbnails">
<ul class="clearfix">
<li class="first current"><a href="photos/01-gob-painting.jpg"><img src="photos/01-gob-painting-thumb.jpg"></a></li>
<li><a href="photos/02-michael-bluth-penthouse.jpg"><img src="photos/02-michael-bluth-penthouse-thumb.jpg"></a></li>
<li><a href="photos/03-michael-bluth-marta.jpg"><img src="photos/03-michael-bluth-marta-thumb.jpg"></a></li>
<li><a href="photos/04-lucille-bluth-wink.jpg"><img src="photos/04-lucille-bluth-wink-thumb.jpg"></a></li>
<li><a href="photos/05-korean-boy-annyong.jpg"><img src="photos/05-korean-boy-annyong-thumb.jpg"></a></li>
<li><a href="photos/06-tobias-blue-man.jpg"><img src="photos/06-tobias-blue-man-thumb.jpg"></a></li>
<li><a href="photos/07-maeby-funke-model-home.jpg"><img src="photos/07-maeby-funke-model-home-thumb.jpg"></a></li>
<li><a href="photos/08-buster-lucille-penthouse.jpg"><img src="photos/08-buster-lucille-penthouse-thumb.jpg"></a></li>
<li><a href="photos/09-michael-tobias-lindsay.jpg"><img src="photos/09-michael-tobias-lindsay-thumb.jpg"></a></li>
<li class="last"><a href="photos/10-michael-george-sr-bluth.jpg"><img src="photos/10-michael-george-sr-bluth-thumb.jpg"></a></li>
</ul>
</div> <!-- @end #thumbnails -->
<div id="mainimg">
<img src="photos/01-gob-painting.jpg" id="displayimg">
</div>
Each of the thumbnails actually contain a majority of the markup which could allow us to include schema microdata handy for search engines. Each list item has an internal anchor link which points towards the full-scale image. Then when a user clicks we update the img tag inside #mainimg. This single img tag doesn’t really need extra attributes because it is a dynamic element. And so bots and webpage crawlers will have a difficult time distinguishing between the changes and it won’t help much with SEO anyways.
<div id="controls" class="clearfix">
<ul class="switcher">
<li><a href="#" id="switch-slideshow" class="sel" title="Slideshow"></a></li>
<li><a href="#" id="switch-thumbnail" title="Thumbnails"></a></li>
</ul>
<ul class="slides">
<li><a href="#" id="keyleft" title="Previous"></a></li>
<li><a href="#" id="keyright" title="Next"></a></li>
</ul>
</div>
This small block of code is actually placed above the thumbnails and slideshow container. These represent the slider controls and we have two internal components. First are the left/right arrows for shuffling between the various images. Then you can change from slideshow to thumbnails which will hide the arrows, and you can then choose a new display image from the set.
Now the only extra documents I have included represent the CSS stylesheet and the UI switcher, along with a copy of jQuery included from Google’s Developer CDN. Also I have just added a small web font courtesy of Google Web Fonts.
Designing the Layout
Inside the whole wrapper div I have setup a unique container for the background and box shadows. Additionally the background tile is a repeating image from BG Repeat. The interesting pieces focus on our control div, along with the thumbnails view listing.
/* ui controls */
#controls {
display: block;
width: 100%;
margin-bottom: 10px;
}
#controls .slides {
width: 150px;
height: 50px;
position: relative;
top: -6px;
margin: 0 auto;
}
#controls .slides #keyleft {
display: block;
float: left;
width: 48px;
height: 48px;
margin-right: 9px;
background: url('../images/key_left.png') no-repeat;
}
#controls .slides #keyright {
display: block;
float: left;
width: 48px;
height: 48px;
background: url('../images/key_right.png') no-repeat;
}
The arrow keys are designed using CSS background images and positioned to float next to each other. They are centered in the layout compared with the UI switcher icons, which are located to the right side. You will find this item contained inside the .switcher div element.
#controls .switcher {
width: 70px;
float: right;
}
#controls .switcher #switch-slideshow {
display: block;
float: left;
width: 30px;
height: 30px;
background: url('../images/sprites.png') no-repeat -3px 0;
}
#controls .switcher #switch-thumbnail {
display: block;
float: left;
width: 30px;
height: 30px;
background: url('../images/sprites.png') no-repeat -30px 0;
}
#controls .switcher #switch-slideshow.sel {
background-position: -63px 0;
}
#controls .switcher #switch-thumbnail.sel {
background-position: -90px 0;
}
Using a single sprite sheet saves time and HTTP resources when loading the initial webpage. And setting a fixed height/width combo is the easiest way to manage and position elements. The buttons are fairly quick using jQuery means we can handle any binding event from the user. Now moving into the page layout we only have a single block of code pertaining towards the main slideshow image, along with a series of internal thumbnail selectors.
/* page displays */
#thumbnails {
display: none;
padding-left: 60px;
}
#thumbnails li {
display: block;
float: left;
margin-right: 12px;
margin-bottom: 15px;
padding: 0;
}
#thumbnails li a {
margin: 0;
padding: 0;
width: 160px;
height: 160px;
float: left;
border: 5px solid #e6eaf0;
}
#thumbnails li.current a {
border: 5px solid #4978bf;
}
#mainimg {
display: block;
width: 600px;
margin: 0 auto;
}
Interactive jQuery
The final major piece to this tutorial is my uiswitcher.js file. This will include all the major jQuery event handlers and functions to run on each situation. The code is a bit lengthy so I will examine it broken down into parts.
/**
* Switching between slideshow and thumbnail views
* we handle 2 different .on() events
*/
$('#switch-slideshow').on('click', function(e){
e.preventDefault();
if(!$(this).hasClass('sel')) {
$('ul.switcher li a').removeClass('sel');
$(this).addClass('sel');
// hide the thumbnails and display the slideshow
$('#thumbnails').hide();
$('#controls .slides').fadeIn(450);
$('#mainimg').fadeIn(450, 'linear', function(){
$('body').removeClass('thumbnail-view');
});
}
});
$('#switch-thumbnail').on('click', function(e){
e.preventDefault();
if(!$(this).hasClass('sel')) {
$('ul.switcher li a').removeClass('sel');
$(this).addClass('sel');
// hide the slideshow and display thumbnails
$('#mainimg').hide();
$('#controls .slides').hide();
$('#thumbnails').fadeIn(450, 'linear', function(){
$('body').addClass('thumbnail-view');
});
}
});
First you will notice a chunk of codes designated for handling click events onto either of the UI switcher buttons. They both check if the current icon is already selected, in which case the script doesn’t need to do anything. Otherwise the clicked icon is not selected and we remove the selection from both icons, then make the new one selected and fade in with the new image display content.
/**
* Slideshow pagination using arrow keys which hide during thumbnail display
* we use 2 different .on() handlers for both keys
*/
$('#keyleft').on('click', function(e){
e.preventDefault();
var currentimg = $('#thumbnails ul li.current');
if(!currentimg.hasClass('first')) {
// if any other image except the first, then navigate backwards
var newimg = $(currentimg).prev();
var newimgsrc = newimg.find('a').attr('href');
currentimg.removeClass('current');
newimg.addClass('current');
$('#displayimg').attr('src', newimgsrc);
}
});
$('#keyright').on('click', function(e){
e.preventDefault();
var currentimg = $('#thumbnails ul li.current');
if(!currentimg.hasClass('last')) {
// if any other image except the last, then navigate forwards
var newimg = $(currentimg).next();
var newimgsrc = newimg.find('a').attr('href');
currentimg.removeClass('current');
newimg.addClass('current');
$('#displayimg').attr('src', newimgsrc);
}
});
The next large chunk of codes will focus on user clicks for the two different arrow keys. When the active image also has a class of .first or .last then we know where to end the pagination. If you wanted to update this slideshow into a carousel then we could just move from the first image back to the last item and vice-versa.
/**
* Selecting any thumbnail image will update the current photo
* and reset the UI back to slideshow view
*/
$('#thumbnails ul li a').on('click', function(e){
e.preventDefault();
if(!$(this).parent().hasClass('current')) {
// if we click anything except the currently selected image
var newimgsrc = $(this).attr('href');
$('#displayimg').attr('src', newimgsrc);
$('#thumbnails ul li').removeClass('current');
$(this).parent().addClass('current');
// updating the slideshow view after choosing a photo
$('ul.switcher li a').removeClass('sel');
$('#switch-slideshow').addClass('sel');
$('#thumbnails').hide();
$('#controls .slides').fadeIn(450);
$('#mainimg').fadeIn(450, 'linear', function(){
$('body').removeClass('thumbnail-view');
});
}
});
Finally we need to handle whenever the user clicks onto any thumbnail image. The script will stop each anchor link from loading and check if the current thumbnail is already selected. If not then we make it the currently selected image and load this into the main slideshow display. We complete the function by re-animating the fade effect onto the slideshow div for a convenient user experience.
Live Demo – Download Source Code
Final Thoughts
This tutorial is definitely a bit more advanced, yet not too difficult for a newer jQuery developer. All of the codes should be easily portable into another website by updating the IDs. And you can test or edit this interface by downloading a copy of my project source code. Additionally if you have further questions or ideas please let us know in the post discussion area.
Source: http://designm.ag/tutorials/image-slideshow-ui-switcher-with-jquery/
No comments:
Post a Comment