|
|
|
இதை வச்சும் தேடலாம்
தமிழ் ரேடியோ
என்னைப் பத்தி ஹி...
- மணிபாரதி
- சென்னை, தமிழ்நாடு, India
- என்னை பத்தி நானே என்னன்னு சொல்றது??? நீங்க தான் சொல்லணும் நம்ம அருமை பெருமையெல்லாம்!!!
Switch display between thumbnail and summary view with jquery and CSS
10:15 AM // 0 comments // மணிபாரதி // Category: Blogger Lessons Tricks //Some websites have two modes for displaying : summary view (included thumbnail and summary text )and thumbnail view (only thumbnail) ,especially gallery or portfolio websites . Just click and website turn into thumbnail or summary view .With this effect , website will be more interactive to users . In addition , the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view. I've read an tutorial for making this effect in http://designm.ag website ,and I think it maybe helpful to you so I write down it here .
You can see the live demo here
Enough ? Now ,here is the tutorial for making this
1,As usual ,we need a HTML/Javascript widget . Add one into your blog layout .
2,Adding this CSS code to widget content for styling elements :
3,Here is the HTML code :
Switch Thumb
....................
Change the value (where I marked red) to your image and data . You can add more
for more content .
4,Now, the last step : adding Jquery code
Ok ,Save the widget and we are done . You can check the result in web browsers.
How it work
when we open the page ,it display in summary mode ( thumbnail and summary text ) ,when you click on switch display button ,the Jquery script will change the HTML in step 3 by :-Add class 'swap' to Switch Thumb , so change the state of switch button as you see
-Add class 'thumb_view' to
- element . In CSS code , style of this 'thumb_view' class will hide the text and arrange thumbnail as we see in thumbnail mode .
To go back summary mode ,you click again the switch button .When you click that button ,all the class 'swap' and 'thumb_view' will be removed ,so summary text will be displayed and page layout change to summary mode .
That's all
By
Manibharathi
- Share this on del.icio.us
- Digg this!
- Stumble upon something good? Share it on StumbleUpon
- Share this on Reddit
- Add this to Google Bookmarks
- Tweet This!
- Share this on Facebook
- Share this on Mixx
- Subscribe
- Buzz up!
- Share this on Linkedin
- Submit this to DesignFloat
- Share this on Technorati
- Submit this to Script & Style
- Post this to MySpace
- Share this on Blinklist
- Share this on FriendFeed
- Seed this on Newsvine
Related posts :
0 comments for this post
Leave a reply
365 Days 24x7 Support : Support provided by Hosting Palace is one of the best in the web hosting industry in India.
Infrastructure : All our Web hosting plans, Reseller hosting plans are hosted in the world class Intel Core 2 Quad servers (8 Processors) with atleast 4GB of RAM and they are co-located at Premium Data Centers. All our Windows web hosting and Linux web hosting are are connected to the internet backbone of 70 Gbps from various top class upstream providers!
Reliability : We Provide an uptime guarantee of 99.9 % and you can be assured that signing up for a Linux Web Hosting Plans, Linux Reseller Hosting Plans is backed by 100% risk free 14 Days money back guarantee. In Coming days We are going to offer Cheap web hosting Server, Windows web hosting server, and Linux web hosting servers at affordable prices. Cheap Web Hosting, Cheap Reseller Hosting, Cheap Windows Hosting and Cheap Linux Hosting from Hosting Palace a Web Hosting Company from Chennai, INDIA.
Low Cost Domain Name Registration : Currently we are doing domain name registrations for Rs.449/- for .com, .net, .org, .biz, .info, .name, Rs.700/- for .in and all second level .in for Rs.350. Domain reseller will get discounted prices of Rs.420/-, Rs.700/- or and Rs.350/- respectively.
Quality Web Hosting India : Windows Hosting Plans, Linux Hosting Plans are best suited for Small Business Hosting, Personal Web Hosting and for Student Community.
Cheap Reseller Hosting India : Windows Reseller Hosting, Linux Reseller Hosting are best suited for (1) web hosting reseller (2) Web designers who are interested in offering web hosting services and want to build their own Linux or Windows web hosting company can choose from our Linux reseller hosting plans or Windows reseller hosting plans. Ready, Set, Go!..
Cpanel Web Hosting India : All our Linux Web Hosting and Linux Reseller Hosting comes with Cpanel Hosting Control panel the world's No.1 for Linux Web Hosting.
Affordable Web Designing India : We are having thousands of satisfied customers and hundreds of happy resellers. Several customers requested us to provide web designing services and hence we have started web designing services too. We highly recommend you to go through our Web Design Portfolio to see our compled web design projects.
Contact 24x7 Support : Manibharathi Mob : 09380083338
Followers
தமிழ் நடிகைகள் படங்கள்
Feedjit
பிடித்ததில் படித்து !!!
ஒருவர் உன்னை தாழ்த்திப் பேசும்போது ஊமையாய் இரு...
புகழ்ந்து பேசும்போது செவிடனாய் இரு... எளிதில் வெற்றி பெறுவாய்!
-அப்துல் கலாம்
2009 - 2010 WebIndiaToday.