Easy Display Switch with CSS and jQuery

by Jake Rocheleau

December 12, 2013 in Tutorials

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.

Powered by Shutterstock

About 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+

  • Jesse Foster

    Mar 9th

    Very nice. Simple technique with excellent results.

    Good job.

  • Will

    Mar 9th

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

  • Jad Limcaco

    Mar 9th

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

  • Tracey Grady

    Mar 9th

    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.

  • Tom

    Mar 9th

    MMMMMMMMMMMM

    Nice!!

  • Jean-Baptiste Jung

    Mar 9th

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

  • DamirK

    Mar 9th

    Nice…

  • joyoge designers' bookmark

    Mar 9th

    nice work, thanks for the helpful tut..

  • Bruno

    Mar 9th

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

  • Jacob Gube

    Mar 9th

    Great tutorial Soh!

  • Sérgio Soares

    Mar 9th

    awesome work :)

  • theBagg

    Mar 10th

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

  • cougar

    Mar 10th

    That’s cooooool.

  • Mike Mella

    Mar 10th

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

    Looks cool otherwise though.

  • sky

    Mar 10th

    wow..it’s so cool bro..

    thank u for your post..

  • Wireframing Tools

    Mar 10th

    i got the same thing as theBagg.

  • Branden Silva

    Mar 10th

    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.

  • izzat aziz

    Mar 10th

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

    thanks.

  • Neon

    Mar 10th

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

  • noelmcg

    Mar 10th

    great tutorial cheers

  • Vini

    Mar 10th

    This is a simple but awesome thing! Congratulations!

  • Bill Lowden

    Mar 10th

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

  • François

    Mar 10th

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

  • Soh Tanaka

    Mar 10th

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

  • evertt de sousa

    Mar 10th

    Incredible :) Very nice

    thank you

  • Timothy

    Mar 10th

    Pretty slick

  • Craig

    Mar 10th

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

  • Chris Casarez

    Mar 10th

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

  • Nokadota

    Mar 11th

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

  • Brian Wilcox

    Mar 11th

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

    I just found it! Nice work Tanaka.

  • Jens

    Mar 11th

    Who have javascript turned off these days :) ?

    I whould sure use it!

  • stack

    Mar 11th

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

    ;)

  • Mendoza Opina

    Mar 11th

    nice!!! :)

  • Jean

    Mar 11th

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

  • George

    Mar 11th

    Soh,
    Good stuff – helpful to many!

  • Komang

    Mar 11th

    Great! simple but excellent result

  • David D

    Mar 12th

    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

    Mar 12th

    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!

  • Martin Sarsini

    Mar 12th

    Simply beautiful!

  • xene

    Mar 12th

    useful tutorial. Thanks a lot

  • Soh Tanaka

    Mar 12th

    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~

  • Steph

    Mar 12th

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

  • Igor

    Mar 13th

    Very nice and simple! thank you!

  • xavo

    Mar 14th

    mmm.. good idea!!

  • Joefrey

    Mar 16th

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

  • Joefrey

    Mar 16th

    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.

  • SB

    Mar 16th

    nice

  • David D

    Mar 16th

    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.

  • solona

    Mar 17th

    Nice!

  • Owl

    Mar 17th

    Will work perfectly on my webshop =)

  • Jhon Doe

    Mar 23rd

    good job!!

  • fonso gfx

    Mar 30th

    Great tutorial.:)

  • Allie

    Mar 30th

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

  • Franky

    Mar 30th

    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!

  • samir

    Mar 30th

    Great idea, thanks for the tip.

  • modja

    Apr 6th

    this very cool, thx for share

  • wallan

    Apr 13th

    Man you know how to make a good tutorial. Great

  • sonvm

    Apr 17th

    Thanks for share ! I like this :-)

  • erw13n

    Apr 19th

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

  • Barbaros Alp

    Apr 20th

    Good idea, great.

  • ArranM

    Apr 30th

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

    thanks for sharing.

  • בניית אתרים

    Apr 30th

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

  • Setiaji

    May 8th

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

    Thank you..

  • GreyK50

    Jun 22nd

    Awesome Tuts Soh, thanks for sharing this.

  • lee

    Jun 25th

    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

    Jun 25th

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

  • Alcor

    Jul 6th

    Awesome script. Thanks for sharing.

  • Josh

    Jul 22nd

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

  • Dax Hansen

    Jul 31st

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

  • WAMPvn

    Aug 1st

    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.

  • Rihanna Lee

    Aug 12th

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

  • martin.cui

    Aug 12th

    Very Nice,It is a good job!!!

  • SP

    Aug 12th

    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?

  • Website Design Services

    Aug 13th

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

  • Annette

    Aug 13th

    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

    Aug 19th

    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.

  • DevNet

    Sep 3rd

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

  • Egypt Web design company

    Sep 9th

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

  • Andrew

    Oct 19th

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

  • Ronald Nunez

    Oct 21st

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

  • Steve

    Oct 24th

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

  • designfollow

    Oct 29th

    thanks for this great tutorial.

  • sivakumar

    Oct 31st

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

  • Alexander

    Nov 13th

    nice one, even tho a cookie is missing ;)

  • Marc

    Nov 17th

    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

    Nov 20th

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

  • Evan Smith

    Nov 24th

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

  • Mark

    Nov 28th

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

  • Master cleanse weight loss

    Dec 22nd

    Nice One. Very Appreciative.

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

  • Sam

    Dec 27th

    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

    Jan 2nd

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

  • Steven Snell

    Jan 2nd

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

  • Justin

    Jan 22nd

    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.

  • Alex

    Feb 14th

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

  • Mohamed kaja

    Feb 15th

    Awesome work friend….

  • d:e:m

    Feb 18th

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

  • Bruce

    Feb 18th

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

  • Dieter

    Feb 18th

    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?

  • Ivan

    Feb 19th

    Cool effect! Thanks man!

  • wptidbits

    Feb 19th

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

  • Web Guru

    Feb 22nd

    This is a nice fine for me. Cool effect.

  • hugo

    Feb 22nd

    +1 for a cookie ! thanks

  • Rajesh Trilokhria

    Feb 24th

    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.

  • Evan Smith

    Feb 25th

    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.

  • Yen Howell

    Feb 25th

    It doesn’t work :S

  • Retro Sweets Hamper

    Feb 26th

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

  • FB

    Mar 4th

    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

    Mar 5th

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

  • padexx

    Mar 11th

    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

    Mar 21st

    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

    Mar 24th

    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?

  • mack

    Mar 31st

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

  • Steven

    Apr 1st

    So cool. I will try it.

  • Drid

    Apr 19th

    Nice!!

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

  • Rohan

    Apr 22nd

    Sweet dude. That looks amazing!

  • crusher

    May 5th

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

  • agnes

    May 13th

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

  • Ricardo Zea

    May 20th

    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?

  • Ricardo Zea

    May 20th

    Some basic code got stripped out of my post.

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

  • CMentality

    May 21st

    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.

  • CMentality

    May 21st

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

    // Set the users selection for the viewState

  • dattai

    Jun 19th

    Useful article

    Thanks

  • Dayanand

    Jun 23rd

    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

  • grinding mill

    Jul 3rd

    very good, very strong ………..

  • raymond mill

    Jul 3rd

    Thank you for your share and your useful information.

  • cone crusher

    Jul 6th

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

  • discount louis vuitton

    Jul 10th

    it’s really useful thanks a lot

  • Jennifer R

    Jul 10th

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

  • Website design chennai

    Jul 12th

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

  • bailey

    Jul 18th

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

  • Criss

    Jul 18th

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

  • louis

    Jul 23rd

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

  • vuitton hanbags

    Jul 23rd

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

  • seminyak hotels

    Jul 23rd

    great tutorial thanks

  • LV

    Jul 24th

    love it

  • Adam Cooper

    Jul 24th

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

  • Menekis

    Jul 26th

    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

  • grindind mill

    Jul 27th

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

  • stone crusher machine

    Jul 28th

    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.

  • fanggaofeng

    Aug 2nd

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

  • Ramakant Yadav

    Aug 4th

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

    Thanks
    Ramakant Y.

  • stone crusher

    Aug 4th

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

  • crusher website

    Aug 5th

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

  • vertical roller mill

    Aug 6th

    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~

  • mill

    Aug 7th

    Great! It’s good and useful!

  • stone crusher

    Aug 10th

    Thank you for your share.very useful.

  • Josh

    Aug 10th

    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

  • العاب

    Aug 11th

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

  • pulverizer

    Aug 11th

    I’m studying Jquery! Thank you!

  • Shahid

    Aug 12th

    Nice!

    Keep up the good work.

  • crusher machine

    Aug 14th

    Thank you! I use the first!

  • cheap ghd

    Aug 17th

    A bad beginning makes a bad ending.

  • Aman

    Aug 18th

    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

    Aug 19th

    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

  • symons cone crusher

    Aug 20th

    Thank you for sharing your link with us.

  • Julien

    Aug 25th

    Great tut’ as always. Thanks for sharing.

  • grinding mill

    Aug 31st

    great.thanks for share.

  • Crusher

    Sep 1st

    Thank you! I use the first!

  • M.Octavio

    Sep 6th

    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!

  • crusher

    Sep 9th

    Great tut’ as always. Thanks for sharing.

  • jaw crusher

    Sep 9th

    Thank you for your share.very useful.

  • crusher machines

    Sep 13th

    It is magic to use css with jquery!

  • jaw crusher

    Sep 15th

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

  • crusher

    Sep 15th

    Thanks for your sharing,I like it

  • trituradora

    Sep 16th

    Great! Thanks for sharing.

  • Molinos industriales

    Sep 16th

    Very useful,I have a collection of it~

  • mark

    Sep 19th

    it is so cool,good,thanks for your share

  • crushing equipment

    Sep 20th

    The HTML code is quite useful. Thanks!

  • mbt

    Sep 21st

    ery useful,I have a collection of it~

  • crusher

    Sep 25th

    very useful,thanks.

  • boots

    Sep 26th

    The HTML code is quite useful,ugg boots

  • Ravi Juneja

    Sep 30th

    nice, thx for sharing

  • Ajax Examples

    Oct 9th

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

  • Zsolt

    Oct 21st

    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.

  • Retro Sweets

    Oct 22nd

    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.

  • roller mill

    Oct 25th

    great,Very well written

  • Amos Lee

    Oct 26th

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

  • ejasoft

    Nov 1st

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

  • crusher

    Nov 5th

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

  • Alyen

    Nov 9th

    nice xD

  • ore crusher

    Nov 10th

    It’s very beatiful,It’s helpful!

  • Adam

    Nov 11th

    Nice site. Make more post like this.

  • rock crusher

    Nov 23rd

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

  • stone crusher

    Nov 23rd

    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~

  • Evangeline

    Dec 1st

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

  • vibrating screen

    Dec 6th

    Good!it’s helpful

  • Machacadoras

    Dec 8th

    Nice, cool switch..its smooth

  • Beats by Dre

    Dec 15th

    nmnlknklnjkjmkl

  • stone crusher

    Dec 31st

    JQuery is really great and gilivable!

  • Crusher

    Dec 31st

    Exactly Best Design, I got it.

  • how to get rich easily

    Jan 2nd

    omg these designs are epic!

  • Quarry Crusher

    Jan 4th

    Thanks a million…I will try it immediately…

  • ooty

    Jan 4th

    All stuffs are cool man. thanks

  • Lacey

    Jan 4th

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

  • Nagarajan

    Jan 27th

    Nice work done… thanks a lot…

  • รับทำเว็บไซต์

    Jan 30th

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

  • Rahul

    Feb 7th

    Thanks a lot… :)

  • Mickey

    Feb 9th

    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

    Feb 9th

    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.

  • Dave

    Feb 13th

    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.

  • Howie

    Feb 14th

    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

  • steel plate

    Feb 15th

    Wonderfull tutorial

  • steel plate

    Feb 15th

    good job

  • layouts for facebook

    Feb 23rd

    Great tutorial. Thanks !

  • Jared Ritchey

    Feb 25th

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

  • quartz crusher

    Feb 27th

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

  • Myyearbook Layouts

    Mar 4th

    Thanks. It’s very helpful.

  • CCNA CHENNAI

    Mar 9th

    Congratulations. I am Really like your service.

  • Cool Websites

    Mar 10th

    Good work!
    Thanks for the tutorial.

  • altın çilek

    Mar 15th

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

  • Stone Crusher

    Mar 17th

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

    Practicing now, thx for your help.

  • Jasper

    Apr 5th

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

  • Jasper

    Apr 5th

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

    });

  • Dave

    Apr 6th

    @Jasper: just change the CSS for the classes

  • opie

    Apr 20th

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

  • jasa website murah

    Apr 21st

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

  • cryoffalcon

    Apr 26th

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

  • Atif

    Apr 30th

    Great Tutorial to see here – thanks

  • System requirements

    May 3rd

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

  • Ellen Englander

    May 9th

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

  • Mohit

    May 10th

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

  • five finger shoes

    May 11th

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

  • Karis

    May 14th

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

  • Hotel Taksim

    May 19th

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

  • web development

    May 24th

    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

  • crusher in india

    May 29th

    Very useful information, thank you

  • Dissertation help

    Jun 4th

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

  • alex

    Jun 8th

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

  • Rafael

    Jun 14th

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

  • Dave

    Jun 15th

    Rafael,

    Just change how the script loads.

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

  • mmmm

    Jun 16th

    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.

  • Dave

    Jun 16th

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

  • Mark

    Jun 17th

    Nice. thank you.

  • jaw crusher

    Jul 6th

    Incredible Very nice
    thank you

  • mobile crusher

    Jul 10th

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

  • Bulk material handling conveyors

    Jul 22nd

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

  • Chris

    Jul 26th

    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

    Jul 26th

    Thanks for the excellent tutorial, btw!

  • shcrusher

    Aug 2nd

    Nice tutorial with deep detail. it is very helpful.

  • micro powder mill

    Aug 2nd

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

  • facebookthemes

    Aug 2nd

    Thanks lot 4 your codes. So useful article.

  • ardianzzz

    Aug 9th

    Very useful for me, thanks :)

  • Leave a Comment

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