Let’s just jump right in there.  Some caveats: I am sure there is probably a better approach to some of the code, so please give some guidance on how it should be improved.  This code assumes that all the data is already loaded into the collection.  The set of data I was working with had a record count of about 28,000 items.  I’ve gone back and both on if having that much data loaded is a good or bad thing.  Of all the articles I’ve read there doesn’t seem to be a consensus.

The folder structure I am using is:

// Folder structure being used
assets/
	app/
		collections/
			tags.js
		mixins/
			pagination.js
		models/
			tag.js
		views/
			pagination.js
			tags.js

The JSON structure I am dealing with:

{
	"status":true,
	"tags":[
		{
			"id":1,
			"name":"A"
		},...
	]
}

The model, nothing too special going on here:

(function (models) {
	models.Tag = Backbone.Model.extend({});
})(App.models);

The collection, again, is a pretty basic set up.  I’ve set to model to map to App.models.Tag, our url to point to tags_all.php and overridden the parse method to return a cleaned up tags array.

The last line _.extend(collections.Tags.prototype, pagination); is where we mixin in our Pagination module(?: not sure what its proper name is actually. Module, Class?).

(function (collections, pagination, model) {
	collections.Tags = Backbone.Collection.extend({
		model : model,
		url : 'tags_all.php',

		/**
		 * @param resp the response returned by the server
		 * @returns (Array) tags
		 */
		parse : function (resp) {
			var tags = resp.tags;

			return tags;
		}
	});

	_.extend(collections.Tags.prototype, pagination);
})(App.collections, App.mixins.Pagination, App.models.Tag);

Next up is the Pagination mixin code, have a read of it and I’ll comment after the code.

(function (mixins) {
	/**
	 * @class
	 * Pagination
	 */
	mixins.Pagination = {
		/**  how many items to show per page */
		perPage : 20,

		/** page to start off on */
		page : 1,

		/**
		 *
		 */
		nextPage : function () {
			var self = this;

			self.page = ++self.page;
			self.pager();
		},

		previousPage : function () {
			var self = this;

			self.page = --self.page || 1;
			self.pager();
		},

		goTo : function (page) {
			var self = this;

			self.page = parseInt(page,10);
			self.pager();
		},

		howManyPer : function (perPage) {
			var self = this;
			self.page = 1;
			self.perPage = perPage;
			self.pager();
		},

		setSort : function (column, direction) {
			var self = this;

			self.pager(column, direction);
		},

		pager : function (sort, direction) {
			var self = this,
				start = (self.page-1)*this.perPage,
				stop  = start+self.perPage;

			if (self.orgmodels === undefined) {
				self.orgmodels = self.models;
			}

			self.models = self.orgmodels;

			if (sort) {
				self.models = self._sort(self.models, sort);
			}

			self.reset(
				self.models.slice(start,stop)
			);
		},

		_sort : function (models, sort) {
			models = models.sort(function(a,b) {
				var a = a.get(sort),
					b = b.get(sort);

				if (direction === 'desc') {
					if (a > b) {
						return -1;
					}

					if (a < b) {
						return 1;
					}
				}
				else {
					if (a < b) {
						return -1;
					}

					if (a > b) {
						return 1;
					}
				}

				return 0;
			});

			return models;
		},

		info : function () {
			var self = this,
				info = {},
				totalRecords = (self.orgmodels) ? self.orgmodels.length : self.length,
				totalPages = Math.ceil(totalRecords/self.perPage);

			info = {
				totalRecords  : totalRecords,
				page          : self.page,
				perPage       : self.perPage,
				totalPages    : totalPages,
				lastPage      : totalPages,
				lastPagem1    : totalPages-1,
				previous      : false,
				next          : false,
				page_set      : [],
				startRecord   : (self.page - 1) * self.perPage + 1,
				endRecord     : Math.min(totalRecords, self.page * self.perPage)
			};

			if (self.page > 1) {
				info.prev = self.page - 1;
			}

			if (self.page < info.totalPages) {
				info.next = self.page + 1;
			}

			info.pageSet = self.setPagination(info);

			self.information = info;
			return info;
		},

		setPagination : function (info) {
			var pages = [];
			// How many adjacent pages should be shown on each side?
			var ADJACENT = 3;
			var ADJACENTx2 = ADJACENT*2;
			var LASTPAGE = Math.ceil(info.totalRecords/info.perPage);
			var LPM1 = -1;

			if (LASTPAGE > 1) {
				//not enough pages to bother breaking it up
				if (LASTPAGE < (7 + ADJACENTx2)) {
					for (var i=1,l=LASTPAGE; i <= l; i++) {
						pages.push(i);
					}
				}
				// enough pages to hide some
				else if (LASTPAGE > (5 + ADJACENTx2)) {

					//close to beginning; only hide later pages
					if (info.page < (1 + ADJACENTx2)) {
						for (var i=1, l=4+ADJACENTx2; i < l; i++) {
							pages.push(i);				
						}
					}

					//in middle; hide some front and some back
					else if(LASTPAGE - ADJACENTx2 > info.page && info.page > ADJACENTx2) {
						for (var i = info.page - ADJACENT; i <= info.page + ADJACENT; i++) {
							pages.push(i);				
						}	
					}
					//close to end; only hide early pages
					else{
						for (var i = LASTPAGE - (2 + ADJACENTx2); i <= LASTPAGE; i++) {
							pages.push(i);					
						}
					}
				}
			}

			return pages;
		}
	};

})(App.mixins);

