Supersized 3.2 - Fullscreen Slideshow jQuery Plugin

Supersized 3.2 - Fullscreen Slideshow jQuery Plugin: "

Introducing Supersized 3.2

Features

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles backgrounds via slideshow with transitions and dynamic preloading
• Core version is available for those that just want background resizing.
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set, or group
• Head over to the project page for all the details.

New in Supersized 3.2

• Complete rewrite of the Supersized script.
• More options, including ability to prevent slides from being cut off.
• Link directly to slides
• API lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)
• Theme files are now separate from base files, which will make upgrades much easier. The Shutter theme is included in each download.
• Flickr is not yet updated to 3.2 (it’s on it’s way)

Inspiration / Sites Using Supersized

I’ve put together a small sample of Supersized sites that I’ve come across recently. Keep in mind, these sites are not necessarily running the latest version, and some are heavily customized. I will be putting together a more extensive list for the project page, so feel free to shoot your site to sam@onemightyroar.com!

Plans for WordPress

I’ve noticed quite a few WordPress themes based on Supersized floating around – I plan on entering into the ring with an official Supersized WordPress theme. While I’m still at the early stages at this point, in the meantime, you should check out WP Supersized developed by the talented Ben De Boeck from World In My Eyes. Note: This plugin is currently using version 3.1.3

Comments and Feedback

Just a reminder, you can follow Supersized on Github, which is were I will publish minor point releases and field any bug reports.

If you have an urgent problem and/or would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com. For troubleshooting, make sure you have first checked the documentation and FAQ sections on the project page.

Enjoyed this project? Have a look at our Build Internet Projects page for some other stuff you make fancy as well.

Banner image provided by Colin Wojno.

Other photography by Brooke Shaden and Maria Kazvan.

"

Animated CSS3 Circular Menu with Circular Sub Menus

Animated CSS3 Circular Menu with Circular Sub Menus: "
Today we are featuring a simple CSS3 based circular navigation menu by Stu Nicholls that you can use on your website or web application to provide a creative navigation menu. This lightweight CSS3 animated circular menu uses CSS3 Transforms and Transitions methods to produce animated circular icon menu with circular sub menus.



By hovering over an icon, it animate into six icons in a circular pattern. Then hover any of these icons to see a sub set of six icons animate into a circular attern around each icon.

Special Downloads

Feedback Collection and Polling Widget

Free Creative Resume Template

Open Source Icons

Free Minimal WordPress Theme

Related Posts

• Collection of Free jQuery, HTML5 and CSS3 Scripts
• Web-based Tool for Creating HTML5 Animations: Automatoon
• CSS3 Transitions With Custom Easing Functions: Morf.js
• Feature Rich WYSIWYG HTML Content Editor: BlueGriffon
• Create CSS3 Buttons With CSS3 Buttonize Framework

"

Designing User Friendly Websites and Applications with Notify!

Designing User Friendly Websites and Applications with Notify!: "

Would we be ever able to design products that are so easy and usable that we never need to to train or teach users?

This is a question that I often ask my peers and mentors. Most people agree that we can simplify design but designing a product that is “so intuitive anyone can use it” is like the “product that sells itself” – a rare probability.

Agreed! But I believe there are certain ways designer and developers can employ to design products that are easy to learn and get started with. One of the easy yet unappreciated ways is communicating with users as they interact with an interface. You can use tool tips, notification bars, messages and other unobtrusive tools to provide feedback, give useful tips and hints, or notify about errors. However, one has to be creative and unobtrusive while communicating with users in order to keep both workflow and interface simple and fast.

To make it possible, Greepit has designed Notify, which is a smart and simple jQuery script for notifications.





Notify adds simple notifications bars that you can use on your website and application to assist users while they fill in forms, navigate through pages or interact with interface. These notification bars can be implemented in various fashions

• Floating Notification Bar
• Sticky Notification Bar
• Fixed Notification Bar
• On-Demand Notification Bar

Notify can be easily plugged into any website or web application and offer a lot of customization – color, style, message, behavior etc. and perfectly blends in with existing design, color scheme and layout.

With the prime purpose to assist users, Notify allows you to add any kind of assistive content – tool tips, step-by-step guide, images, videos, useful link, and content from other sources like RSS, twitter stream etc.

Notify is quick to download, easy to implement and free to share.

Special Downloads

Feedback Collection and Polling Widget

Free Creative Resume Template

Open Source Icons

Free Minimal WordPress Theme

Related Posts

• Determine the Visible Fractions of An HTML Element: jQuery.fracs
• JavaScript Library for Enhancing HTML Select Boxes: Chosen
• 360 Rotatable Bubble Style Tooltips: grumble.js
• Create Visual Scrolling Navigation: Ascensor
• Best Practices for Building JavaScript Applications: JavaScriptMVC

"

Create Visual Scrolling Navigation: Ascensor

Create Visual Scrolling Navigation: Ascensor: "
One of the top trends in web design is effective and creative content navigation. You can experience all types of horizontal and vertical navigation of different style in modern websites. To get started with creative navigation, today we are featuring Ascensor, which is a scrolling navigation jQuery plugin which aims to train and adapt content according to an elevator system.



Ascensor identifies div child of the selected container and also creates the needed navigation system to link to different content parts.

Features

• Make every div child a stage of the site
• Add in every div a link for the next div (true/false)
• Create a visual navigation (true/false)
• Adapt and scroll to the active content
• URL logical support

Special Downloads

Feedback Collection and Polling Widget

Free Creative Resume Template

Open Source Icons

Free Minimal WordPress Theme

Related Posts

• Determine the Visible Fractions of An HTML Element: jQuery.fracs
• JavaScript Library for Enhancing HTML Select Boxes: Chosen
• 360 Rotatable Bubble Style Tooltips: grumble.js
• Designing User Friendly Websites and Applications with Notify!
• Best Practices for Building JavaScript Applications: JavaScriptMVC

"

360 Rotatable Bubble Style Tooltips: grumble.js

360 Rotatable Bubble Style Tooltips: grumble.js: "
grumble.js is a jQuery plugin which lets you add a bubble style tooltip to any element; configure its rotation on a 360 degree axis and define its distance from the centre of the element.

Bubble size adapts to contents – perfect when text is localised and size can not be determined up front.



Features

• Rotated around a given element at any angle, all 360 degrees
• Any CSS style can be applied
• FX queues for animating multiple tooltips

grumble.js uses buzzwords like CSS3 and ‘maths’ to position itself exactly where you want it. Modern browsers use CSS3 transforms with IE6+ using non-standard Matrix filters. Image spriting is used for actual bubble image, you can change this as you want – it’s just CSS.

Special Downloads

Feedback Collection and Polling Widget

Free Creative Resume Template

Open Source Icons

Free Minimal WordPress Theme

Related Posts

• Determine the Visible Fractions of An HTML Element: jQuery.fracs
• JavaScript Library for Enhancing HTML Select Boxes: Chosen
• Create Visual Scrolling Navigation: Ascensor
• Designing User Friendly Websites and Applications with Notify!
• Best Practices for Building JavaScript Applications: JavaScriptMVC

"

JavaScript Library for Enhancing HTML Select Boxes: Chosen

JavaScript Library for Enhancing HTML Select Boxes: Chosen: "
Chosen is a tiny JavaScript library for enhancing HTML select boxes. This plugin hides standard HTML selects and provides an alternative using modern HTML and CSS. That means it’s possible to add behaviour that standard selects don’t support without losing support when JavaScript is turned off.



Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for. Non-matching entries are removed from view and choices can be selected using enter or mouse click.

It is currently available in both jQuery and Prototype flavors.

Special Downloads

Feedback Collection and Polling Widget

Free Creative Resume Template

Open Source Icons

Free Minimal WordPress Theme

Related Posts

• Determine the Visible Fractions of An HTML Element: jQuery.fracs
• 360 Rotatable Bubble Style Tooltips: grumble.js
• Create Visual Scrolling Navigation: Ascensor
• Designing User Friendly Websites and Applications with Notify!
• Best Practices for Building JavaScript Applications: JavaScriptMVC

"