Building an Image Slideshow UI Switcher with jQuery

Advertise here with BSA

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.

Advertise here with BSA

Source: http://designm.ag/tutorials/image-slideshow-ui-switcher-with-jquery/

Design Resource Box

If you used Photoshop brushes before you might have noticed that they help you save a lot of time and this is a really important factor in a designer’s life. PS brushes are a time saver for designers because they enable you to create complicated artwork with a simple action.

The brushes that Photoshop gives you by default are good but you need a little bit more than that, you need complex and high quality brushes that you will use in various type of projects with different styles.

You will find on the internet a lot of Photoshop brushes, but being so many makes it difficult to find the ones that you need. To save you some time, I made a list of a few that you could use in your projects.

These brushes that I want to focus on are for decorative purposes and you can use them on vintage artworks, on photos or another type of project you see fit.

Decor Elements

Wreaths

Border Brushes 733

Fancy Frames set 3

Floral Waves and Curves

Ornamental Frames set 3

Various Brushes

Decorative II

105 High Quality Ornament Brushes

Ornament Frames

Scroll Banners Set 3

Floral Design 2

Round Frames

Ornamental Corners set 2

Dividers

Corners

Elements

Decorative Ornament

Corners

Floral Ornaments

Scroll Banners

Ornamental Corners set 3

Architectual Ornaments

Baroque Frames

Hand Drawn Decorative

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/oWz8QpAncp4/

Line25 Sites of the Week for March 29th 2013

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Night Owl Interactive, Geckboard, Kyle Thacker, Ivo Mynttinen and Camayak.

Night Owl Interactive

View the website

Geckoboard

View the website

Kyle Thacker

View the website

Ivo Mynttinen

View the website

Camayak

View the website

Source: http://line25.com/inspiration/line25-sites-of-the-week-for-march-29th-2013

Design Resource Box

Stockfresh names itself one of the sites where you can get high quality stock photos and graphics and they are right. They have a growing collection of amazing stock images for all the design and publishing needs of a graphic or web designer and all that at affordable prices. There are thousands of pictures added daily on the site and there’s a big chance that you will find a useful one among those.

Competent management

An interesting thing that must be known about Stockfresh is that it is managed by the same people who created stock.xchng and stockexpert, people with over 15 years of experience in photography, design and business. They say their goal is to make Stockfresh the best place to buy images and I believe they are on the right track.

Photos quality

The people in charge of this site are extra careful when selecting the photos that are submitted to ensure that only the best images make it to the site, so you don’t have to weed through pages of mediocre search results to find the shot you need.

Affordable prices

Whether you represent a small design firm or a huge publisher, Stockfresh has great prices and flexible payment plans for you that will surely fit both your needs and your budget.

Sell images

If you want to earn some money, Stockfresh gives you the opportunity to reach a worldwide audience with your stock images — without the usual hassle, through a super simple interface. Whether you are a photographer or a digital artist, you’ll instantly feel at home with them.

Being photographers themselves, they are passionate about what they do. They take pride in the fact that they give back as much to the community as it is possible. Their current minimum royalty rate is 50% which can go up to 62.5% because discounts are always on them!

They believe in fair compensation and fair pricing. They believe that creativity and excellence should be rewarded properly. They believe in quality over quantity. If you believe in the same ideas, you should submit images to their site.

Conclusion

As you have seen, the site is a powerful resource for web and graphic designers because it is a time saver thanks to its simple and efficient services and it can be an interesting source of income to those who want to submit stock photos or vector illustrations.

Sample images that you can get from Stockfresh

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/TPj0HxRn82o/