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.
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.
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.
Very nice. Simple technique with excellent results.
Good job.
Very impressive; I’m not exactly sure how I will implement this yet, but I’ll let you know!
This is an awesome tutorial. Thank you and I will definitely be using this.
Nice effect, Soh. I just wonder how it looks to a site visitor who has javascript turned off?
Where possible I think it’s important to use javascript functions which degrade gracefully, and if this does so then that would be doubly useful.
Pingback: Easy Display Switch with CSS and jQuery : Design Newz
MMMMMMMMMMMM
Nice!!
Excellent tutorial! I definitely should implement it on one of my blogs!
Nice…
nice work, thanks for the helpful tut..
Great tut!
It´ll help a lot my recent project!
Great tutorial Soh!
Pingback: popurls.com // popular today
awesome work 🙂
Just a little bug if you double click the switch view button. The views get mixed up.
That’s cooooool.
Pingback: Easy Display Switch with CSS and jQuery | Best Web Gallery
Tracey Grady’s right. Graceful degradation is important, and this does not accommodate that.
Looks cool otherwise though.
wow..it’s so cool bro..
thank u for your post..
i got the same thing as theBagg.
How hard would it be to add pagination into this? I love the effect and would love to have 3 different display types, along with pagination to reduce the load times of a million images.
never thought it actually that simple.
i think it gonna use some crazy java
code, but nope. it just that..
thanks.
Fantastic! Such a simple idea and simple code too for a fabulous result.
great tutorial cheers
Pingback: links for 2009-03-10 | This Inspires Me
This is a simple but awesome thing! Congratulations!
Very nice, and the code is well documented and easy to follow. Thanks.
Thanks a lot! Wonderful piece of code!
It will be useful for my future projects!!!
Thank you all for the comments, Im glad that you guys liked it. Looking forward to seeing some nice stuff with this technique 🙂
@Tracey Grady, @Mike Mella, when javascript is turned off, there is nothing hindering the user from the content since all we are doing is showing them less info when the button is clicked. To make the button not appear when js is turned off, we can simply add a “display: none;” on the button, and .show() once jquery is done loading 🙂
@theBagg, @WireframingTools, can you please let me know which browser had the buggy issue? I was trying to make it skip but I wasn’t able to pull it off.
Thank you again!~
Incredible 🙂 Very nice
thank you
Pretty slick
Pingback: links for 2009-03-10 « Minesa IT
It’s great to see how easy such an elegant effect can be coded. Thanks gor the tutorial.
Well written and easy enough for a CSS layman to follow!
Pingback: floor44 - links for 2009-03-10
Pingback: The Rollsteady Network » Blog Archive » links for 2009-03-10
Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
This would be great for a gallery, thanks for the tut Sol.
I was looking for a nice way to promote some category thumbnails with different variations.
I just found it! Nice work Tanaka.
Pingback: links for 2009-03-10 « Richard@Home
Who have javascript turned off these days 🙂 ?
I whould sure use it!
Pingback: Allow Users to Switch Page Layouts with jQuery & CSS | Business Marketing Experts
Pingback: NexoGeek...Tecnología, Recursos, Cultura..y más.
nice but you miss one point
another switch to the real size of the image would be great
as i got my own portfolio with thumbnail, normal size and big size
and no i dont want another lightbox for big size
only jquery rocks !!
😉
nice!!! 🙂
No cookie to remember witch layout was last used?
Quite useless…
Pingback: Switch Page Layouts with jQuery & CSS
Soh,
Good stuff – helpful to many!
Great! simple but excellent result
Very nice.
I’m going to have to learn me some jquery.
Layout works fine with javascript disabled, but none of the switching works. That doesn’t seem to be a problem for anyplace that I would use this.
Very nice!
Would be good to add a cookie to remember the last layout.
How would you invert the process from thumb view to list?
thanks!
Pingback: BrianLang.ca » Blog Archive » links for 2009-03-12
Simply beautiful!
useful tutorial. Thanks a lot
Pingback: Easy Display Switch with CSS and jQuery - Make Better Websites - Inspiration & Showcase for Quality Design and CSS Websites
Hey guys, I’m looking into the cookie issue, I had this in mind when making this tutorial so it was actually intended for a smaller site w/out paging. But to make this useful for sites of all sizes, its a must~
@Frank, If you want to reverse the order, your going to have to set the default list style to have the thumbs first, and in your jquery, your going to addClass your list style to the thumb layout. Also don’t forget to change the css sprites on the button as well~
OMG, I want to use this! It’s so snazzy! Thanks.
Pingback: Weekly Links | Shaun Preston
Very nice and simple! thank you!
Pingback: Easy Display Switch with CSS and jQuery - Vikram’s Link & Photo Blog
mmm.. good idea!!
Great Tutorial! I’m gonna surely use this this technique! Thanks for sharing!
Can you try to use cookie on this? Like on the bestwebgallery style. Because everytime I open the demo it will back to the default style.
Pingback: links for 2009-03-15 at James A. Arconati
Pingback: A Quick And Simple Way To Switch CSS Style With jQuery | Magazine | Resources | Fish in the River
nice
Well, it’s a 94% solution for me.
It works great in Firefox and Explorer. But it looks like the switching part is broken in Chrome and Safari. The content_block DIVs have the correct width, but they end up being a narrow list on the left side of the page.
I’ll still use it on a personal site, but even with only 6% Safari users, I can’t use this on one of my ecommerce sites.
Nice!
Will work perfectly on my webshop =)
Pingback: Switch View Gallery with CSS & jQuery | gclubstudio
Pingback: Easy Display Switch with CSS and jQuery | DeanWorks
Pingback: links for 2009-03-19 | BlueWave Media - BlueWave Media Cafe
Pingback: 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith
Pingback: Tyler Merrick » Blog Archive » JQuery Grid vs. List Layout Change
good job!!
Pingback: The Wonderfactory » Blog Archive » jQuery Switch
Pingback: Saturday Geek Links on a Monday - 3/24/09 | Geeks with Tricks
Pingback: 10 Creative & Rich UI interfaces & How to Create Them | Noupe
Great tutorial.:)
Awesome tutorial, I’ve been looking for something like this 😀
Hi there,
First off all, very nice trick with css and jquery.
I do have a question though. Would it be possible (easy) to add a “third” display option?
I am very new to jquery and wouldnt exactly know if toggle could accomplish what i am looking for.
Hope to hear from you.
Thanks!
Great idea, thanks for the tip.
Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1 | Joren Rapini.com Weblog
this very cool, thx for share
Man you know how to make a good tutorial. Great
Thanks for share ! I like this 🙂
Wow, never though that Tabs can use like this.
Nice idea
Good idea, great.
Very nice, i would think about adding a cookie, so it remembers your switch view for the next time you visit.
thanks for sharing.
Very nice mate keep Up…
its possible to start with the thumb_view (2)
10X mate
Pingback: 49 praktycznych tutoriali jQuery, które ożywią Twoją stronę - Webdesigner blog
Pingback: Easy Display Switch with CSS and jQuery | Seaside99
Thank you so much, this tutorial give me some idea..!!
Thank you..
Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources « Joren Rapini.com Weblog
Pingback: jQuery & CSS Switch Page Layouts | Themeflash : The Better Resources For All Your Web Needs
Awesome Tuts Soh, thanks for sharing this.
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow » News » Tech7.Net
Pingback: Myfreepedia.com » Blog Archive » 50 Fresh JavaScript Tools That Will Improve Your Workflow
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Dogfeeds——IT Telescope
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « 4Kreation
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow @ Nilesh Manohar & Erzsebet Marothi
Pingback: Website-Ansicht mit CSS und JQuery ändern | Design | kann Ich, Anwendung, Ansichtsseite, Gallery-Ansicht, jQuery, Tutorial
Pingback: links for 2009-06-24 « sySolution
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?
Soh, Were you ever going to get it working with a cookie? That would be really appreciated.
Awesome script. Thanks for sharing.
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow « Ramesh
Pretty freakin’ sweet! I put this tutorial to good use at 83themes.com. Thanks for making it so easy!
Thank you so much, that’s an awesome gallery! So fresh and so clean, clean.
been searching all over Google for a non-complicated way to add reviews and ratings and it looks like this is it.
Thank you a million times over.
Pingback: pixey.de » Tutorial Bilderanzeige mit CSS und jQuery switchen » Css, easy, Image, jQuery, switch, Tutorial
Did any one ever figure out how to keep the page from jumping back to the top of the site? – Rihanna
Very Nice,It is a good job!!!
Very very cool!
I have been trying and trying to get the cookie to work because I have multiple pages but just can’t get it. Did ANYONE get a working version with a saved cookie?
That is a great display switch plugin! I might have to use this with a project I am working on (:
I’m also running into a page jump problem. I tried to replace the “#” hashes with a…
onclick=”return false;”
… but that doesn’t fix the issue. Any idea?
A URL example is available by clicking my name link.
Can someone tell me how i can use that gallery seperately twice or more often on one site?
So that i can have different categories and when i change the display method of one category only this one changes and not all on the site.
Pingback: Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time
Pingback: 50 Fresh JavaScript Tools That Will Improve Your Workflow — Graffititools:Designing tips n tools, tutorials, tricks
Nice. The good thing is that its simple and easy to read for anyone!
Pingback: Cambiare la struttura di una pagina con jQuery e Css « TagTagWeb
Pingback: Style Switchers Showcase and Resources | huibit05.com
Very Nice,It is a good job!!!
thanks so much
Great tutorial. Thanks for taking the time to write this!
I’ll use this on one of my projects. this is very helpful, thanks for sharing your knowledge
Cool, this is excellent. I will definately be using it on my site…..
Pingback: 20 Simple jQuery Tricks | Design Shack
thanks for this great tutorial.
we can use this for wallpaper websites… or photo sharing websites…But we should store this in database
Pingback: 20 egyszerű jquery trükk | Blogzóna | VENTOSA kreatív stúdió
nice one, even tho a cookie is missing 😉
Hi this is very nice. I have everything working except the image for the switch doesn’t show. The spot is a hot spot and toggles but for some reason I can’t get the switch.gif to show up any suggestions?
thanks
Hello,
great tut!
Can someone tell me how i can show the thumb gallery first?
thx
When you’re thinking about graceful degradation, you have to think, “Is this functional and usable to everyone?” So with consideration to javascript and the Switching Views, I’d say this degrades gracefully… it’s layout is still semantic XHTML with CSS. There’s only one catch. If javascript is not available to the user viewing this, they still see the list of items/images, they just don’t have the added feature available to switch views. So a tweak to this solution would be to write the switch_view div using javascript, so that if js isn’t available, then the user won’t even see the option to switch views. Otherwise… if you absolutely must have this necessary feature that degrades gracefully and all that marketing hype you scanned over on alistapart, you would have to work it in using some server side language to control the styles (which would require a page reload at least once until the option is set).
If you want to prevent it from causing the page to jump to the top, remove the hyperlink and use span instead.
Nice One. Very Appreciative.
It helped me save a lot of time and effort with the readymade coding posted here.
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.
Jared,
Feel free to use it in your templates or themes.
This is a great tutorial, I’m a big fan of your work mr. Tanaka, thank you for putting time back into the community. You can see my working version of this scrip on my blog: domeprojects.com Thanks again.
Thanks for share. I was looking for it.
Its simple and easy to read for anyone, great!
Awesome work friend….
I use it in my website http://www.danilab.net , very nice, Soh Tanaka!!
Thanks for sharing! Nice and easy… Will be using it on a new project!
I also wanted to use this with cookies and I tired the Sam’s suggestion with no luck:
“You can simplify this script using the ‘toggleClass’ function in jQuery:
$(“span.switch_thumb”).click(function () {
$(“span.switch_thumb”).toggleClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).toggleClass(“thumb_view”);
});
});
Also, if you want to use a cookie to remember the view state, use the jQuery cookie plugin (http://www.stilbuero.de/index.php?PHPSESSID=09n8bbbakpkaamhk6hirk168f6&s=cookie&x=0&y=0), and then add to your code like this:
$(“span.switch_thumb”).click(function () {
$(“span.switch_thumb”).toggleClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).toggleClass(“thumb_view”);
});
$.cookie(‘view_State’, $(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
});
// COOKIES
// view state
var view_State = $.cookie(‘view_State’);
// Set the user’s selection for the viewState
if (view_State == ‘thumbs’) {
$(“ul.display”).addClass(“thumb_view”);
$(“span.switch_thumb”).addClass(“swap”);
};
It won’t change views anymore if I use this. Any suggestions?
Cool effect! Thanks man!
Wow! I’ve been looking for this feature. Now my other site just using different theme to change the display type. But this, is like amazing! Might compatible with wordpress? I’ll try this..
This is a nice fine for me. Cool effect.
+1 for a cookie ! thanks
I defiantly liked the tutorial and this made me to think why would a user would like to see such features and functionality if at the very next refresh of the page his/her preference will get flushed….
How do other people think about this and how can we take this really awesome tutorial to the next level.
Some people were asking about the ‘jump’ that happend on the anchor (a href=””) element. This will always happen on an anchor/href element. Change the switch trigger to something else. I think just deleting the href=”” altogether will work. A better solution would be to change it to a (button) element.
It doesn’t work :S
Great tutorial, the switch is so useful… just need to find a use now!
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…
Hi
I tried that one out but i doesnt work. The css is incomplete.
For all still having problems with the cookies enabled version. Here is the complete working script code:
http://padexx.pa.ohost.de/togglecookies.txt
And you also need the above mentioned jquery cookies plugin and call it right after your jquery call.
http://plugins.jquery.com/project/cookie
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?
Great tutorial but I have question how I can change default view. I would like that on loaded page will be quick gallery view as default view. What I should change?
this design is useful. cool effect. Especial when i need to display a lot images in only one page with many words.
So cool. I will try it.
Nice!!
Any idea how to make the toggle persistent (w/ cookies)?
Sweet dude. That looks amazing!
It’s useful, i like it . it can be used for my wesite.
jquery is so cool.
Hi! Thanks for the tutorial.. wow.. i did it on the design that i am working with 🙂 thanks again!!!
Page jumps.
Using didn’t work to avoid the page jumping back up if the switch view action is down the page.
Using “event.stopPropagation();” in the function, didn’t work either.
Using fadeTo() instead of fadeOut() and fadeIn() didn’t work either.
Any other ideas on how to stop the page from jumping?
Some basic code got stripped out of my post.
I mean to say that using >spans< (had to invert the brackets) didn't work.
Hello,
There are some sort of unsupported lines in the jQuery/cookie code.
After 2 errors in the Markup Validation, it can’t even check my pages anymore.
Is there somebody who can help me with this? It’s the following code that has some lines which cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding).
I think I got the error in the line that is bold.
Got the problem and can validate again.
The problem was in this line:
Useful article
Thanks
Hi,
Stepwise decleration of CSS is good it is easy to learn. We can design the template using this tips.
Deep from Website Development Company : http://www.e-profitbooster.com
Our Services :
• Website Designing
• Web Development
• PHP Development
• ASP.NET Development
• E-Commerce Website
• Website Re-designing and Maintenance
• Banner Designing
• E-Learning
• Domain Services and Maintenance
very good, very strong ………..
Thank you for your share and your useful information.
Hi! Thanks for the tutorial.. wow.. i did it on the design that i am working with 🙂 thanks again!!!
it’s really useful thanks a lot
It’s amazing tutorial, I now apply it to my theme , thank you
Very useful tutorial for designers…very simple and its veryworthfull..good
It’s useful, i like it . it can be used for my wesite.
jquery is so cool.
it is not clear how to have the “thumb view” instead of “list view” when the page loads. Could you be more specific?
It’s useful, i like it . it can be used for my wesite.
jquery is so cool.
It’s useful, i like it . it can be used for my wesite.
jquery is so cool.
great tutorial thanks
love it
I tried this on a recent project and it works well.
For the invert function I have a little problem, everything seems to go well except that I need to press twice on the swap button for the first change.
$(document).ready(function(){
$(“a.switch_thumb”).toggle(function(){
$(this).addClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).addClass(“thumb_view”);
});
}, function () {
$(this).removeClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).removeClass(“thumb_view”);
});
});
});
I guess my problem is in the script but I don’t understand what I need to change in it.
thx for your help
nice but you miss one point
another switch to the real size of the image would be great
as i got my own portfolio with thumbnail, normal size and big size
and no i dont want another lightbox for big size
only jquery rocks !!
I am really not sure, I’m looking for a long time effect, this effect was so beautiful, thank you for sharing, I think you are greater than Obama.
Thank you for your share!
Just a little bug if you double click the switch view button. The views get mixed up.
It’s great tutorial and your technique is so cool.
Well done go ahead.
Thanks
Ramakant Y.
Thank you for your share!
It’s useful, i like it . it can be used for my wesite.
jquery is so cool.
Thank you for your share! I attempted to change the size of the containers to have it auto adjust, however that has not worked
If you want to reverse the order, your going to have to set the default list style to have the thumbs first, and in your jquery, your going to addClass your list style to the thumb layout. Also don’t forget to change the css sprites on the button as well~
Great! It’s good and useful!
Thank you for your share.very useful.
Hello,
I’m trying to implement your display switch in reverse. I want the thumbnails to show first. It’s working fine in FireFox and Chrome, but in IE6,7, and 8 it loads correctly at first but if I stitch to the list view and then back to the thumbnail view it messes up. It displays with only one or two thumbnails on each row instead of three.
Any ideas as to what could be causing this?
Thanks,
Josh
it’s so nice i use it in my site
thank you
I’m studying Jquery! Thank you!
Nice!
Keep up the good work.
Thank you! I use the first!
A bad beginning makes a bad ending.
Hi
I like this plugin.I have Also 10+ Jquery Style Switchers plugins please see:-
http://jquery13.blogspot.com/2010/08/10-jquery-style-switchers.html
Thanks
Aman
Could someone help me with the code I would need to make it so when the toggle button is clicked a variable’s value is changed at the same time? I want to use the variable to make the image change when the layout is toggled, unless someone has a better way.
Thanks,
Josh
Thank you for sharing your link with us.
Great tut’ as always. Thanks for sharing.
great.thanks for share.
Thank you! I use the first!
Excellent work, a simple but good design! I will use it on a technical review of bull riders… a web site that I’m working on. Thanks!
Great tut’ as always. Thanks for sharing.
Thank you for your share.very useful.
It is magic to use css with jquery!
Very nice.
I’m going to have to learn me some jquery.
Thanks for your sharing,I like it
Great! Thanks for sharing.
Very useful,I have a collection of it~
it is so cool，good，thanks for your share
The HTML code is quite useful. Thanks!
ery useful,I have a collection of it~
very useful,thanks.
The HTML code is quite useful,ugg boots
nice, thx for sharing
The technique is very simple but the result is very nice and useful.
thank you
Hi! and Wow! 🙂
Really nice, just one thing about javascript turned off. I prefer to dynamically add the controls which changes the layout using javascript or but this is not so clever to initially hide the controls, and when there is javascript support you add a class name to the control and the controls become visible.
The main reason is because to somebody who have javascript turned off maybe for security reason the control button is useless.
I just found this tutorial. Thanks so much, it is really great and massively helpful.
It would be even more powerful if you added the facility to resize the images in table view mode. Maybe give the viewer a choice of 3 different images sizes to choose from – they could get a lot of content on a single page then… but still having the option for more easily viewable larger sizes too.
great,Very well written
Excelent, i had i mi head something like this, and you have do its real, thanks sr.
Excelent thank you so much i have to use it very soon
thank you
just found this tutorial. Thanks so much, it is really great and massively helpful.
nice xD
It’s very beatiful,It’s helpful!
Nice site. Make more post like this.
Excelent thank you so much i have to use it very soon,yes The HTML code is quite usefu
The main reason is because to somebody who have javascript turned off maybe for security reason the control button is useless.I have a collection of it~
Nice, thinking of using this stuff soon on my sites. cool switch..its smooth
Good!it’s helpful
Nice, cool switch..its smooth
nmnlknklnjkjmkl
JQuery is really great and gilivable!
Exactly Best Design, I got it.
omg these designs are epic!
Thanks a million…I will try it immediately…
All stuffs are cool man. thanks
This is perfect, thank you. I enjoyed this tutorial.
Nice work done… thanks a lot…
Awesome! I can’t wait to give this a try!
Thanks a lot… 🙂
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
Wonderfull tutorial.
It’s a shame the css does not validate, the W3C correct validation messe’s the layout up.
I would also prefer the default view to be reversed to grid.
Brilliant effect and very simple to do. Thanks a lot.
I have put this effect into my portfolio here http://www.hiddendepth.ie/portfolio/website-design/
@Mikey + Cyberman: To have the effect reveresed you just need to change the CSS you apply. Swap them and it will work.
All this script is doing is adding an extra class to the outter div box. So all the changes are done by you within the CSS and everything can be totally changed to whatever you want.
Great tutorial, for sure i will text it, fyi i`m using Firefox 1.6 and if u double click on the “change view” button like 6 or 10 times continuously it will make all images disappear
Best regards
Wonderfull tutorial
good job
Great tutorial. Thanks !
This Cookie Feature Certainly Works. I wanted to bring back one with the jQuery No Conflict version. I had to fix this recently on a site and it works.
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(“a.switch_thumb”).click(function () {
jQuery(“a.switch_thumb”).toggleClass(“swap”);
jQuery(“ul.display”).fadeOut(“fast”, function() {
jQuery(this).fadeIn(“fast”).toggleClass(“thumb_view”);
});
jQuery.cookie(‘view_State’, jQuery(‘ul.display’).is(‘.thumb_view’) ? ‘list’ : ‘thumbs’ );
});
// COOKIES
// view state
var view_State = jQuery.cookie(‘view_State’);
// Set the user’s selection for the viewState
if (view_State == ‘thumbs’) {
jQuery(“ul.display”).addClass(“thumb_view”);
jQuery(“span.switch_thumb”).addClass(“swap”);
};
});
it’s very useful to me,thanks for your sharing
Thanks. It’s very helpful.
Congratulations. I am Really like your service.
Good work!
Thanks for the tutorial.
This is an awesome tutorial. Thank you and I will definitely be using this.
I am happy to see your display tips and css skills.
Practicing now, thx for your help.
I’m not sure how to reverse the order. What exactly do i have to change to see the thumbs first.
Do i have to change the list and the jquery like this?
$(document).ready(function(){
$(“a.switch_thumb”).toggle(function(){
$(this).addClass(“swap”);
$(“ul.thumb_view”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).addClass(“display”);
});
}, function () {
$(this).removeClass(“swap”);
$(“ul.thumb_view”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).removeClass(“display”);
});
});
});
@Jasper: just change the CSS for the classes
How do I implement this on blogger. Please help! Much appreciated.
nice tutorials.. try if i have new project.. thank you./.
Well i would like to use it, i have seen it, a lot on internet.
thanks for sharing it with us.
take care.
Great Tutorial to see here – thanks
Thanks man.. i customer is very happy right now.
Outstanding news it is really. My mother has been seeking for this content.
Simply pity myself for missing this great post for such a long. Thanks a ton for such great tutorial. Great work!
this great post for such a long. Thanks a ton for such great tutorial.
Nice tutorial with deep detail. it is very helpful. Great work by Soh Tanaka
That can be usefull for me, but code should show one image for 1 time, like image slider. How can I do it?
Well This post remind my old days when i was just started these things as I was new one but now i fully understand this stuff and must appreciate how positive you write
Very useful information, thank you
Very Nice.. Simply it is the best site with useful information…
Thats amazing! Really nice tut! Thanks! Bookmarked this!
I wonder how do I display thumbnail first at the time the page is loaded instead of the list view?
Rafael,
Just change how the script loads.
Have a look here for an example http://www.hiddendepth.ie/portfolio/website-design/
Rafael: I would also like the answer to that one. People have tried to answer in earlier posts but it does not make sense to me. I’ve still not worked it out. Otherwise what a great Tutorial, not starting with thumbnails is the only thing that lets it down.
I just reversed the script:
$(document).ready(function(){
$(“a.switch_thumb”).toggle(function(){
$(this).removeClass(“swap”);
$(“.portfolio-box”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).removeClass(“alt-view”);
});
}, function () {
$(this).addClass(“swap”);
$(“.portfolio-box”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).addClass(“alt-view”);
});
});
});
Anyone stuck with how to do this feel free to email me at [email protected] and I’ll do my best to help 🙂
Nice. thank you.
Incredible Very nice
thank you
Very impressive; I’m not exactly sure how I will implement this yet, but I’ll let you know!
Thank You for that informative post. I really love to read articles that have good information and ideas to share to each reader
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”);
});
Thanks for the excellent tutorial, btw!
Nice tutorial with deep detail. it is very helpful.
How do I implement this on blogger. Please help! Much appreciated.
Thanks lot 4 your codes. So useful article.
Very useful for me, thanks 🙂