Most of the code is pretty self-explanatory, so I won’t dig into every line.  There are some methods you will see in the code, setSort and _sort, that are actually not in use for this discussion but will follow up on them in another post.

The first four methods are the ones that get triggered to start the ball rolling on the pagination.  Each of them call the pager method.

The page method makes a backup copy of the models the first pass through.  Resets models with said backup.  Ignore the sort for this post.  And lastly we pass in the start and stop points into the Array slice method, which we in turn pass to the Backbone.js reset method.  This will trigger a reset event and any view that is watching it will execute.

The last two methods to concern yourself with is the info and setPagination methods.  The info method does some base variable set up that will be used in views that need that info, our pagination view for-instance.  The setPagination method is called by info and at this point I must add two things.  The first is that I more or less borrowed the code from a PHP pagination script and can’t find it again, otherwise I’d give credit.  The second is that the purpose of setPagination is to allow for custom pagination structure and I was not clear I how I should make this more straight forward.  Any suggestions would be great.

So, what does setPagination do?  Basically it returns an array of what pages you want in your pagination — this will become a bit clearer what you see the pagination view below/in action, but let me try to explain.  In the code that is there, if we are on page 8 of our recordset, the pages that show will look something like this: 5 6 7 8 9 10 11.   But you are not limited to that structure.  In the project I will be merging this into, it will have a structure like, assuming I am on page 8 again: 1-5 6 7 8 9 10 11-15.

Hopefully that is clear.

Next two up are the pagination view and template/index page themselves.  The final structure will look something like:  “First Previous 5 6 7 8 9 10 11 Next Last Show 20 | 50 | 100 141 – 160 of 28091 shown”.  Again, everything should be pretty self-explanatory, each method is named to do what it is supposed to do.

(function (views) {
	views.Pagination = Backbone.View.extend({

		events : {
			'click a.first'        : 'gotoFirst',
			'click a.prev'         : 'gotoPrev',
			'click a.next'         : 'gotoNext',
			'click a.last'         : 'gotoLast',
			'click a.page'         : 'gotoPage',
			'click .howmany a'     : 'changeCount'
		},

		tagName : 'aside',
		initialize : function () {
			_.bindAll (this, 'render');
			var self = this;

			self.tmpl = _.template($('#tmpPagination').html());
			self.collection.bind('reset', this.render);
			$(self.el).appendTo('body');
		},
		render : function () {
            var self;
            self = this;

			var html = this.tmpl(self.collection.info());
			$(this.el).html(html);
		},

		gotoFirst : function (e) {
			e.preventDefault();

			var self = this;

			self.collection.goTo(1);
		},

		gotoPrev : function (e) {
			e.preventDefault();

			var self = this;

			self.collection.previousPage();
		},

		gotoNext : function (e) {
			e.preventDefault();

			var self = this;

			self.collection.nextPage();
		},

		gotoLast : function (e) {
			e.preventDefault();

			var self = this;

			self.collection.goTo(self.collection.information.lastPage);
		},

		gotoPage : function (e) {
			e.preventDefault();

			var self = this;
			var page = $(e.target).text();

			self.collection.goTo(page);
		},

		changeCount : function (e) {
			e.preventDefault();

			var self = this;
			var per = $(e.target).text();

			self.collection.howManyPer(per);
		}
	});
})(App.views);

