Uber-customisable video carousel
Hello 2011! Sorry for the hiatus, I've been away visiting family in Russia and then it was christmas and new year and, well, you get the idea.
Anyway it's not like I've not been busy. Behold, my new video carousel. Head over here to download, get usage info or view a demo.
This carousel can display both graphic and video slides (the latter using JWPlayer), and is super customisable.
Via the single XML config file it reads, you can control the position of the slide tabs (top, bottom, right, left), info area (left, right, none), control the transition type, auto-rotate speed and more.
Enjoy!
1 comments | post newBlockster - fixed for jQuery v1.4.3
Thanks for the reports that Blockster wasn't working with the latest release of jQuery, 1.4.3. This is now fixed, and you can re-download the source here.
I would hesitate to say this was a jQuery bug, but it certainly seemed like one. For some reason, values set via the .css() method were being set, but read back as 0, e.g.
1$('#something').css({left: 15+'px', top: 20+'px'});
2alert($('#something').css('left')); //alerts 0px, not 15px
In jQuery 1.4.2, there was no issue. Anyway, some fudge later involving tracker variables, this is fixed. Phew.
2 comments | post newBlockster update: controlling it with navigation
Of all my scripts, Blockster has probably got the best response. I've had a lot of e-mails about that one, and one from Andreas Rasmussen recently asked if it could be controlled by navigation rather than just auto-rotate.
This is something I've been meaning to build into it for some time, and now I have. This has meant a slight change in how you call it into your page. The new syntax is:
1blocksterInstance = new Blockster({
2 holder: '#featureRotator_1',
3 rows: 4,
4 cols: 6,
5 random: true
6});
Then, to force it to go to a particular slide and interrupt the auto-rotate, you'd call:
1blocksterInstance.jump(0); //go to slide 1
2blocksterInstance.jump(3); //go to slide 4, etc
Head over here to download, get usage info or view a demo.
You might recognise from the above that Blockster has gone all trendy and become object-orientated, hence it's instantiated with new and assigned to a variable.
So it started life as a rotator, now it can be used as a carousel (though don't forget I just built a proper carousel!).
Enjoy.
11 comments | post newMy new carousel - now documented!
Several days after posting my new carousel, I thought it was about time I documented it. I now have, with complete instructions and a demo.
Head over here to download, get usage info or view a demo.
This is the first carousel I've seen that genuinely wraps slides visually when they're bumped off the edges. That is, when a slide is bumped off one edge, it visually reappears at the opposite edge in equal measure, giving a wrapping effect (I guess there are other carousels that do this, but I've not seen any).
The 'on' slide is always centered, while the 'off' slides are narrower, semi-opaque and sit around the 'on' slide. See the demo.
Like most of my work, there are no HTML or CSS dependencies for using the carousel - everything is built (i.e. DOM-scripted) by and styled within the single JS file.
A separate config file stores all data relating to each sldie - the image to load, the caption headline and text, and the URL to go to when the slide is clicked.
Enjoy.
post a comment
