Easy Display Switch with CSS and jQuery

This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch.

I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries. The design itself is quite simple to create and there isn’t much required jQuery at all. Check out my live sample demo below.

content list thumbnail display switcher tutorial preview screenshot

Getting Started

All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Switch Display Options - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.

  <div id="w">
    <span class="options">Switch Options: 
      <a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a> 
      <a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a>
    </span>
    <!-- icons: http://findicons.com/pack/1689/splashy/ -->
    <div id="content">
      <ul id="listdisplay" class="clearfix">
        <li class="clearfix">
          <span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan" target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span>
          <span class="innercontent">
            <h2>Hulk Hogan</h2>
            <p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p>
          </span>
        </li><!-- row #1 -->

I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.

The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.

Page Design with CSS

All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google. The HTML page background uses a repeating image Cartographer from Subtle Patterns.

.options {
  display: block;
  text-align: right;
  font-size: 1.2em;
  line-height: 16px;
  font-weight: bold;
  color: #eee;
  margin-bottom: 8px;
}
.options .sorticon {
  position: relative;
  top: 3px;
}

.options .sorticon img {
  opacity: 0.6;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.options .sorticon img:hover {
  opacity: 1.0;
}
.options .sorticon.active img {
  opacity: 1.0;
}

Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity won’t change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.

/* list styles */
#listdisplay { 
  display: block;
}

#listdisplay li {
  display: block;
  width: 100%;
  padding: 12px 8px;
  margin-bottom: 1px;
  border-bottom: 1px solid #aaa;
}
#listdisplay li a img {
  display: block;
  float: left;
  padding: 5px;
  border: 2px solid #bbb;
  background: #fff;
  margin-right: 20px;
}

#listdisplay li .innercontent h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 3.0em;
  line-height: 1.35em;
  margin-bottom: 4px;
  color: #73ed95;
  font-weight: bold;
}

#listdisplay.thumbview li {
  display: block;
  width: 360px;
  float: left;
  margin-right: 10px;
  margin-bottom: 7px;
  border: 0;
}
#listdisplay.thumbview li a img {
  display: block;
  float: none;
  margin: 0 auto;
  margin-bottom: 4px;
}
#listdisplay.thumbview li .innercontent {
  display: block;
  text-align: center;
}
#listdisplay.thumbview li .innercontent h2 {
  font-size: 2.2em;
}
#listdisplay.thumbview li .innercontent p {
  display: none;
}

Getting into the list properties you will notice there isn’t much to be confused about. #listdisplay is always being used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view. Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail + image centered, no descriptive text.

You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your audience.

Transitioning jQuery Effects

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.

$(function(){
  $('.options a').on('click', function(e){
    e.preventDefault();
    
    if($(this).hasClass('active')) {
      // do nothing if the clicked link is already active
      return;
    }
    
    $('.options a').removeClass('active');
    $(this).addClass('active');
    
    var clickid = $(this).attr('id');
    

    $('#listdisplay').fadeOut(240, function(){
      if(clickid == 'thumbnails-list') {
        $(this).addClass('thumbview');
      } else {
        $(this).removeClass('thumbview');
      }

      $('#listdisplay').fadeIn(200);  
    });
  });
});

This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.

Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page using fadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.

content list thumbnail display switcher tutorial preview screenshot

Closing