I am using underscore.js’ template function.  Only real thing to note is the _.each loop.  This is where the “pages”, e.g. “5 6 7 8 9 10 11“, will get parsed out.

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.7.1.min.js"></script>
		<script src="underscore.js"></script>
		<script src="json2.js"></script>
		<script src="backbone.js"></script>
		<script type="text/javascript">
			var App = {
				collections : {},
				models : {},
				views : {},
				mixins : {},
				init : function () {
					var collection = new App.collections.Tags();
					App.views.tags = new App.views.Tags({collection:collection});
					new App.views.Pagination({collection:collection});
				}
			};
		</script>
		<script src="assets/app/mixins/pagination.js"></script>
		<script src="assets/app/models/tag.js"></script>
		<script src="assets/app/collections/tags.js"></script>
		<script src="assets/app/views/tags.js"></script>
		<script src="assets/app/views/pagination.js"></script>
		<script type="text/javascript">
			$(App.init);
		</script>
	</head>
	<body>

		<script type="text/html" id="tmpPagination">
			<span class="cell last pages">
				<% if (page != 1) { %>
					<a href="#" class="first">First</a>
					<a href="#" class="prev">Previous</a>
				<% } %>
				<% _.each (pageSet, function (p) { %>
					<% if (page == p) { %>
						<span class="page selected"><%= p %></span>
					<% } else { %>
						<a href="#" class="page"><%= p %></a>
					<% } %>
				<% }); %>
				<% if (lastPage != page) { %>
					<a href="#" class="next">Next</a>
					<a href="#" class="last">Last</a>
				<% } %>
			</span>

			<span class="cell howmany">
				Show
				<a href="#" class="selected">20</a>
				|
				<a href="#" class="">50</a>
				|
				<a href="#" class="">100</a>
			</span>

			<span class="cell first records">
				<span class="current"><%= startRecord %></span>
				-
				<span class="perpage"><%= endRecord %></span>
				of
				<span class="total"><%= totalRecords %></span>
							shown
			</span>
		</script>
	</body>
</html>

This last bit is the view that helps parses out the tags.

(function (views) {
	views.Tags = Backbone.View.extend({
		tagName : 'ul',
		initialize : function () {
			_.bindAll (this, 'render', 'addAll', 'addOne');
			var self = this;
			self.collection.fetch({
				success : function () {
					self.collection.pager();
				},
				silent:true
			});
			self.collection.bind('reset', self.addAll);
			$(self.el).appendTo('body');
		},
		addAll : function () {
			var self = this;

			$(self.el).empty();
			self.collection.each (self.addOne);
		},

		addOne : function (model) {
			var self = this;

			var view = new Tag({model:model});
			view.render();
			$(self.el).append(view.el);
		}
	});

	var Tag = Backbone.View.extend({
		tagName : 'li',
		render : function () {
			$(this.el).html(this.model.get('name'));
		}
	});
})(App.views);

Closing

Like anything else, there are a hundred ways to do things and this is just one.  My example goes off the assumption that all the data is available but I am sure it can be re-written to only fetch a certain number of records from the server on an as needed basis.

What would you do differently?  Did you see anything wrong with my implementation?

What I have put together is some code that I have been using on a few projects and turned it into a rough plugin. I say a rough plugin because it is very basic and not entirely flexible; let’s just call it a proof-of-concept.

Live Demo of Password strength indicator and generator

In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

The first example you notice that I have a basic indicator showing the strength is the form a colors blocks going from green to red with red being the strongest indicator. (I got these images from the cpanel password changer)

This is what you would normally see and it is fine, but what if your design is much like my current design where you are featuring trees?

In the second example we simply swap out the icon for a tree that has four levels and when the password is real strong the tree is completely filled in with red.

Have a look at the code:

The Code for Password strength indicator and generator

By default the plugin will work off of ten default classes that you can set the css for which you can do an image sprite like I did above. Or maybe just a DIV with specific colors and widths that will illustrate a growing strength of a password.

Final Thoughts

The point of this post is to show you that you don’t need to limit yourself to what is already out there, expand your thinking to include all possibilities and not just prepackaged ones.

With that said, what other possibilities do we have for a simple thing like a password strength indicator? Hmm… maybe doing a meter type thing that goes from zero to a hundred and just rotate the pointer much like the clock example?

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg's Querystring functions which has only one modification to it.

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to "theListener" which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

The last function is the "theListener" function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

