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

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.

MMMMMMMMMMMM

Nice!!

Nice…

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

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

wow..it’s so cool bro..

thank u for your post..

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.

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

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

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

Pretty slick

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

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

I just found it! Nice work Tanaka.

Who have javascript turned off these days ?

I whould sure use it!

nice!!!

Great! simple but excellent result

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!

Simply beautiful!

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

Very nice and simple! thank you!

mmm.. good idea!!

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.

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.

Will work perfectly on my webshop =)

good job!!

Great tutorial.:)

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!

Man you know how to make a good tutorial. Great

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

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

thanks for sharing.

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

Thank you..

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

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

Very Nice,It is a good job!!!

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

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.

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

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

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

nice one, even tho a cookie is missing

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

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

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

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

Awesome work friend….

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

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

Cool effect! Thanks man!

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

This is a nice fine for me. Cool effect.

+1 for a cookie ! thanks

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.

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

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…

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

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?

So cool. I will try it.

Sweet dude. That looks amazing!

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

Some basic code got stripped out of my post.

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

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

// Set the user’s selection for the viewState

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

Thank you for your share and your useful information.

it’s really useful thanks a lot

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

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

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

love it

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

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.

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

Thanks
Ramakant Y.

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

Great! It’s good and useful!

Hello,

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

Any ideas as to what could be causing this?

Thanks,
Josh

I’m studying Jquery! Thank you!

Thank you! I use the first!

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

Thank you for sharing your link with us.

great.thanks for share.