jQuery UI Marble 0.5.1

The function marble() adds a cut-out marble background to every selected object

To prevent the same boring background, the background-position is recalculated for every selected object. So each object shows a different cut-out of the marble plate, which is not repeated, if the background image is big enough.

For hidden elements random positions are used.

By using a part-transparent background image, the background colour of an object follows the standard ui-class changes as well.

Usage:
$('.ui-button, #my-button, .any-other-class').marble();

Of course this function is chainable:

$('#my-button').marble().hide();

To reset the background-positions, use de_marble:

$('.ui-marble').de_marble();

Moreover a custom class containing a different picture can be passed as option hash:

$('.ui-button').marble ( { new_class: 'special-background-for-buttons' } );
$('.special-div').de_marble ( { new_class: 'special-background-without-offset' } );

To change a background class, the option last_class must be given:

$('.ui-button').marble ( { new_class: 'first-background' } );
... later ...
$('.ui-button').marble ( { new_class: 'second-background', last_class: 'first-background' } );
... later ...
$('.ui-button').marble ( { new_class: 'first-background', last_class: 'second-background' } );

This is the first public release, so use with care!


Download jquery.ui.marble

Demo

Copyright (c) 2010 Ernesto (dienstleistung-kultur.de)
This library is free software; you can redistribute it and/or modify it under the same terms as jQuery/UI itself.
This is a service of dienstleistung-kultur.de            Comments to Ernesto at ernesto@dienstleistung-kultur.de            Impressum