7 Great jQuery Techniques for a Perfect Web Design

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 7 Impressive techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.

1. Nivo Slider

Nivo Slider is a lightweight (7kb compressed) jQuery plugin for creating good-looking image sliders with 9 unique transition effects.

Features Include:

To use the Nivo Slider you have to include jQuery, the Nivo Slider script and the Nivo Slider CSS on your page. The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random',
		slices:15,
		animSpeed:500,
		pauseTime:3000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

2. Flip

Flip is a jQuery plugin that will flip easily your elements in four directions.

Options Include:

• contentdefine the new content of the flipped box. It works with: html, text or a jQuery object ex:$(“selector”)
• directionthe direction where to flip. Possible values: ‘tb’, ‘bt’, ‘lr’, ‘rl’ (default:’tb’)
• colorFlip element ending background color
• speedSpeed of the two parts of the animation
• onBeforeSynchronous function excuted before the animation starts
• onAnimationSynchronous function excuted at half animation
• onEndSynchronous function excuted after animation’s end

Using it is very easy:

$("#flipbox").flip({
	direction:'tb'
})

Add content params in this way:

$("#flipbox").flip({
	direction:'tb',
	content:'this is my new content'
})

Sponsor Flip Wall: Using PHP, CSS and jQuery with the jQuery Flip plug-in, the resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

3. Coin Slider

Coin Slider is another Lightweight (8kb only) jQuery Image Slider with Unique Effects. The slider has an optional auto-slide feature and navigation box for browsing images easily. You can add links to your images.

Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you’ll do this:

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
	});
</script>

4. Reel

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash and Java techniques.

The code below will simply make any image reel:

$('#my_image').reel()

Want to have 27 frames instead of 36 (default value):

$('#my_image').reel({ frames: 27 })

5. jPhotoGrid

jPhotoGrid makes it easy to put together a cool image grid from a list of photos. The plugin uses the browser’s image scaling to do the zoom. So the image should be appropriately sized to act as both a thumbnail and a zoomed image.

The markup will be as simple as this:

<ul>
	<li>
		<img src="source.jpg" alt="" />
		<p>Caption Here</p>
	</li>
	...
<ul>

6. jQuery.popeye

jQuery.popeye is an advanced image gallery script to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow. Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.

jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

To tell the script which images, thumbnails and captions to use, there has to be a list like this one:

<ul class="ppy-imglist">
    <li><a href="URL_OF_BIG_IMAGE"><img src="URL_OF_THUMBNAIL" alt="CAPTION_STRING" /></a></li>
    <li>...</li>
</ul>

7. presentationCycle

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear. It offers adjustable animation times and generates a navigation bar that also shows the progress.

Depending on the settings of the script, it dynamically generates a progress bar adjusted to the number of slides in the Cycle container.

Source: http://devsnippets.com