Blockster transition effect
- » Overview
- » Example 1
- » Usage & params
- » Example 2
- » Notes
Overview
Blockster is a Javascript transition effect designed for 'featured content' rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.
Example 1
Here we opt for 4 rows and 6 columns, with the blocks fading in randomly, not in order. Here's the code behind this example:
1var blocksterInstance = new Blockster({
2 holder: '#featureRotator_1',
3 rows: 4,
4 cols: 6,
5 random: true
6});
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.
Javascript
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
startWithoutDelay (bool, default: false) - to avoid the initial delay, and have the first transition happen immediately, pass this as true
runOnceOnly (bool, default: false) - to terminate the script after the first transition, pass this as true
See the two examples on this page for demo code.
Controlling with navigation
As of 16 September 2010, Blockster is now controllable with navigation, meaning you can employ it not so much as a slides rotator but as a carousel (though if you want a carousel, check this out).
To do this, have your links or code call the jump() method, like so:
1blocksterInstance.jump(0); //go to slide 1
2blocksterInstance.jump(3); //go to slide 4, etc
...where blocksterInstance is the variable that holds the instance of Blockster you are targeting (see code in examples).
Non-slideshow use
Blockster can be used as a one-off effect to initially shield then reveal content. To do this, your shield would be the first <li> and your content would be your second. Then, instantiate Blockster with both the runOnlyOnce and startWithoutDelay arguments set to true.
Example 2
Here we've chosen 2 rows and 15 columns, with each block fading in in order. Here's the code behind this example:
1var blocksterInstance2 = new Blockster({
2 holder: '#featureRotator_2',
3 rows: 2,
4 cols: 15
5});
Notes
Dependent HTML/CSS
Blockster places a few basic requirements on the HTML and CSS applied to your rotator or slideshow. See above (usage and params) for more info. The HTML/CSS behind the examples on this page is included in the source .ZIP.
How?
That would be telling, but it has nothing to do with background positioning. So you can safely load your slides with child elements - links, paragraphs, images, whatever - and it will still work fine.
Update: controlling with navigation
As of 16th September 2010 Blockster is now controllable with navigation. More info over here and related blog post over here.
Update: Blockster for non-slideshow use
As of 30/01/2010 Blockster can be used as a means to shield then reveal content, rather than as a slideshow tool. See above for info on this.
Loading jQuery
By default, this script assumes you're loading jQuery via Google (why might you do this?). If, instead, you're loading jQuery from a local copy in your site folder, update the document ready handler (DRH) in the script file:
1//loading jQuery via Google
2google.setonloadcallback(function() { ...
3
4//loading jQuery from local copy (use either)
5$(document).ready(function() {...
6$(function() {...
Comments (69)
Martin, at 13/09/'10 11:28, said:
Mitya, at 13/09/'10 11:43, said:
Paul, at 14/09/'10 18:44, said:
Mitya, at 14/09/'10 19:42, said:
MarcJ, at 15/09/'10 04:34, said:
Mitya, at 15/09/'10 09:58, said:
Eric, at 20/09/'10 15:35, said:
Mitya, at 20/09/'10 15:38, said:
Eric, at 20/09/'10 16:36, said:
I'm using the latest version of Firefox. I'm getting this error: Error: this.params.holder.children("div").first is not a function Source File: http://flywheeldesign.com/mla/scripts/blockster.js' target='_blank'>http://flywheeldesign.com/mla/scripts/blockster.js Line: 79 And this recurring warning: Error: this.params.holder.children("div").first is not a function Source File: http://flywheeldesign.com/mla/scripts/blockster.js' target='_blank'>http://flywheeldesign.com/mla/scripts/blockster.js Line: 79Mitya, at 20/09/'10 16:44, said:
Eric, at 20/09/'10 16:54, said:
Mitya, at 20/09/'10 17:03, said:
Eric, at 20/09/'10 17:11, said:
MarcJ, at 22/09/'10 04:25, said:
Mitya, at 22/09/'10 14:05, said:
MarcJ, at 22/09/'10 17:05, said:
Mitya, at 22/09/'10 17:09, said:
wade, at 24/09/'10 06:50, said:
Mitya, at 24/09/'10 09:52, said:
RickyD, at 7/10/'10 15:24, said:
mitya@mitya.co.uk, at 7/10/'10 15:36, said:
Glad you like my script, RickyD. There is currently no way to stipulate callback at the point of instantiation. You can hard code this in by calling your callback from within the elseif block that starts on line 147 in the script. Feel free to extend my code to accept a callback as an argument at the point of instantiation. So for example: var blocksterInstance = new Blockster({ /* params etc */, callback: function() { alert('hello, mum'); } }); Then inside the esleif condition on line 147, put: if (thiss.params.callback && typeof thiss.params.callback == 'function') thiss.params.callback();Matt, at 16/10/'10 02:30, said:
Mark, at 20/10/'10 12:22, said:
Mitya, at 20/10/'10 12:50, said:
Mitya, at 20/10/'10 12:50, said:
gladwin, at 21/10/'10 21:25, said:
mitya, at 21/10/'10 21:56, said:
Mark, at 26/10/'10 10:31, said:
Mitya, at 27/10/'10 12:58, said:
Mitya, at 27/10/'10 13:20, said:
Mark, at 28/10/'10 16:58, said:
Gale, at 4/11/'10 14:52, said:
Mitya, at 4/11/'10 15:56, said:
Gale, at 7/11/'10 00:18, said:
Mitya, at 7/11/'10 12:41, said:
exiang, at 9/12/'10 06:09, said:
James, at 9/12/'10 17:55, said:
Mitya, at 9/12/'10 19:30, said:
James, at 9/12/'10 23:26, said:
Dallas, at 22/01/'11 21:35, said:
Kelly, at 26/01/'11 17:04, said:
Mitya, at 26/01/'11 17:19, said:
Kelly, at 26/01/'11 18:17, said:
Kelly, at 26/01/'11 23:37, said:
Kelly, at 26/01/'11 23:50, said:
Chris, at 27/01/'11 16:41, said:
Mitya, at 30/01/'11 16:01, said:
Nick, at 31/01/'11 21:51, said:
Patrice, at 1/02/'11 15:59, said:
Chris, at 1/02/'11 17:01, said:
Mitya, at 1/02/'11 19:16, said:
Brian, at 9/02/'11 20:07, said:
Brian, at 11/02/'11 03:51, said:
Cristian, at 23/02/'11 19:28, said:
Andrea, at 24/02/'11 18:44, said:
Chris, at 25/02/'11 16:54, said:
Mitya, at 26/02/'11 13:41, said:
Scott, at 13/03/'11 16:00, said:
Mitya, at 23/03/'11 12:01, said:
PC, at 18/04/'11 05:27, said:
Great work! Just wanted to let you know I ran into a small issue with the jump() method on jQuery 1.5.2. Whenever jump(0) was called, Blockster would iterate to the next image in the set rather than jumping back to the first image. In order to fix this, I changed the following in the main function from: var nextSlide = !indexOfSlideToTurnOn ? currentSlide.nextAll().length != 0 ? currentSlide.next() : this.params.holder.children('div').first() : this.params.holder.children('div').eq(indexOfSlideToTurnOn); To: var nextSlide = indexOfSlideToTurnOn >= 0 ? this.params.holder.children('div').eq(indexOfSlideToTurnOn) : currentSlide.nextAll().length != 0 ? currentSlide.next() : this.params.holder.children('div').first();James, at 20/07/'11 11:03, said:
Ljubimci, at 22/09/'11 20:57, said:
Sergey, at 19/10/'11 12:29, said:
line 155 $('.block:animated') and line 159 $('.block').remove() - all .block on my page removed :^)Mitya, at 19/10/'11 14:38, said:
Mitya, at 19/10/'11 14:40, said:
Teresa, at 13/06/'12 20:29, said:
Wholesale Snapback Hats, at 9/07/'12 12:25, said:
nevogecevapoj, at 13/05/'13 16:45, said:
aqoxeodevon, at 14/05/'13 06:58, said: