watermark and slimbox

[design]

Hello! I added the watermark on pictures (lightbox effect). This is the code, maybe someone could found it useful...

In template/slimbox/js/slimbox.js (lines 32-34):

Code: Select all

		this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
		this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.image);
		this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);

change with this:

Code: Select all

		this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
		this.watermark = new Element('div', {'id': 'watermark'}).injectInside(this.image);
		this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.watermark);
		this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.watermark);

And in template/slimbox/css/slimbox.css write:

Code: Select all

#watermark {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent url(watermark.png) no-repeat center center;
}

Obviously you have to create an image (watermark.png) and put it inside folder template/slimbox/css

Bye!

[lindesbs]

Great ! Wonderful and simple solution...

Saved as bookmark !