7 Great jQuery Techniques for a Perfect Web Design

May 25, 2010

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:

Nivo Slider

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:

  1. <script type=“text/javascript”>  
  2. $(window).load(function() {  
  3.     $(‘#slider’).nivoSlider({  
  4.         effect:‘random’,  
  5.         slices:15,  
  6.         animSpeed:500,  
  7.         pauseTime:3000,  
  8.         startSlide:0, //Set starting Slide (0 index)  
  9.         directionNav:true//Next & Prev  
  10.         directionNavHide:true//Only show on hover  
  11.         controlNav:true//1,2,3…  
  12.         controlNavThumbs:false//Use thumbnails for Control Nav  
  13.         controlNavThumbsSearch: ‘.jpg’//Replace this with…  
  14.         controlNavThumbsReplace: ‘_thumb.jpg’//…this in thumb Image src  
  15.         keyboardNav:true//Use left & right arrows  
  16.         pauseOnHover:true//Stop animation while hovering  
  17.         manualAdvance:false//Force manual transitions  
  18.         captionOpacity:0.8, //Universal caption opacity  
  19.         beforeChange: function(){},  
  20.         afterChange: function(){},  
  21.         slideshowEnd: function(){} //Triggers after all slides have been shown  
  22.     });  
  23. });  
  24. </script>  

2. Flip

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

Flip

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:

  1. $(“#flipbox”).flip({  
  2.     direction:‘tb’  
  3. })  

Add content params in this way:

  1. $(“#flipbox”).flip({  
  2.     direction:‘tb’,  
  3.     content:‘this is my new content’  
  4. })  

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.

Sponsor Flip Wall

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

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:

  1. <script type=“text/javascript”>  
  2.     $(document).ready(function() {  
  3.         $(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });  
  4.     });  
  5. </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.

reel

The code below will simply make any image reel:

  1. $(‘#my_image’).reel()  

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

  1. $(‘#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.

jPhotoGrid

The markup will be as simple as this:

  1. <ul>  
  2.     <li>  
  3.         <img src=“source.jpg” alt=“” />  
  4.         <p>Caption Here</p>  
  5.     </li>  
  6.     …  
  7. <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

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:

  1. <ul class=“ppy-imglist”>  
  2.     <li><a href=“URL_OF_BIG_IMAGE”><img src=“URL_OF_THUMBNAIL” alt=“CAPTION_STRING” /></a></li>  
  3.     <li></li>  
  4. </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.

presentationCycle

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

Tags:

7 Comments

  1. Remarkable read, I simply passed this onto a friend who had been doing a little analysis on that. And he actually purchased me lunch as I found it for him smile Thus let me rephrase that: Thank you just for dinner!

  2. Quincy says:

    Hey I found your blog by mistake when i was searching Live search for this concern, I have to point out your website is quite helpful I also really like the style, it is wonderful!

  3. Hi! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My web site looks weird when viewing from my apple iphone. I’m trying to find a template or plugin that might be able to fix this issue. If you have any suggestions, please share. Many thanks!

  4. kostumer says:

    Greetings! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in exchanging links or maybe guest authoring a blog article or vice-versa? My website goes over a lot of the same topics as yours and I think we could greatly benefit from each other. If you’re interested feel free to shoot me an email. I look forward to hearing from you! Awesome blog by the way!

  5. I adore your wp template, exactly where would you obtain it from?

  6. The heart of your writing while appearing reasonable in the beginning, did not settle properly with me personally after some time. Someplace within the paragraphs you actually were able to make me a believer but just for a short while. I however have got a problem with your jumps in logic and one would do well to help fill in all those breaks. In the event that you actually can accomplish that, I would definitely be fascinated.

  7. suntik putih says:

    Hi! I’ve been following your web site for a while now and finally got the bravery to go ahead and give you a shout out from Atascocita Tx! Just wanted to say keep up the fantastic job!

Leave a Comment

*