Customizing the appearance of bas_lightbox / smd_slimbox

daikw · 2008-04-11 23:40:11

Hi there,

I have utilized bas_lightbox on this page

However, I would now like to simplify it’s appearance: so that it looks more like the one used here

To be specific, I would like to:

1. Get rid of the ‘box scaling’ effect when you click on each thumb.

2. Get rid of all the extra features that appear with the lightboxed image including the “next / prev” links, the white border, the caption bar with the “close” text and cross. In short, I would like the image to just pop up on it’s own on top of a darkened background, and to revert when the user clicks anywhere on the screen

Is this possible? Or is there an alternative solution I should consider? Bearing in mind my experience is limited.

Thanks very much,

Dai

Last edited by daikw (2008-04-11 23:41:02)

joebaich · 2008-04-12 04:13:24

I suspect that other media viewers like Fancy Zoom or Shadow Box are closer to your requirement. Both are well documented and are relatively easy to implement using the plug-in smd_gallery.

masa · 2008-04-12 06:16:09

daikw wrote:

2. Get rid of all the extra features that appear with the lightboxed image including the “next / prev” links, the white border, the caption bar with the “close” text and cross. In short, I would like the image to just pop up on it’s own on top of a darkened background, and to revert when the user clicks anywhere on the screen

It very much sounds like you’d want the original Lightbox
You can get rid of the close-image, borders etc. by editing its css.

As joebaich mentioned smd_gallery is a very flexible way to implement this.

jakob · 2008-04-12 08:05:04

It very much sounds like you’d want the original Lightbox
You can get rid of the close-image, borders etc. by editing its css.

or the single image version of thickbox. Likewise, by setting the css for the close box (and caption) to display:none; you can completely eradicate the bottom caption area and close box.

Gocom · 2008-04-12 08:27:46

completely eradicate the bottom caption area and close box

Then it prob’ would be best to over the whole img area / contain’ div with the close element, or alternave’ change the closin’ element to the contain’ div in the js. With out that change, it could get quite hard to close the lightbox – for visitors atleast.

But as it is soup of divs, you can easily style it with CSS, just look at the output DOM and example CSS. Alternatively, you can just remove the lines from JS that make th’z elements. Nothin’ spec’ so said, just HTML that can be styled.

daikw · 2008-04-17 13:26:52

Thanks very much for the replies, I will get cracking on this and get back.

Cheers!

daikw · 2008-04-18 22:03:20

Okay, I went with masa’s suggestion, and used the original lightbox. It was so, so easy to customize. I prefer the simplicity of it. Doesn’t get in the way of showing the images.

masa · 2008-04-18 22:27:55

daikw wrote:

It was so, so easy to customize. I prefer the simplicity of it. Doesn’t get in the way of showing the images.

That’s the reason I keep coming back to it, too, plus it has a much smaller javascript footprint than all the more sophisticated alternatives.

Anyway, no matter which one you prefer, I found this site very helpful to generate a custom loading… gif, if you don’t like the default one.

Last edited by masa (2008-04-18 22:29:46)

daikw · 2008-04-21 00:06:59

Hello again. I’m having difficulty getting original_lightbox to work properly with IE.
While waiting to be accepted on the huddletogether.com forum, I thought I would ask here to see if anyone, particularly masa could suggest a solution.

The first problem is that the overlay effect doesn’t work in any version of IE I have tried. I have attempted putting absolute paths to the overlay.png file in the CSS but this doesn’t seem to do anything.

The second problem is that in some versions of IE (5.x), the lightboxed image gets thrown to the bottom right corner of the page– and is not nicely centered like it should be.

If anyone could offer up a solution to either of these issues I would be more than grateful!

Thanks you so much

masa · 2008-04-21 00:40:30

It usually comes down to your css.
One of the key points is to zero the body margin/padding with a style rule like this: body { margin: 0; padding: 0; }
If the overlay.png doesn’t show up at all, it’s usually a path issue, but since you’ve experimented with that, I’m not sure what to suggest.

Regarding problem #2, if you’re by any chance referring to good, old IE5 Mac, then I’m afraid, there’s no solution to the drastic offset of the image: it simply doesn’t work.

Have you got a sample page online?

masa · 2008-04-21 15:42:20

daikw,

There are actually two references to the overlay.png in the css and Lokesh states:

“The shadow overlay doesn’t show up in IE.

Find the filter: progid:DXI… line that you added to your stylesheet. There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file.”

I would suggest you make that a root-relative link
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/overlay.png", sizingMethod="scale");
assuming you have overlay.png in the web root.

Does that help?

Textpattern CMS

Textpattern CMS support forum

#1 2008-04-11 23:40:11

Customizing the appearance of bas_lightbox / smd_slimbox

#2 2008-04-12 04:13:24

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#3 2008-04-12 06:16:09

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#4 2008-04-12 08:05:04

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#5 2008-04-12 08:27:46

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#6 2008-04-17 13:26:52

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#7 2008-04-18 22:03:20

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#8 2008-04-18 22:27:55

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#9 2008-04-21 00:06:59

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#10 2008-04-21 00:40:30

Re: Customizing the appearance of bas_lightbox / smd_slimbox

#11 2008-04-21 15:42:20

Re: Customizing the appearance of bas_lightbox / smd_slimbox

Board footer