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