[jQuery] jcarousel extension suggestion
I've some pages which have quite a lot of content and the client wants
some kind of "loading animation" to be displayed while the page loads.
I fiddled around with a few ideas but wasn't very happy with the
results. I realised that it'd be best to just extend jCarousel to
allow it to hide the widget and display a "loading" image until the
page has entirely loaded. This might be particularly helpful if you're
using jCarousel in conjunction with Thickbox and the content for that
is all inline but hidden.
Please note that this is, so far, just something I've bodged together.
I'm quite sure this can be improved upon.
Anyhoo (this is with v0.2.3, btw) :
var defaults = {
...
loading: null
};
...
this.container.css('display', 'block');
this.buttonNext.css('display', 'block');
this.buttonPrev.css('display', 'block');
/* this code is new
*/
if (this.options.loading != null)
{
var position = this.container.position();
/* Add a div with ID "jcarousel_loading" to the page which contains
* the loading animation. The div will be positioned according to the
* outer jCarousel div. To get it roughly centred vertically, I added
* half the height of div.jcarousel-container to the position.top.
*
* The loading image is centred horizontally inside the div.
*/
$('body').append('<div id="jcarousel_loading" style="position:
absolute;left:'+position.left+'px;top:'+(position.top + parseInt($
('.jcarousel-container').css('height')) / 2)+'px;z-index:100;width:'+$
('.jcarousel-container').css('width')+'"><img
src="'+this.options.loading+'" style="display:block;margin:0 auto;" /