Fullscreen Background Slideshow Plugin

BuildInternet brings us a super-stylish “supersize” plugin for full-screen slideshows of background images. The supersize plugin is robust and feature-packed, resizing images to full-browser dimensions while maintaining the proper aspect ratio and cycling through background images in smooth slideshow fashion. Plus, navigational controls enable the user to pause, play, and go forward or backward through the images.

Supersized makes it super-easy to deliver fullscreen background slideshows with plenty of options for custom configuration:

• startwidth, startheight – width/height for resizing ratio calculation
• vertical_center – toggles centering of images in vertical fashion
• slideshow – toggles slideshow; includes captions, counters & nav
• navigation – toggles navigation; configurable with custom images
• transition – transition effects include slide-ins, fades, or nothing
• pause_hover – pauses slideshow while current image hovered over
• slide_counter – toggles display of slide counter
• slide_captions – toggles slide captions
• slide_interval – time between slide changes in milliseconds

No explicit usage instructions are found on the plugin’s official project page, but several demos are available that should provide everything you need via the source code. Below is a link to the default demo, the others are available at the bottom of the documentation page.

More info and discussion here.

Demo

Documentation

Download

Read more

Auto-Resize Textareas

James Padolsey gives us an easy way to automatically resize textareas with the autoResize plugin. The autoResize plugin will increase the height of the textarea as the user continues to type. Once the preset limit is reached, the textarea stops expanding and displays a scrollbar for the remainder of the input. Upon deletion of the input text, the textarea returns to its original, default size.

This plugin is very straightforward, and there are plenty of options available:

• onResize – callback function fired every time the textarea is resized
• animate – enable/disable animation of the expanding textarea
• animateDuration – millisecond duration of animation, default is 150
• animateCallback – callback function fired every time an animation completes
• extraSpace – pixel value to be added to the total necessary height when applied to the textarea
• limit – once the textarea reaches this height it will stop expanding, default is 1000

The autoResize plugin has been been tested successfully in IE6/7, FF2/3, Opera9, Safari3 & Chrome.

Demo

Documentation

Download

Read more

jQuery Before/After Plugin

Catch My Fame recently released a very slick before & after plugin that enables easy transition between two different images. The plugin combines two images, presumably a “before” and “after” version of the same thing, and then transposes a slider over the merged composition. Users can then grab the slider and move it across the before and after image composition to see the difference between the two. This kind of functionality is normally done with Flash, so to have it available as a jQuery plugin is very exciting.

Weighing only 7K, the before/after plugin is packed with features, including:

• Slick effect, no Flash needed
• Reusable on multiple containers
• Show either image via nav links
• Cross-browser compatible
• Many options, including auto-animation
• Degradable. If the visitor doesn’t have JavaScript they will still see both images.

This plugin is perfect for showing the difference between any two before and after images. If this sounds like something you would like to do without Flash, this plugin is for you.

Demo

Documentation

Read more

Kwicks for jQuery

Kwicks for jQuery is a highly customizable and versatile widget that enables beautiful transition effects between list items. Kwicks transforms lists and other elements into stylish accordion-like sliding boxes.

Setting up this example is easy:

Add the markup

<ul class="kwicks">
	<li id="kwick1"></li>  
	<li id="kwick2"></li>  
	<li id="kwick3"></li>  
	<li id="kwick4"></li>  
</ul>

Add the CSS

.kwicks li{
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
	background-image: url('images/meet.gif');
}
#kwick2 {
	background-color: #5a69a9;
	background-image: url('images/kwicks.gif');
}
#kwick3 {
	background-color: #c26468;
	background-image: url('images/for.gif');
}
#kwick4 { 
	background-color: #bf7cc7;
	background-image: url('images/jquery.gif');
	margin-right: none;
}

Add the jQuery

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5
	});
});

This is a basic example of what you can do with Kwicks. With the amount of control this plugin provides over its properties, many configurations are possible. It can even go vertical!

Demo Link

Documentation

Download

Read more

AnythingSlider jQuery Plugin

The new AnythingSlider jQuery Plugin from Chris Coyier of CSS Tricks brings together many features of previous sliders and throws in some great new features. This slider is designed to be as useful as possible and is about as “full-featured” as it gets. The AnythingSlider plugin makes configuration and customization a breeze and comes equipped with the following features:

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links

There are many good slider plugins available, but this one is packed with great features and delivers super-smooth performance. Highly recommended.

Demo Link

Documentation

Download

Read more

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Read more