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 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. 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). Blockster can be used as a one-off effect to initially shield then reveal content. To do this, your shield would be the first and your content would be your second. Then, instantiate Blockster with both the runOnlyOnce and startWithoutDelay arguments set to true.
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}); 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. 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. As of 16th September 2010 Blockster is now controllable with navigation. More info over here and related blog post over here. 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. 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() {... 30/01/2010 27/10/2010 16/09/2010Javascript
Controlling with navigation
Non-slideshow use
Example 2
Notes
Dependent HTML/CSS
How?
Update: controlling with navigation
Update: Blockster for non-slideshow use
Loading jQuery
This script
Posted: 01 Jul 2010
Download
Click here to download source (3.2kb)
Script type: Javascript script with jQuery
Tags
Changelog
Two additional parameters can be passed at the point of instantiation: 'startWithoutDelay' (bool), to avoid the initial delay before the first effect; and 'runOnceOnly' (bool), so the script terminates after the first effect.
Blockster now works in jQuery 1.4.3, after initial reports that it broke in that version (but worked in older ones).
Blockster is now controllable with navigation. More info over here and related blog post over here.
Comments (67)
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:
, 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: