This plugin gets instantiated on an un-ordered list (via an ID) with list items each containing an image and a link with a nested span. All of the class names and extra markup are dynamically injected. At the moment it only plays you tube videos, but it could easily be modified to handle the HTML5 video element. Each list item is initially detected by the script as being either a photo or video. They can be intermingled. CMS integration shouldn't be very difficult, and customization should be fairly easy.
- Example implementation of the Palate Expander
- Download It (zip file containing compressed and uncompressed versions of the script with an example)
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? 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.
No comments:
Post a Comment