Although the RSH script does pass back two params you will see that I don't use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference - should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.

I've been using jQuery for over a year now and have built some pretty big apps with it as my "selector" engine and had always wondered what were the fastest ways to select an element. After reading a post on the mailing list I decided to put some selectors to test. First thing I had to figure out what was the best way to really test out some selectors. So I went about just grabbing some site I came across while Stumbling, but after doing some testing using that sites content I came to the realization that I would not know how to implement a "test" suite on my site. So what I decided was to just implement an on the fly test suite on my content.

With that said, here we go:

If you do not have firebug installed, you will have a Firebug lite console pop up at the bottom of the screen. If you do have Firebug installed, be sure to open it to follow along.

This page has x DOM elements on it. So, what ever selection we make will cycle/search through that total number of elements.

First up is to find an element with the ID of "shareThisBookmarkThisone" (this is the "Share this..." div that is currently hidden) and to select this element we will do:

After running that test you should have a number around 10 - 20 milliseconds. In this case, it is the equivalent of "getElementById" which is a built in JavaScript method that searches for an element node with an id attribute whose value is "shareThisBookmarkThisoneButton."

Pretty simple selector, lets move onto another simple one that should be pretty fast.

On this page, I have x DIV elements.

After running that one, you should be looking at something between 0 - 10ms with Firefox about the 100ms range, once again, pretty simple.

Now let start getting into what selection methods are faster, say we want one of those DIVs with a class of "adspace," which approach would be faster? One this page, I know we only have one to work with, so we should be able to get a reasonable return time.

Our first approach would be:

For "Test 3" we should get about 15ms in Firefox 2, Safari 3, between 0 - 16ms in Opera 9.2 and 0ms in IE6 and IE7, whereas we get 0ms across the board for "Test 4." Now in "Test 5" we get 0ms for all except Firefox, where we get around 15ms.

What does the above tell us? That if there is only one element things are quicker? Not sure, but lets put that to the test, I posted some empty DIVs, some with a class of "selectMe" and others with some random classes, you can view the source to see what these DIVs look like.

With "Test 6" we are looking getting back 153 results and I really must say that I am a little shocked by the results:

• IE7
  • 6.1: 16ms
  • 6.2: 15ms
  • 6.3: 0ms
• Safari
  • 6.1: 16ms
  • 6.2: 0ms
  • 6.3: 0ms
• Opera
  • 6.1: 31ms
  • 6.2: 0ms
  • 6.3: 0ms
• Firefox with firebug
  • 6.1: 141ms
  • 6.2: 109ms
  • 6.3: 109ms
• Firefox with firebug lite
  • 6.1: 31ms
  • 6.2: 0ms
  • 6.3: 0ms

Final Notes

Before we get into what we learned let me put a bit of a disclaimer here. I have not really looked into the full workings of the jQuery framework, so anything I say is based off of my assumptions and what I learned as I have built with it. The numbers you see above are from browsers that are running on a not so average computer, so they are not from the average user's/client's computer.

What did we learn? That if you are looking for all elements with a certain class and they are all of the same tag name, do $("TAGNAME.CLASSNAME") or $("TAGNAME").filter(".CLASSNAME"). That if you have only a single element that needs to be called and there will not be duplicates, your fastest selector is going to be the $("#ID") selector. That, with the exception of Firefox, the leading browsers handle a TAG search pretty quickly. Firefox had comparable speeds to the other browsers once firebug is turned off.

Something to keep in mind is that we did not do any manipulations, ie. css(), append(), animate(), or any really complex selectors and those will add time your actions.

jQuery is the library of choice for me, you are free to use any of the many libraries out there.

Let's talk about my first two points, PHP4 does not support the json_decode function and the resources the json.org points you too are not all that great. I actually wasted a good four or so hours trying to first figure out which one was best for my situation and once I did that, trying to get the on to work with out hacking and adding a bunch of crap. After doing some research and searching I came across phpclasses.org, which is a great resource for finding anything you need for PHP, but the site is so weighed down with advertising, what should take you five minutes to do, takes you fifteen minutes because you are waiting for the site to load, dodging the multiple pop-ups (yes, even with a pop-up blocker). With that said, it is a great resource and I came across a JSON class that returns that same empty class or "stdClass." I may be wrong in my interpretation of what an "stdClass" is, so don't quote me on it.

So with with that class in hand, my problem with getting my plugin to work in both PHP4 and PHP5 what solved and all the code I need to add to my app was:

The if (!extension_loaded('json')){ line checks to see if the JSON extensions are loaded and if not, it will include the JSON.php that contains the JSON class we need. And once that code was ran, it was as simple as doing the following to get the correct content:

There are a few notes first, on php.net, the note that "This function will return false if the JSON encoded data is deeper than 127 elements." And both functions will return false if the json string is not in proper form, check out json.org for in depth information about proper form, but I will go over some that I ran into right now.

If you do something like below:

You will get:

Notice that each key is wrapped with parentheses and since we are dealing with with numbers and boolean in the values, we don't need to wrap them. Also notice that the true value returned 1, remember in the computer world, true == 1 and false == 0.

All fairly simple right? No suppose we are pulling the above json string into the browser via a Ajax call, in the following example we have a jQuery Ajax call that is running a runTest function and passing the data returned by the json/Ajax call:

If we take the string below and pass that thru to the runTest function, the "run more code" section would get executed:

Now, if we take the same string and returned the follow instead, the "run more code" section will still get executed:

You would think that if you change the if statement to the following that it would not get executed:

This is not true because we are passing back a String and not a Boolean and the reason if(data.a){ works with a non-empty string is because an empty string is considered NULL which is in turn considered false.

With all that background out of the way, lets take some of my real world examples when dealing with getting back the correct format on the Javascript side.

From the database, I have all the parameters for a jQuery plugin that needs to be echoed out, in this particulare situation, I am not using Ajax, I am simple build our the plugin's needs and echoing them out to the browser. The format needs looks something like:

but the sever would print out something like:

So, I did I get the correct format? I did the following:

Let me try to explain what the above is doing, I already explained what line 1 trhu 8 are doing up above. Line 11 we check to see if $objs is not false or NULL. At line 12 we start our foreach loop and line 13 is where we check to see if the value is numeric or a boolean and if the value is either, return the value as is, but if it isn't, wrap it in parentheses. Line 14 we are pushing it into an array much like the Javascript method myArray.push('text'). Once we are done building the array and cycling through the objects, in this situation, we echo out the array while joining the array with the Join method just like the Javascript method myArray.join(",").

This approach can be used for sending back a json formated string to Javascript:

This particular subject can be expanded much more, but I would suggest that you experiment and see what works and what does not and ask questions, lots of them. Feel free to post questions and comments, if I made any mistakes with my assumptions, call me on them. It is the only way we all learn.

Thanks again.

Basically what this code snippet does, is that it takes an element that has a set high and width and makes the inner text the appropriate size to fit that area.

I would love to say that I am going to write about my experience and give great detail and wow you, but lets be realistic, if you have read any of my instructions for my plugins you know that I am not much of a writer. So I will leave that up to the people who have skills in that area.

Here is a list of them:

• rdworth.org

Talk to you soon.

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

The Head

The Body

And that would produce the following:

The Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....II.1.0.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.

jqGalView Overview

The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.

Inspired by http://www.flashimagegallery.com/pics/artwork/!

Feel free to vote for this plugin over at http://ajaxrain.com/search.php?seVal=jqGalView

The jQuery jqGalView Plugin's purpose is to be unobtrusive as possible and after looking at a lot of static photo galleries I feel the jQuery Gallery Viewer does just that. It takes any current structure and rips out the images and any parent link and turns a static photo gallery in to a dynamic flash-like gallery.

I tried to make this plugin as easy and flexible to you, for example, doing:

The head stuff

The xhtml

Will produce the following, with styling and more images of course

The Small Print

So you see, it is pretty simple to take your list/group of images and turn it into a nice photo gallery with some styles. In this instance, it is taking the images you have in a unordered list, but you are not limited to that at all. You can do a table:

It can just be a div:

In our first example you see that I am using an image wrapped in A tag, this is the default setting where you don't need to do anything other then $('#mygallery').jqGalView(); (ok, it may be a good idea to style things). Check out the Option tab to see a list of parameters that can be used to further customize your Web Album/Photo gallery and check out some more demos under, you guessed it, Demo.

The Demo(s)

The below implementation...

will produce below

Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....ew.2.1.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.
The jQuery jqModal Plugin v2007.08.17 +r11 is available at: http://dev.iceburg.net/jquery/jqModal/.

The jqAmungUs widget is a jQuery plugin that will aide as an alternative to the icon and will give more detail to who is currently on your site and alternatively whose been on your site and where they came from (as far as country is concerned).

The set up is pretty simple:

Add some code to the head of your web page:

And create the div you want to the data to load to:

And you will get:

Or, you can add the type param and set it to map and get:

Download

The jqAmungUs Plugin is available at: http://www.benjaminsterling.co.....AmungUs.js.

The jqAmungUs server side is available at:PHP and ASP.

The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.

Support

Support for the jqGalView Plugin is available through the jQuery Mailing Listand the comment section below.

Please post a link to the site you are using this plugin for and a brief desciption so I can see what others are doing with the plugin.

This documentation is maintained by Benjamin Sterling. Post comments or questions below.

Code Notes

Why jqAlbumParser? Well, after building a few photo gallery plugins and plans for different variations of flash-like galleries (I am on a convert flash apps to jQuery ran apps kick), I found myself wanting to use other peoples photos, ie. friends and families, but did not want to download them. So I wanted to be able to bring in Picasa and Flickr photos, but sadly their JSON formats are different, I needed a way to pull them both in on the same page and be able to use them with the same functions and so I figured I'd bring their JSON and parse them to my own object and poof, jqAlbumParser! Anyway, I am rambling, check out below and if you have any question (since I know my comment and explanations suck) post a comment and I will get back to asap. Also, if you use this plugin, drop me your url and a brief description of your site and I will be sure to post it to my Plugin Repository page.

The Basic Demo

Picasa | Flickr

The Simple Code

The xhtml

PLAIN TEXT

HTML:

1. <a href="http://picasaweb.google.com/data/feed/base/user/sterling.benjamin/albumid/5065213814603581825?kind=photo&amp;alt=rss&amp;hl=en_US" class="jqAlbumParser
2. wa:picasa">Picasa</a>
3. |
4. <a href="http://api.flickr.com/services/feeds/photos_public.gne?ids=11983862@N00" class="jqAlbumParser
5. wa:flickr">Flickr</a>

The head stuff

PLAIN TEXT

CSS:

1. <style media="all">
2.     @import url("/articles/jqGalViewII/common/css/jqGalViewII.css");
3. </style>

PLAIN TEXT

JavaScript:

1. <script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
2. <script type="text/javascript" src="/articles/jqAlbumParser/common/js/jqAlbumParser.js"></script>
3. <script type="text/javascript" src="/articles/jqGalViewII/common/js/jqGalViewII.js"></script>
4. <script type="text/javascript">
5. $(document).ready(function(){
6.     $(".jqAlbumParser").jqAlbumParser({
7.         pluginExec : function(){
8.             $(this).jqGalViewII();
9.         }
10.     });
11. });
12. </script>

The Small Print

So you see the set up is somewhat simple; in the example above I used the jqAlbumParser in conjuction with the jqGalViewII plugin so you can see how I envision a person would use this plugin. You will be able to use the jqAlbumParser with any of my plugin, and any photogallery plugin that works with the same structure that this plugin can put out.

To get the url for your Picasa album, go to your account and then the album you want; go to the bottom right corner and you will find a RSS feed link and either right click and click copy link location or click that link and copy the url from there.

To get the url for you Flickr album, go to the photo section of your account and go to the bottom left and copy the RSS link.

You will also notice that in the demo links that there is a "wa:picasa" and a "wa:flickr," if you are not going to add separate jqAlbumParser calls for different services, ie. Picasa and Flickr, you will need to add one of those to the correct link.

Now you are probably asking yourself, "How do I get this to execute when the page loads?" or "I tried 'load' as the "triggerEvent" but it does not work, how come?" The answer, do:

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('.jqAlbumParser').jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).click();
8. });
9. </script>

or

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $(".jqAlbumParser").jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).trigger("click");
8. });
9. </script>

The download

http://benjaminsterling.com/ar.....mParser.js

The Head

The Body

The Outcome

Options

Below are a list of options you can pass to the jqGalScroll plugin.

Styling

I am in no way a great designer, so the example is very bare, but the follow urls are sites that done a nice job with the plugin:

• http://www.ryanbrenizer.com/wedding_portrait

Thanks

Koes put a fire under my butt to improve this plugin and when I took too long he took what I had and added the horizontal scroll and in turn I ripped it from his hands and made it better :) http://www.koesbong.com/

Download

The jqGalScroll v2.1 Plugin is available at: http://bs-jquery-plugins.googl.....ll.2.1.zip.
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.

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.

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