slimbox customization

squaredeye · 2007-10-10 15:10:54

I’m trying to achieve what I have visually represented below.
Can anyone give me some pointers about how to go about changing the slimbox.js so that I can reasonably affect the slimbox.css to do this?

Here’s the JS I’m using: slimbox.js

jakob · 2007-10-10 17:48:10

Hi matthew,

I’m no expert on this, but my guess is you change the order of the central section below:

this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(document.body);

this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).injectInside(document.body);
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);
this.prevLink.onclick = this.previous.bind(this);
this.nextLink.onclick = this.next.bind(this);

this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).injectInside(document.body);
this.bottom = new Element('div', {'id': 'lbBottom'}).injectInside(this.bottomContainer);
new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div', {'id': 'lbCaption'}).injectInside(this.bottom);
this.number = new Element('div', {'id': 'lbNumber'}).injectInside(this.bottom);
new Element('div', {'styles': {'clear': 'both'}}).injectInside(this.bottom);

You can see each element has been given an id and that the order of the items roughly corresponds to the HTML overlay that is added. If you have webkit installed, then right-click on the overlay in safari and choose inspect element (or use firebug/webdev toolbar in firefox) and you can see the html and css for those elements while the overlay is opened. You might find it easier to copy out the HTML and then experiment elsewhere (if you can’t work with it directly in cssedit or firefox and thewebdev toolbar).

My guess is that if you want the links in the bottomContainer, you need to move the this.prevLink, this.nextLink + corresponding onclick actions beneath the this.bottomContainer line. You will need to adjust the css style accordingly, of course, as they are huge great overlays the size of half the image at the moment.

squaredeye · 2007-10-10 19:34:08

Jakob,
Thanks. I should have mentioned that I changed the order already. The problem is that the Prev/Next Links are assigned in line styles in the JS, and I don’t know which ones to remove for easier styling in the css and which ones to leave because they are pertinent to the JS working properly.

Matthew

jakob · 2007-10-11 07:59:08

not quite sure what you mean by inline styles – do you mean that they are hidden? Try taking out this bit , 'styles': {'display': 'none'} from the this.prevLink. I’m not sure how not displaying the prev-link is handled when there is no previous image.
Otherwise it seems to me they are each given an id: lbNextLink and lbPrevLink.
I guess aftre re-arranging, you also need to change the injectInside(this.image) at the end of those lines to injectInside(this.bottom) like for the close link – I oversaw that :-)

Textpattern CMS

Textpattern CMS support forum

#1 2007-10-10 15:10:54

slimbox customization

#2 2007-10-10 17:48:10

Re: slimbox customization

#3 2007-10-10 19:34:08

Re: slimbox customization

#4 2007-10-11 07:59:08

Re: slimbox customization

Board footer