Blockster Images transition effect jQuery
Usage & params
HTML & CSS
Simply ensure you have a holder <div> and, inside, a <div> for each slide. Enusure the holder and the slides have the same fixed dimensions - don't give your slides width/height 100%. The holder should be set to position 'relative' and the slides position 'absolute'. The HTML/CSS behind the examples on this page is included in the source .ZIP.
Call blockster(params), where 'params' is an object of property/value pairings from the following:
holder (string, default: null) - a string to be used as a jQuery selector pointing to the holder element that contains the slides
rows (int, default: 10) - the number of rows for the block grid
cols (int, default: 10) - the number of columns for the block grid
pause (int, default: 3500) - the number of miliseconds to wait (i.e. show the slides) between transitions
animType (string, default: 'fade') - either 'simple' or 'fade'. If the former, blocks simply appear. If 'fade', they fade in.
random (bool, default: false) - if true, blocks will appear/fade-in in random order
blockAnimSpeed (int, default: 50) - the number of miliseconds between each block appearing/fading in
You might also like
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu