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.

Tags:
0 shares

Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.

  1. March 9, 2009

    Very nice. Simple technique with excellent results.

    Good job.

  2. March 9, 2009

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

  3. March 9, 2009

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

  4. March 9, 2009

    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.

  5. Pingback: Easy Display Switch with CSS and jQuery : Design Newz

  6. March 9, 2009

    MMMMMMMMMMMM

    Nice!!

  7. March 9, 2009

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

  8. March 9, 2009

    Nice…

  9. nice work, thanks for the helpful tut..

  10. March 9, 2009

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

  11. March 9, 2009

    Great tutorial Soh!

  12. Pingback: popurls.com // popular today

  13. March 9, 2009

    awesome work 🙂

  14. theBagg
    March 10, 2009

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

  15. March 10, 2009

    That’s cooooool.

  16. Pingback: Easy Display Switch with CSS and jQuery | Best Web Gallery

  17. March 10, 2009

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

    Looks cool otherwise though.

  18. March 10, 2009

    wow..it’s so cool bro..

    thank u for your post..

  19. March 10, 2009

    i got the same thing as theBagg.

  20. March 10, 2009

    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.

  21. March 10, 2009

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

    thanks.

  22. March 10, 2009

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

  23. noelmcg
    March 10, 2009

    great tutorial cheers

  24. Pingback: links for 2009-03-10 | This Inspires Me

  25. March 10, 2009

    This is a simple but awesome thing! Congratulations!

  26. March 10, 2009

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

  27. March 10, 2009

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

  28. March 10, 2009

    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!~

  29. March 10, 2009

    Incredible 🙂 Very nice

    thank you

  30. March 10, 2009

    Pretty slick

  31. Pingback: links for 2009-03-10 « Minesa IT

  32. March 10, 2009

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

  33. March 10, 2009

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

  34. Pingback: floor44 - links for 2009-03-10

  35. Pingback: The Rollsteady Network » Blog Archive » links for 2009-03-10

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

  37. March 11, 2009

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

  38. March 11, 2009

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

    I just found it! Nice work Tanaka.

  39. Pingback: links for 2009-03-10 « Richard@Home

  40. March 11, 2009

    Who have javascript turned off these days 🙂 ?

    I whould sure use it!

  41. Pingback: Allow Users to Switch Page Layouts with jQuery & CSS | Business Marketing Experts

  42. Pingback: NexoGeek...Tecnología, Recursos, Cultura..y más.

  43. stack
    March 11, 2009

    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 !!

    😉

  44. March 11, 2009

    nice!!! 🙂

  45. Jean
    March 11, 2009

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

  46. Pingback: Switch Page Layouts with jQuery & CSS

  47. George
    March 11, 2009

    Soh,
    Good stuff – helpful to many!

  48. March 11, 2009

    Great! simple but excellent result

  49. March 12, 2009

    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.

  50. Frank
    March 12, 2009

    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!

  51. Pingback: BrianLang.ca » Blog Archive » links for 2009-03-12

  52. March 12, 2009

    Simply beautiful!

  53. March 12, 2009

    useful tutorial. Thanks a lot

  54. Pingback: Easy Display Switch with CSS and jQuery - Make Better Websites - Inspiration & Showcase for Quality Design and CSS Websites

  55. March 12, 2009

    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~

  56. March 12, 2009

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

  57. Pingback: Weekly Links | Shaun Preston

  58. March 13, 2009

    Very nice and simple! thank you!

  59. Pingback: Easy Display Switch with CSS and jQuery - Vikram’s Link & Photo Blog

  60. March 14, 2009

    mmm.. good idea!!

  61. March 16, 2009

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

  62. March 16, 2009

    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.

  63. Pingback: links for 2009-03-15 at James A. Arconati

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

  65. March 16, 2009

    nice

  66. March 16, 2009

    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.

  67. March 17, 2009

    Nice!

  68. Owl
    March 17, 2009

    Will work perfectly on my webshop =)

  69. Pingback: Switch View Gallery with CSS & jQuery | gclubstudio

  70. Pingback: Easy Display Switch with CSS and jQuery | DeanWorks

  71. Pingback: links for 2009-03-19 | BlueWave Media - BlueWave Media Cafe

  72. Pingback: 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith

  73. Pingback: Tyler Merrick » Blog Archive » JQuery Grid vs. List Layout Change

  74. March 23, 2009

    good job!!

  75. Pingback: The Wonderfactory » Blog Archive » jQuery Switch

  76. Pingback: Saturday Geek Links on a Monday - 3/24/09 | Geeks with Tricks

  77. Pingback: 10 Creative & Rich UI interfaces & How to Create Them | Noupe

  78. March 30, 2009

    Great tutorial.:)

  79. March 30, 2009

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

  80. Franky
    March 30, 2009

    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!

  81. March 30, 2009

    Great idea, thanks for the tip.

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

  83. April 6, 2009

    this very cool, thx for share

  84. wallan
    April 13, 2009

    Man you know how to make a good tutorial. Great

  85. sonvm
    April 17, 2009

    Thanks for share ! I like this 🙂

  86. erw13n
    April 19, 2009

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

  87. April 20, 2009

    Good idea, great.

  88. April 30, 2009

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

    thanks for sharing.

  89. April 30, 2009

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

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

  91. Pingback: Easy Display Switch with CSS and jQuery | Seaside99

  92. May 8, 2009

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

    Thank you..

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

  94. Pingback: jQuery & CSS Switch Page Layouts | Themeflash : The Better Resources For All Your Web Needs

  95. June 22, 2009

    Awesome Tuts Soh, thanks for sharing this.

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

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

  98. Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Dogfeeds——IT Telescope

  99. Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « 4Kreation

  100. Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow @ Nilesh Manohar & Erzsebet Marothi

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

  102. Pingback: links for 2009-06-24 « sySolution

  103. lee
    June 25, 2009

    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?

  104. Nick
    June 25, 2009

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

  105. July 6, 2009

    Awesome script. Thanks for sharing.

  106. Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Ramesh

  107. July 22, 2009

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

  108. July 31, 2009

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

  109. August 1, 2009

    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.

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

  111. Rihanna Lee
    August 12, 2009

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

  112. martin.cui
    August 12, 2009

    Very Nice,It is a good job!!!

  113. SP
    August 12, 2009

    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?

  114. August 13, 2009

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

  115. August 13, 2009

    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.

  116. Flow
    August 19, 2009

    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.

  117. Pingback: Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time

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

  119. September 3, 2009

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

  120. Pingback: Cambiare la struttura di una pagina con jQuery e Css « TagTagWeb

  121. Pingback: Style Switchers Showcase and Resources | huibit05.com

  122. September 9, 2009

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

  123. October 19, 2009

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

  124. October 21, 2009

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

  125. October 24, 2009

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

  126. Pingback: 20 Simple jQuery Tricks | Design Shack

  127. October 29, 2009

    thanks for this great tutorial.

  128. October 31, 2009

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

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

  130. November 13, 2009

    nice one, even tho a cookie is missing 😉

  131. November 17, 2009

    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

  132. Nox
    November 20, 2009

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

  133. November 24, 2009

    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).

  134. November 28, 2009

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

  135. December 22, 2009

    Nice One. Very Appreciative.

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

  136. December 27, 2009

    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”);
    };

  137. Jared
    January 2, 2010

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

  138. January 2, 2010

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

  139. January 22, 2010

    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.

  140. February 14, 2010

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

  141. February 15, 2010

    Awesome work friend….

  142. February 18, 2010

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

  143. February 18, 2010

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

  144. February 18, 2010

    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?

  145. February 19, 2010

    Cool effect! Thanks man!

  146. February 19, 2010

    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..

  147. February 22, 2010

    This is a nice fine for me. Cool effect.

  148. February 22, 2010

    +1 for a cookie ! thanks

  149. February 24, 2010

    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.

  150. February 25, 2010

    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.

  151. February 25, 2010

    It doesn’t work :S

  152. February 26, 2010

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

  153. March 4, 2010

    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…

  154. AA
    March 5, 2010

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

  155. March 11, 2010

    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

  156. AAA
    March 21, 2010

    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?

  157. tomasz
    March 24, 2010

    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?

  158. March 31, 2010

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

  159. April 1, 2010

    So cool. I will try it.

  160. Drid
    April 19, 2010

    Nice!!

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

  161. Rohan
    April 22, 2010

    Sweet dude. That looks amazing!

  162. May 5, 2010

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

  163. agnes
    May 13, 2010

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

  164. May 20, 2010

    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?

  165. May 20, 2010

    Some basic code got stripped out of my post.

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

  166. May 21, 2010

    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.

  167. May 21, 2010

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

    // Set the users selection for the viewState

  168. June 19, 2010

    Useful article

    Thanks

  169. June 23, 2010

    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

  170. July 3, 2010

    very good, very strong ………..

  171. July 3, 2010

    Thank you for your share and your useful information.

  172. July 6, 2010

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

  173. July 10, 2010

    it’s really useful thanks a lot

  174. July 10, 2010

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

  175. July 12, 2010

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

  176. July 18, 2010

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

  177. Criss
    July 18, 2010

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

  178. July 23, 2010

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

  179. July 23, 2010

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

  180. July 23, 2010

    great tutorial thanks

  181. July 24, 2010

    love it

  182. July 24, 2010

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

  183. Menekis
    July 26, 2010

    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

  184. July 27, 2010

    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 !!

  185. July 28, 2010

    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.

  186. August 2, 2010

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

  187. Ramakant Yadav
    August 4, 2010

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

    Thanks
    Ramakant Y.

  188. August 4, 2010

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

  189. August 5, 2010

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

  190. August 6, 2010

    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~

  191. August 7, 2010

    Great! It’s good and useful!

  192. August 10, 2010

    Thank you for your share.very useful.

  193. August 10, 2010

    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

  194. August 11, 2010

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

  195. August 11, 2010

    I’m studying Jquery! Thank you!

  196. August 12, 2010

    Nice!

    Keep up the good work.

  197. August 14, 2010

    Thank you! I use the first!

  198. August 17, 2010

    A bad beginning makes a bad ending.

  199. August 18, 2010

    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

  200. Josh
    August 19, 2010

    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

  201. August 20, 2010

    Thank you for sharing your link with us.

  202. August 25, 2010

    Great tut’ as always. Thanks for sharing.

  203. August 31, 2010

    great.thanks for share.

  204. September 1, 2010

    Thank you! I use the first!

  205. September 6, 2010

    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!

  206. September 9, 2010

    Great tut’ as always. Thanks for sharing.

  207. September 9, 2010

    Thank you for your share.very useful.

  208. September 13, 2010

    It is magic to use css with jquery!

  209. September 15, 2010

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

  210. September 15, 2010

    Thanks for your sharing,I like it

  211. September 16, 2010

    Great! Thanks for sharing.

  212. September 16, 2010

    Very useful,I have a collection of it~

  213. September 19, 2010

    it is so cool,good,thanks for your share

  214. September 20, 2010

    The HTML code is quite useful. Thanks!

  215. September 21, 2010

    ery useful,I have a collection of it~

  216. September 25, 2010

    very useful,thanks.

  217. September 26, 2010

    The HTML code is quite useful,ugg boots

  218. September 30, 2010

    nice, thx for sharing

  219. October 9, 2010

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

  220. Zsolt
    October 21, 2010

    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.

  221. October 22, 2010

    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.

  222. October 25, 2010

    great,Very well written

  223. October 26, 2010

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

  224. November 1, 2010

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

  225. November 5, 2010

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

  226. November 9, 2010

    nice xD

  227. November 10, 2010

    It’s very beatiful,It’s helpful!

  228. November 11, 2010

    Nice site. Make more post like this.

  229. November 23, 2010

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

  230. November 23, 2010

    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~

  231. December 1, 2010

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

  232. December 6, 2010

    Good!it’s helpful

  233. December 8, 2010

    Nice, cool switch..its smooth

  234. December 15, 2010

    nmnlknklnjkjmkl

  235. December 31, 2010

    JQuery is really great and gilivable!

  236. December 31, 2010

    Exactly Best Design, I got it.

  237. January 2, 2011

    omg these designs are epic!

  238. January 4, 2011

    Thanks a million…I will try it immediately…

  239. January 4, 2011

    All stuffs are cool man. thanks

  240. January 4, 2011

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

  241. January 27, 2011

    Nice work done… thanks a lot…

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

  243. February 7, 2011

    Thanks a lot… 🙂

  244. Mickey
    February 9, 2011

    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

  245. Cyberman
    February 9, 2011

    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.

  246. February 13, 2011

    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.

  247. February 14, 2011

    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

  248. February 15, 2011

    Wonderfull tutorial

  249. February 15, 2011

    good job

  250. February 23, 2011

    Great tutorial. Thanks !

  251. February 25, 2011

    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”);
    };
    });

  252. February 27, 2011

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

  253. March 4, 2011

    Thanks. It’s very helpful.

  254. March 9, 2011

    Congratulations. I am Really like your service.

  255. March 10, 2011

    Good work!
    Thanks for the tutorial.

  256. March 15, 2011

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

  257. March 17, 2011

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

    Practicing now, thx for your help.

  258. Jasper
    April 5, 2011

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

  259. Jasper
    April 5, 2011

    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”);
    });
    });

    });

  260. April 6, 2011

    @Jasper: just change the CSS for the classes

  261. opie
    April 20, 2011

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

  262. April 21, 2011

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

  263. April 26, 2011

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

  264. April 30, 2011

    Great Tutorial to see here – thanks

  265. May 3, 2011

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

  266. May 9, 2011

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

  267. May 10, 2011

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

  268. May 11, 2011

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

  269. May 14, 2011

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

  270. May 19, 2011

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

  271. May 24, 2011

    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

  272. May 29, 2011

    Very useful information, thank you

  273. June 4, 2011

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

  274. June 8, 2011

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

  275. Rafael
    June 14, 2011

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

  276. June 15, 2011

    Rafael,

    Just change how the script loads.

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

  277. mmmm
    June 16, 2011

    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.

  278. June 16, 2011

    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 info@hiddendepth.ie and I’ll do my best to help 🙂

  279. June 17, 2011

    Nice. thank you.

  280. July 6, 2011

    Incredible Very nice
    thank you

  281. July 10, 2011

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

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

  283. Chris
    July 26, 2011

    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”);
    });

  284. Chris
    July 26, 2011

    Thanks for the excellent tutorial, btw!

  285. August 2, 2011

    Nice tutorial with deep detail. it is very helpful.

  286. August 2, 2011

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

  287. August 2, 2011

    Thanks lot 4 your codes. So useful article.

  288. August 9, 2011

    Very useful for me, thanks 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Elegant Themes Giveaway: Win One of 4 Developer Subscriptions for the Upcoming DIVI Theme