I do a fair amount of custom script writing at my job. I've actually been doing so much of it that I felt like I should start trying to make re-useable plugins out of some of my better scripts. That being said, this page will be growing.
And with that, I'd like to share my very first plugin:
wiggleIt(just a little bit) - beta
Beta Release Date: 12/06/2011
You can find a few example implemtations of it below. Each one opens in a new window. As I improve upon it I'll be posting updates.
In it's simplest implementation, you can just call it out without any params.
$('.wiggleIt').wiggleIt();
The default param values are as follows:
$('.wiggleIt').wiggleIt({
'imageWidth' : 200,
'imageHeight' : 200,
'divisions' : 8,
'direction' : 'vertical',
'speed' : 250
});
If you set the direction parameter to vertical or square, the divisions parameter will be the number of vertical slices comprising the width of the image. If you set the direction to horizontal the divisions will be the number of horizontal slices comprising the height of the image. The minimal CSS involved is included within the HTML files. Obviously, the higher the number of divisions you specify the greater the demands on the browser. It works everywhere, even IE8.
Update: I've included a hide state for when an image is clicked, and even wrote a simple lightbox-type functionality with previous and next buttons to string the images together into a gallery.
The Palate Expander (beta)
Beta Release Date: 10/04/2011
You can find an example implemtation of it below. It opens in a new window. As I improve upon it I'll be posting updates.
In it's simplest implementation, you can just call it out without any params.
$('#theList').palateExpander();
The default param values are as follows:
$('#theList').palateExpander({
'size' : 'custom',
'randomStart' : 'yeah',
'carouselWidth' : 400,
'itemPadding' : 10,
'itemItemHeight' : 60,
'maxWidth' : 150,
'maxHeight' : 200,
'rowIncrement':5,
'maxPhotoHeight':400,
'videoHeight':259
});
Any combination of them can be passed. I like to think that they're fairly intuitive. I almost built an auto-rotation into it, but that seemed dumb. I haven't tested it at full screen yet...but why the hell would you want to do that anyway? The Single-Row or Multi-Row status is determined simply by providing a higher number of list items than the number provided for the rowIncrement. Most importantly, you'll need to set the containing element to be position:relative; and give it a fixed width, because the script makes the targeted unordered list position:absolute to allow the expanded states to overlap other page elements. Obviously you will also not want to apply overflow:hidden; for exactly that same reason.
The Static Pager
Release Date: 01/03/2010
You can find an example implemtation of it below. It opens in a fancybox. As I improve upon it I'll be posting updates.
Basically, it takes a static un-ordered list, breaks the list items into chunks and wraps them in nested un-ordered lists, and allows you to paginate through them by hiding and revealing the dynamically written lists. It has optional fancybox or ajax -on rollover or click- functionality according to a few optional params. Obviously, if you want to use it with the fancybox param, you'll additionally need to include the fancybox plugin.
In it's simplest implementation, you can just call it out without any params.
$('#allQa').superPager();
The default param values are as follows:
$('#allQa').superPager({
'pageSize' : 10,
'topPaging' : true,
'pageStatus' : true,
'bottomPaging' : true,
'action' : 'hoverPreview',
'previewTarget' : 'body'
});
Any combination of them can be passed. The values are fairly self-explanatory, except for 'action' and 'previewTarget'. The 'action' parameter can have a value of 'hoverPreview' ,'clickPreview', or 'fancybox'. The 'previewTarget' parameter is only relevant if 'hoverPreview' or 'clickPreview' is declared as the value of 'action'. If no value is specified for 'previewTarget' or a value of 'body' is specified, it will simply pull the entire contents of the body tag into the preview bubble. If any other string value is passed it will look for a div with an id matching that string. The working example that I've got in place uses an id of 'mainContent'. A known limitation of pulling the preview bubbles in by id, is that the target div cannot contain any nested divs, or the extracted markup will be invalid. I haven't yet gotten around to writing a normalizing while loop to account for nested divs, and being uncertain of it's value or necessity...won't likely get around to it anytime soon.
