- 1. Latest Post Blogroll Slider
- 2. Dissecting jQuery Filters
- 3. Music Portfolio Template with HTML5 and jQuery
- 4. Animated 404 Page
- 5. Interactive Photo Desk with jQuery and CSS3
- 6. Annotation Overlay Effect
- 7. Pull Out Content Panel with jQuery
- 8. Sliding Panel Photo Wall Gallery
- 9. Beautiful Photo Stack Gallery
- 10. Thumbnails Navigation Gallery with jQuery
Give your web designs a better edge with the web combination of jQuery, CSS and HTML, the usual suspects. See the magic right on your screen! They make a great combination to deliver widgets, galleries, navigation and much more. Enjoy!
Related posts:
1. Latest Post Blogroll Slider
Create a blogroll slider that shows the latest post of your favorite blogs using jQuery, PHP and XSL. The aim is to get a given RSS feed of a blog and parse the XML data with the help of PHP.
Source
Demo
2. Dissecting jQuery Filters
Learn how PHP, CSS3 and HTML blend together with jQuery to create those attractive jQuery plugins. Dissect jQuery filters by taking a single chunk of the jQuery source at a time, break it down, and know what is happing on the process.
Source & Screencast
3. Music Portfolio Template with HTML5 and jQuery
A stunning music portfolio template designed using jQuery and HTML5. This template gives an idea on how to blend HTML5 with jQuery to create stunning plugins and designs.
Source
Demo
4. Animated 404 Page
Sooner or later, somebody is going to type in a wrong URL or follow a broken link to your site. This is when the notorious 404 page is displayed. Learn how to design a friendly error page which will encourage your user to stay at your web site.
Source
Demo
5. Interactive Photo Desk with jQuery and CSS3
The interactive photoDesk plugin based on jQuery and CSS3 helps create interactive portfolios and galleries. Let the audience enjoy playing with the images on your site with this plugin.
Source
Demo
6. Annotation Overlay Effect
This tutorial is about how to create a simple overlay effect to display annotations in e.g. portfolio items of a web designer’s portfolio.
Source
Demo
7. Pull Out Content Panel with jQuery
In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more.
Source
Demo
8. Sliding Panel Photo Wall Gallery
This tutorial helps create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture.
Source
Demo
9. Beautiful Photo Stack Gallery
This tutorial explains how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack.
Source
Demo
10. Thumbnails Navigation Gallery with jQuery
Create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked.
Source
Demo
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.