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

jQuery: jqShuffle

by Benjamin Sterling in Flash Alternatives, Javascript, jQuery, jQuery Plugin on August 20, 2007 @ 5:04 pm

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

HTML:
  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.

5 Responses to “jQuery: jqShuffle”

[...] Benjamin Sterling August 10th, 2007 Changes have been made and all new updates will be posted at http://benjaminsterling.com/20.....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.

[...] jQuery Shuffle - http://benjaminsterling.com/jquery-jqshuffle/ [...]

Good work indeed!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

RSS Feed Link

41 queries. 0.523 seconds. Powered by WordPress visitor stats