Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

August 20, 2007

6 Comments

jQuery: jqShuffle

Overview

The jQuery jqShuffle Plugin allows you to take a list/group of photos/paragraphs and shuffle through them. When set, it provides a flash-like photo gallery effect.

The plugin is still in development as far as extras go. Base functionality will take your list and produce a shuffle effect similiar to the way you would shuffle a stack of photos, taking the top most photo, moving it to the left and then repositioning it to the bottom of the stack.

Quick Start Guide

1. Add a list of images

  1. <ul class="imageBox">
  2.             <li><span><img src="/experiments/jqShuffle/common/pix/clippy3.jpg"/></span></li>
  3.             <li><span><img src="/experiments/jqShuffle/common/pix/happy.jpg"/></span></li>
  4.             <li><span><img src="/experiments/jqShuffle/common/pix/mycup.jpg"/></span></li>
  5.             <li><span><img src="/experiments/jqShuffle/common/pix/clippy3.jpg"/></span></li>
  6.             <li><span><img src="/experiments/jqShuffle/common/pix/happy.jpg"/></span></li>
  7.             <li><span><img src="/experiments/jqShuffle/common/pix/mycup.jpg"/></span></li>
  8.         </ul>

2. Include jQuery and jqShuffle in the head of your web page

<script type="text/javascript">
		$(document).ready(function(){
				$('.imageBox').jqShuffle();
		});
</script>

That’s it! It will produce the following effect:


jqShuffle Plugin API

The jqShuffle Plugin API provides several methods that will allow you to add more functionality to the shuffle.

$.fn.jqShuffle.shuffleLite
This is the default method/fx

Code Samples

More examples to come

Frequently Asked Questions

What versions of jQuery is the jqShuffle Plugin compatible with?
The jqShuffle Plugin is compatible with jQuery v1.1.3.1 and later.
Does the jqShuffle Plugin have any dependencies on other plugins?
Not really, only if you want to utilize the easing effect.

Download

The jqShuffle Plugin is available at: jqshuffle.js or jqshuffle.compress.js.

Support

Support for the jqShuffle Plugin is available through the jQuery Mailing List.
This is a very active list to which many jQuery developers and users subscribe.

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

6 Responses to “jQuery: jqShuffle”

Lovely plugin how did you get so good in using JQuery? Can you give this newb a few good tips or point me to a source in where I can learn how? Thanks!

Thanks Mathew. I am still learning, the only tips I can really offer is to just do. Experiment. Have fun. If you get stuck, ask questions.

Good resourcs:
http://www.learningjquery.com/
http://groups.google.com/group/jquery-en/

Good luck coding.

Good work indeed!

I am new to javascript. I am trying to use your plug in along with jquery/innerfade. How do I get my images listed first? I think I can apply the rest. Thanks!

Trackbacks

  1. The Book and the Cover » Blog Archive » jQuery: jqShuffle (lite)
  2. JQuery Links

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

63 queries. 0.338 seconds. Powered by WordPress visitor stats