I do hope this more updated tutorial can provide a template for building your own transitional layouts. jQuery is a powerful tool with tons of options for manipulating a website’s frontend design. Please feel free to download a copy of my tutorial codes and see what else you can build following this UI format.

Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

  • Very nice. Simple technique with excellent results.

    Good job.

  • Very impressive; I’m not exactly sure how I will implement this yet, but I’ll let you know!

  • This is an awesome tutorial. Thank you and I will definitely be using this.

  • Nice effect, Soh. I just wonder how it looks to a site visitor who has javascript turned off?

    Where possible I think it’s important to use javascript functions which degrade gracefully, and if this does so then that would be doubly useful.

  • Pingback: Easy Display Switch with CSS and jQuery : Design Newz()

  • Tom

    MMMMMMMMMMMM

    Nice!!

  • Excellent tutorial! I definitely should implement it on one of my blogs!

  • Nice…

  • nice work, thanks for the helpful tut..

  • Great tut!
    It´ll help a lot my recent project!

  • Great tutorial Soh!

  • Pingback: popurls.com // popular today()

  • awesome work 🙂

  • theBagg

    Just a little bug if you double click the switch view button. The views get mixed up.

  • That’s cooooool.

  • Pingback: Easy Display Switch with CSS and jQuery | Best Web Gallery()

  • Tracey Grady’s right. Graceful degradation is important, and this does not accommodate that.

    Looks cool otherwise though.

  • sky

    wow..it’s so cool bro..

    thank u for your post..

  • i got the same thing as theBagg.

  • How hard would it be to add pagination into this? I love the effect and would love to have 3 different display types, along with pagination to reduce the load times of a million images.

  • never thought it actually that simple.
    i think it gonna use some crazy java
    code, but nope. it just that..

    thanks.

  • Fantastic! Such a simple idea and simple code too for a fabulous result.

  • noelmcg

    great tutorial cheers

  • Pingback: links for 2009-03-10 | This Inspires Me()

  • This is a simple but awesome thing! Congratulations!

  • Very nice, and the code is well documented and easy to follow. Thanks.

  • Thanks a lot! Wonderful piece of code!
    It will be useful for my future projects!!!

  • Thank you all for the comments, Im glad that you guys liked it. Looking forward to seeing some nice stuff with this technique 🙂

    @Tracey Grady, @Mike Mella, when javascript is turned off, there is nothing hindering the user from the content since all we are doing is showing them less info when the button is clicked. To make the button not appear when js is turned off, we can simply add a “display: none;” on the button, and .show() once jquery is done loading 🙂

    @theBagg, @WireframingTools, can you please let me know which browser had the buggy issue? I was trying to make it skip but I wasn’t able to pull it off.

    Thank you again!~

  • Incredible 🙂 Very nice

    thank you

  • Pretty slick

  • Pingback: links for 2009-03-10 « Minesa IT()

  • It’s great to see how easy such an elegant effect can be coded. Thanks gor the tutorial.

  • Well written and easy enough for a CSS layman to follow!

  • Pingback: floor44 - links for 2009-03-10()

  • Pingback: The Rollsteady Network » Blog Archive » links for 2009-03-10()

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?()

  • This would be great for a gallery, thanks for the tut Sol.

  • I was looking for a nice way to promote some category thumbnails with different variations.

    I just found it! Nice work Tanaka.

  • Pingback: links for 2009-03-10 « [email protected]()

  • Who have javascript turned off these days 🙂 ?

    I whould sure use it!

  • Pingback: Allow Users to Switch Page Layouts with jQuery & CSS | Business Marketing Experts()

  • Pingback: NexoGeek...Tecnología, Recursos, Cultura..y más.()

  • stack

    nice but you miss one point
    another switch to the real size of the image would be great
    as i got my own portfolio with thumbnail, normal size and big size

    and no i dont want another lightbox for big size
    only jquery rocks !!

    😉

  • nice!!! 🙂

  • Jean

    No cookie to remember witch layout was last used?
    Quite useless…

  • Pingback: Switch Page Layouts with jQuery & CSS()

  • George

    Soh,
    Good stuff – helpful to many!

  • Great! simple but excellent result

  • Very nice.
    I’m going to have to learn me some jquery.

    Layout works fine with javascript disabled, but none of the switching works. That doesn’t seem to be a problem for anyplace that I would use this.

  • Frank

    Very nice!

    Would be good to add a cookie to remember the last layout.

    How would you invert the process from thumb view to list?

    thanks!

  • Pingback: BrianLang.ca » Blog Archive » links for 2009-03-12()

  • Simply beautiful!

  • useful tutorial. Thanks a lot

  • Pingback: Easy Display Switch with CSS and jQuery - Make Better Websites - Inspiration & Showcase for Quality Design and CSS Websites()

  • Hey guys, I’m looking into the cookie issue, I had this in mind when making this tutorial so it was actually intended for a smaller site w/out paging. But to make this useful for sites of all sizes, its a must~

    @Frank, If you want to reverse the order, your going to have to set the default list style to have the thumbs first, and in your jquery, your going to addClass your list style to the thumb layout. Also don’t forget to change the css sprites on the button as well~

  • OMG, I want to use this! It’s so snazzy! Thanks.

  • Pingback: Weekly Links | Shaun Preston()

  • Very nice and simple! thank you!

  • Pingback: Easy Display Switch with CSS and jQuery - Vikram’s Link & Photo Blog()

  • mmm.. good idea!!

  • Great Tutorial! I’m gonna surely use this this technique! Thanks for sharing!

  • Can you try to use cookie on this? Like on the bestwebgallery style. Because everytime I open the demo it will back to the default style.

  • Pingback: links for 2009-03-15 at James A. Arconati()

  • Pingback: A Quick And Simple Way To Switch CSS Style With jQuery | Magazine | Resources | Fish in the River()

  • SB

    nice

  • Well, it’s a 94% solution for me.

    It works great in Firefox and Explorer. But it looks like the switching part is broken in Chrome and Safari. The content_block DIVs have the correct width, but they end up being a narrow list on the left side of the page.

    I’ll still use it on a personal site, but even with only 6% Safari users, I can’t use this on one of my ecommerce sites.

  • Nice!

  • Owl

    Will work perfectly on my webshop =)

  • Pingback: Switch View Gallery with CSS & jQuery | gclubstudio()

  • Pingback: Easy Display Switch with CSS and jQuery | DeanWorks()

  • Pingback: links for 2009-03-19 | BlueWave Media - BlueWave Media Cafe()

  • Pingback: 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith()

  • Pingback: Tyler Merrick » Blog Archive » JQuery Grid vs. List Layout Change()

  • good job!!

  • Pingback: The Wonderfactory » Blog Archive » jQuery Switch()

  • Pingback: Saturday Geek Links on a Monday - 3/24/09 | Geeks with Tricks()

  • Pingback: 10 Creative & Rich UI interfaces & How to Create Them | Noupe()

  • Great tutorial.:)

  • Awesome tutorial, I’ve been looking for something like this 😀

  • Franky

    Hi there,

    First off all, very nice trick with css and jquery.
    I do have a question though. Would it be possible (easy) to add a “third” display option?

    I am very new to jquery and wouldnt exactly know if toggle could accomplish what i am looking for.

    Hope to hear from you.

    Thanks!

  • Great idea, thanks for the tip.

  • Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1 | Joren Rapini.com Weblog()

  • this very cool, thx for share

  • wallan

    Man you know how to make a good tutorial. Great

  • sonvm

    Thanks for share ! I like this 🙂

  • erw13n

    Wow, never though that Tabs can use like this.
    Nice idea

  • Good idea, great.

  • Very nice, i would think about adding a cookie, so it remembers your switch view for the next time you visit.

    thanks for sharing.

  • Very nice mate keep Up…
    its possible to start with the thumb_view (2)
    10X mate

  • Pingback: 49 praktycznych tutoriali jQuery, które ożywią Twoją stronę - Webdesigner blog()

  • Pingback: Easy Display Switch with CSS and jQuery | Seaside99()

  • Thank you so much, this tutorial give me some idea..!!

    Thank you..

  • Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources « Joren Rapini.com Weblog()

  • Pingback: jQuery & CSS Switch Page Layouts | Themeflash : The Better Resources For All Your Web Needs()

  • Awesome Tuts Soh, thanks for sharing this.

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow » News » Tech7.Net()

  • Pingback: Myfreepedia.com » Blog Archive » 50 Fresh JavaScript Tools That Will Improve Your Workflow()

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Dogfeeds——IT Telescope()

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « 4Kreation()

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow @ Nilesh Manohar & Erzsebet Marothi()

  • Pingback: Website-Ansicht mit CSS und JQuery ändern | Design | kann Ich, Anwendung, Ansichtsseite, Gallery-Ansicht, jQuery, Tutorial()

  • Pingback: links for 2009-06-24 « sySolution()

  • lee

    Great script; can think of many uses.

    But: is there a way to stop it from jumping to the top of the page when one clicks the switch?

  • Nick

    Soh, Were you ever going to get it working with a cookie? That would be really appreciated.

  • Awesome script. Thanks for sharing.

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Ramesh()

  • Pretty freakin’ sweet! I put this tutorial to good use at 83themes.com. Thanks for making it so easy!

  • Thank you so much, that’s an awesome gallery! So fresh and so clean, clean.

  • been searching all over Google for a non-complicated way to add reviews and ratings and it looks like this is it.

    Thank you a million times over.

  • Pingback: pixey.de » Tutorial Bilderanzeige mit CSS und jQuery switchen » Css, easy, Image, jQuery, switch, Tutorial()

  • Rihanna Lee

    Did any one ever figure out how to keep the page from jumping back to the top of the site? – Rihanna

  • martin.cui

    Very Nice,It is a good job!!!

  • SP

    Very very cool!

    I have been trying and trying to get the cookie to work because I have multiple pages but just can’t get it. Did ANYONE get a working version with a saved cookie?

  • That is a great display switch plugin! I might have to use this with a project I am working on (:

  • I’m also running into a page jump problem. I tried to replace the “#” hashes with a…

    onclick=”return false;”

    … but that doesn’t fix the issue. Any idea?

    A URL example is available by clicking my name link.

  • Flow

    Can someone tell me how i can use that gallery seperately twice or more often on one site?
    So that i can have different categories and when i change the display method of one category only this one changes and not all on the site.

  • Pingback: Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time()

  • Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow — Graffititools:Designing tips n tools, tutorials, tricks()

  • Nice. The good thing is that its simple and easy to read for anyone!

  • Pingback: Cambiare la struttura di una pagina con jQuery e Css « TagTagWeb()

  • Pingback: Style Switchers Showcase and Resources | huibit05.com()

  • Very Nice,It is a good job!!!
    thanks so much

  • Great tutorial. Thanks for taking the time to write this!

  • I’ll use this on one of my projects. this is very helpful, thanks for sharing your knowledge

  • Cool, this is excellent. I will definately be using it on my site…..

  • Pingback: 20 Simple jQuery Tricks | Design Shack()

  • thanks for this great tutorial.

  • we can use this for wallpaper websites… or photo sharing websites…But we should store this in database

  • Pingback: 20 egyszerű jquery trükk | Blogzóna | VENTOSA kreatív stúdió()

  • nice one, even tho a cookie is missing 😉

  • Hi this is very nice. I have everything working except the image for the switch doesn’t show. The spot is a hot spot and toggles but for some reason I can’t get the switch.gif to show up any suggestions?
    thanks

  • Nox

    Hello,
    great tut!
    Can someone tell me how i can show the thumb gallery first?
    thx

  • When you’re thinking about graceful degradation, you have to think, “Is this functional and usable to everyone?” So with consideration to javascript and the Switching Views, I’d say this degrades gracefully… it’s layout is still semantic XHTML with CSS. There’s only one catch. If javascript is not available to the user viewing this, they still see the list of items/images, they just don’t have the added feature available to switch views. So a tweak to this solution would be to write the switch_view div using javascript, so that if js isn’t available, then the user won’t even see the option to switch views. Otherwise… if you absolutely must have this necessary feature that degrades gracefully and all that marketing hype you scanned over on alistapart, you would have to work it in using some server side language to control the styles (which would require a page reload at least once until the option is set).

  • If you want to prevent it from causing the page to jump to the top, remove the hyperlink and use span instead.

  • Nice One. Very Appreciative.

    It helped me save a lot of time and effort with the readymade coding posted here.

  • Sam

    You can simplify this script using the ‘toggleClass’ function in jQuery:

    $(“span.switch_thumb”).click(function () {
    $(“span.switch_thumb”).toggleClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });
    });

    Also, if you want to use a cookie to remember the view state, use the jQuery cookie plugin (http://www.stilbuero.de/index.php?PHPSESSID=09n8bbbakpkaamhk6hirk168f6&s=cookie&x=0&y=0), and then add to your code like this:

    $(“span.switch_thumb”).click(function () {
    $(“span.switch_thumb”).toggleClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });
    $.cookie(‘view_State’, $(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
    });
    // COOKIES
    // view state
    var view_State = $.cookie(‘view_State’);
    // Set the user’s selection for the viewState
    if (view_State == ‘thumbs’) {
    $(“ul.display”).addClass(“thumb_view”);
    $(“span.switch_thumb”).addClass(“swap”);
    };

  • Jared

    Any restrictions on usage? Can I put this into my templates that I distribute and or sell? I build WordPress themes.

  • Jared,
    Feel free to use it in your templates or themes.

  • This is a great tutorial, I’m a big fan of your work mr. Tanaka, thank you for putting time back into the community. You can see my working version of this scrip on my blog: domeprojects.com Thanks again.

  • Thanks for share. I was looking for it.
    Its simple and easy to read for anyone, great!

  • Awesome work friend….

  • I use it in my website http://www.danilab.net , very nice, Soh Tanaka!!

  • Thanks for sharing! Nice and easy… Will be using it on a new project!

  • I also wanted to use this with cookies and I tired the Sam’s suggestion with no luck:

    “You can simplify this script using the ‘toggleClass’ function in jQuery:

    $(“span.switch_thumb”).click(function () {
    $(“span.switch_thumb”).toggleClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });
    });

    Also, if you want to use a cookie to remember the view state, use the jQuery cookie plugin (http://www.stilbuero.de/index.php?PHPSESSID=09n8bbbakpkaamhk6hirk168f6&s=cookie&x=0&y=0), and then add to your code like this:

    $(“span.switch_thumb”).click(function () {
    $(“span.switch_thumb”).toggleClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });
    $.cookie(‘view_State’, $(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
    });
    // COOKIES
    // view state
    var view_State = $.cookie(‘view_State’);
    // Set the user’s selection for the viewState
    if (view_State == ‘thumbs’) {
    $(“ul.display”).addClass(“thumb_view”);
    $(“span.switch_thumb”).addClass(“swap”);
    };

    It won’t change views anymore if I use this. Any suggestions?

  • Cool effect! Thanks man!

  • Wow! I’ve been looking for this feature. Now my other site just using different theme to change the display type. But this, is like amazing! Might compatible with wordpress? I’ll try this..

  • This is a nice fine for me. Cool effect.

  • +1 for a cookie ! thanks

  • I defiantly liked the tutorial and this made me to think why would a user would like to see such features and functionality if at the very next refresh of the page his/her preference will get flushed….

    How do other people think about this and how can we take this really awesome tutorial to the next level.

  • Some people were asking about the ‘jump’ that happend on the anchor (a href=””) element. This will always happen on an anchor/href element. Change the switch trigger to something else. I think just deleting the href=”” altogether will work. A better solution would be to change it to a (button) element.

  • It doesn’t work :S

  • Great tutorial, the switch is so useful… just need to find a use now!

  • FB

    Great tut Soh,

    for those of you that cannot get the cookie to set,
    from the kind offer of the code by ‘Sam’ you need to replace the curly quotes that the comment system has added and replace them with normal double quotes, if that makes sense…

  • AA

    Hi
    I tried that one out but i doesnt work. The css is incomplete.

  • For all still having problems with the cookies enabled version. Here is the complete working script code:
    http://padexx.pa.ohost.de/togglecookies.txt

    And you also need the above mentioned jquery cookies plugin and call it right after your jquery call.
    http://plugins.jquery.com/project/cookie

  • AAA

    Is there a way to change the layout from three to four, or more in a row. I attempted to change the size of the containers to have it auto adjust, however that has not worked. Any Suggestions?

  • tomasz

    Great tutorial but I have question how I can change default view. I would like that on loaded page will be quick gallery view as default view. What I should change?

  • this design is useful. cool effect. Especial when i need to display a lot images in only one page with many words.

  • So cool. I will try it.

  • Drid

    Nice!!

    Any idea how to make the toggle persistent (w/ cookies)?

  • Rohan

    Sweet dude. That looks amazing!

  • It’s useful, i like it . it can be used for my wesite.
    jquery is so cool.

  • agnes

    Hi! Thanks for the tutorial.. wow.. i did it on the design that i am working with 🙂 thanks again!!!

  • Page jumps.

    Using didn’t work to avoid the page jumping back up if the switch view action is down the page.

    Using “event.stopPropagation();” in the function, didn’t work either.

    Using fadeTo() instead of fadeOut() and fadeIn() didn’t work either.

    Any other ideas on how to stop the page from jumping?

  • Some basic code got stripped out of my post.

    I mean to say that using >spans< (had to invert the brackets) didn't work.

  • Hello,

    There are some sort of unsupported lines in the jQuery/cookie code.
    After 2 errors in the Markup Validation, it can’t even check my pages anymore.
    Is there somebody who can help me with this? It’s the following code that has some lines which cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding).

    $(“a.switch_thumb”).click(function () {
    $(“a.switch_thumb”).toggleClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });

    $.cookie(‘view_State’, $(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
    });

    // COOKIES
    // view state
    var view_State = $.cookie(‘view_State’);
    // Set the user’s selection for the viewState
    if (view_State == ‘thumbs’) {
    $(“ul.display”).addClass(“thumb_view”);
    $(“span.switch_thumb”).addClass(“swap”);
    };

    });

    I think I got the error in the line that is bold.

  • Got the problem and can validate again.
    The problem was in this line:

    // Set the users selection for the viewState

  • Useful article

    Thanks

  • Hi,

    Stepwise decleration of CSS is good it is easy to learn. We can design the template using this tips.

    Deep from Website Development Company : http://www.e-profitbooster.com

    Our Services :

    • Website Designing
    • Web Development
    • PHP Development
    • ASP.NET Development
    • E-Commerce Website
    • Website Re-designing and Maintenance
    • Banner Designing
    • E-Learning
    • Domain Services and Maintenance

  • very good, very strong ………..

  • Thank you for your share and your useful information.

  • Hi! Thanks for the tutorial.. wow.. i did it on the design that i am working with 🙂 thanks again!!!

  • it’s really useful thanks a lot

  • It’s amazing tutorial, I now apply it to my theme , thank you

  • Very useful tutorial for designers…very simple and its veryworthfull..good

  • It’s useful, i like it . it can be used for my wesite.
    jquery is so cool.

  • Criss

    it is not clear how to have the “thumb view” instead of “list view” when the page loads. Could you be more specific?

  • It’s useful, i like it . it can be used for my wesite.
    jquery is so cool.

  • It’s useful, i like it . it can be used for my wesite.
    jquery is so cool.

  • great tutorial thanks

  • LV

    love it

  • I tried this on a recent project and it works well.

  • Menekis

    For the invert function I have a little problem, everything seems to go well except that I need to press twice on the swap button for the first change.

    $(document).ready(function(){

    $(“a.switch_thumb”).toggle(function(){
    $(this).addClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).addClass(“thumb_view”);
    });
    }, function () {
    $(this).removeClass(“swap”);
    $(“ul.display”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).removeClass(“thumb_view”);
    });
    });

    });

    I guess my problem is in the script but I don’t understand what I need to change in it.

    thx for your help

  • nice but you miss one point
    another switch to the real size of the image would be great
    as i got my own portfolio with thumbnail, normal size and big size

    and no i dont want another lightbox for big size
    only jquery rocks !!

  • I am really not sure, I’m looking for a long time effect, this effect was so beautiful, thank you for sharing, I think you are greater than Obama.

  • Thank you for your share!
    Just a little bug if you double click the switch view button. The views get mixed up.

  • Ramakant Yadav

    It’s great tutorial and your technique is so cool.
    Well done go ahead.

    Thanks
    Ramakant Y.

  • Thank you for your share!
    It’s useful, i like it . it can be used for my wesite.
    jquery is so cool.

  • Thank you for your share! I attempted to change the size of the containers to have it auto adjust, however that has not worked

  • If you want to reverse the order, your going to have to set the default list style to have the thumbs first, and in your jquery, your going to addClass your list style to the thumb layout. Also don’t forget to change the css sprites on the button as well~

  • Great! It’s good and useful!

  • Thank you for your share.very useful.

  • Hello,

    I’m trying to implement your display switch in reverse. I want the thumbnails to show first. It’s working fine in FireFox and Chrome, but in IE6,7, and 8 it loads correctly at first but if I stitch to the list view and then back to the thumbnail view it messes up. It displays with only one or two thumbnails on each row instead of three.

    Any ideas as to what could be causing this?

    Thanks,
    Josh

  • it’s so nice i use it in my site
    thank you

  • I’m studying Jquery! Thank you!

  • Nice!

    Keep up the good work.

  • Thank you! I use the first!

  • A bad beginning makes a bad ending.

  • Hi

    I like this plugin.I have Also 10+ Jquery Style Switchers plugins please see:-

    http://jquery13.blogspot.com/2010/08/10-jquery-style-switchers.html

    Thanks
    Aman

  • Josh

    Could someone help me with the code I would need to make it so when the toggle button is clicked a variable’s value is changed at the same time? I want to use the variable to make the image change when the layout is toggled, unless someone has a better way.

    Thanks,
    Josh

  • Thank you for sharing your link with us.

  • Great tut’ as always. Thanks for sharing.

  • great.thanks for share.

  • Thank you! I use the first!

  • Excellent work, a simple but good design! I will use it on a technical review of bull riders… a web site that I’m working on. Thanks!

  • Great tut’ as always. Thanks for sharing.

  • Thank you for your share.very useful.

  • It is magic to use css with jquery!

  • Very nice.
    I’m going to have to learn me some jquery.

  • Thanks for your sharing,I like it

  • Great! Thanks for sharing.

  • Very useful,I have a collection of it~

  • it is so cool,good,thanks for your share

  • The HTML code is quite useful. Thanks!

  • mbt

    ery useful,I have a collection of it~

  • very useful,thanks.

  • The HTML code is quite useful,ugg boots

  • nice, thx for sharing

  • The technique is very simple but the result is very nice and useful.
    thank you

  • Zsolt

    Hi! and Wow! 🙂
    Really nice, just one thing about javascript turned off. I prefer to dynamically add the controls which changes the layout using javascript or but this is not so clever to initially hide the controls, and when there is javascript support you add a class name to the control and the controls become visible.
    The main reason is because to somebody who have javascript turned off maybe for security reason the control button is useless.

  • I just found this tutorial. Thanks so much, it is really great and massively helpful.

    It would be even more powerful if you added the facility to resize the images in table view mode. Maybe give the viewer a choice of 3 different images sizes to choose from – they could get a lot of content on a single page then… but still having the option for more easily viewable larger sizes too.

  • great,Very well written

  • Excelent, i had i mi head something like this, and you have do its real, thanks sr.

  • Excelent thank you so much i have to use it very soon
    thank you

  • just found this tutorial. Thanks so much, it is really great and massively helpful.

  • nice xD

  • It’s very beatiful,It’s helpful!

  • Nice site. Make more post like this.

  • Excelent thank you so much i have to use it very soon,yes The HTML code is quite usefu

  • The main reason is because to somebody who have javascript turned off maybe for security reason the control button is useless.I have a collection of it~

  • Nice, thinking of using this stuff soon on my sites. cool switch..its smooth

  • Good!it’s helpful

  • Nice, cool switch..its smooth

  • nmnlknklnjkjmkl

  • JQuery is really great and gilivable!

  • Exactly Best Design, I got it.

  • omg these designs are epic!

  • Thanks a million…I will try it immediately…

  • All stuffs are cool man. thanks

  • This is perfect, thank you. I enjoyed this tutorial.

  • Nice work done… thanks a lot…

  • Awesome! I can’t wait to give this a try!

  • Thanks a lot… 🙂

  • Mickey

    Hey thank you very much for this nice Tut…

    One Questin how can i change the look?

    I first want to see the thumb view and if i click on switch button i want to see the list view

    Best regards

    Mickey

  • Cyberman

    Wonderfull tutorial.

    It’s a shame the css does not validate, the W3C correct validation messe’s the layout up.

    I would also prefer the default view to be reversed to grid.

  • Brilliant effect and very simple to do. Thanks a lot.
    I have put this effect into my portfolio here http://www.hiddendepth.ie/portfolio/website-design/
    @Mikey + Cyberman: To have the effect reveresed you just need to change the CSS you apply. Swap them and it will work.

    All this script is doing is adding an extra class to the outter div box. So all the changes are done by you within the CSS and everything can be totally changed to whatever you want.

  • Great tutorial, for sure i will text it, fyi i`m using Firefox 1.6 and if u double click on the “change view” button like 6 or 10 times continuously it will make all images disappear

    Best regards

  • Wonderfull tutorial

  • good job

  • Great tutorial. Thanks !

  • This Cookie Feature Certainly Works. I wanted to bring back one with the jQuery No Conflict version. I had to fix this recently on a site and it works.

    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery(“a.switch_thumb”).click(function () {
    jQuery(“a.switch_thumb”).toggleClass(“swap”);
    jQuery(“ul.display”).fadeOut(“fast”, function() {
    jQuery(this).fadeIn(“fast”).toggleClass(“thumb_view”);
    });
    jQuery.cookie(‘view_State’, jQuery(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
    });
    // COOKIES
    // view state
    var view_State = jQuery.cookie(‘view_State’);
    // Set the user’s selection for the viewState
    if (view_State == ‘thumbs’) {
    jQuery(“ul.display”).addClass(“thumb_view”);
    jQuery(“span.switch_thumb”).addClass(“swap”);
    };
    });

  • it’s very useful to me,thanks for your sharing

  • Thanks. It’s very helpful.

  • Congratulations. I am Really like your service.

  • Good work!
    Thanks for the tutorial.

  • This is an awesome tutorial. Thank you and I will definitely be using this.

  • I am happy to see your display tips and css skills.

    Practicing now, thx for your help.

  • Jasper

    I’m not sure how to reverse the order. What exactly do i have to change to see the thumbs first.

  • Jasper

    Do i have to change the list and the jquery like this?

    $(document).ready(function(){

    $(“a.switch_thumb”).toggle(function(){
    $(this).addClass(“swap”);
    $(“ul.thumb_view”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).addClass(“display”);
    });
    }, function () {
    $(this).removeClass(“swap”);
    $(“ul.thumb_view”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).removeClass(“display”);
    });
    });

    });

  • @Jasper: just change the CSS for the classes

  • opie

    How do I implement this on blogger. Please help! Much appreciated.

  • nice tutorials.. try if i have new project.. thank you./.

  • Well i would like to use it, i have seen it, a lot on internet.
    thanks for sharing it with us.
    take care.

  • Great Tutorial to see here – thanks

  • Thanks man.. i customer is very happy right now.

  • Outstanding news it is really. My mother has been seeking for this content.

  • Simply pity myself for missing this great post for such a long. Thanks a ton for such great tutorial. Great work!

  • this great post for such a long. Thanks a ton for such great tutorial.

  • Nice tutorial with deep detail. it is very helpful. Great work by Soh Tanaka

  • That can be usefull for me, but code should show one image for 1 time, like image slider. How can I do it?

  • Well This post remind my old days when i was just started these things as I was new one but now i fully understand this stuff and must appreciate how positive you write

  • Very useful information, thank you

  • Very Nice.. Simply it is the best site with useful information…

  • Thats amazing! Really nice tut! Thanks! Bookmarked this!

  • Rafael

    I wonder how do I display thumbnail first at the time the page is loaded instead of the list view?

  • Rafael,

    Just change how the script loads.

    Have a look here for an example http://www.hiddendepth.ie/portfolio/website-design/

  • mmmm

    Rafael: I would also like the answer to that one. People have tried to answer in earlier posts but it does not make sense to me. I’ve still not worked it out. Otherwise what a great Tutorial, not starting with thumbnails is the only thing that lets it down.

  • I just reversed the script:

    $(document).ready(function(){

    $(“a.switch_thumb”).toggle(function(){
    $(this).removeClass(“swap”);
    $(“.portfolio-box”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).removeClass(“alt-view”);
    });

    }, function () {
    $(this).addClass(“swap”);
    $(“.portfolio-box”).fadeOut(“fast”, function() {
    $(this).fadeIn(“fast”).addClass(“alt-view”);
    });
    });

    });

    Anyone stuck with how to do this feel free to email me at [email protected] and I’ll do my best to help 🙂

  • Nice. thank you.

  • Incredible Very nice
    thank you

  • Very impressive; I’m not exactly sure how I will implement this yet, but I’ll let you know!

  • Thank You for that informative post. I really love to read articles that have good information and ideas to share to each reader

  • Chris

    Had problems trying to figure out why page jumps to the top when using return false or preventDefault. Finally figured out that it’s because fadeOut sets the element to display:none, so the space taken up on the page by the element is released, and the browser jumps up if the remaining content below isn’t sufficiently long enough. Using fadeTo instead will give the desired effect without this issue:

    $(“ul.display”).fadeTo(“fast”, 0.2, function() {
    $(this).fadeTo(“fast”, 1).addClass(“thumb_view”);
    });

  • Chris

    Thanks for the excellent tutorial, btw!

  • Nice tutorial with deep detail. it is very helpful.

  • How do I implement this on blogger. Please help! Much appreciated.

  • Thanks lot 4 your codes. So useful article.

  • Very useful for me, thanks 🙂