Blogvaria » Lightbox Media

The personal pages

Apr 07
06

Lightbox Media

TrackBack | Filed by Thomas under CSS & Design, Programming |

14%

Lightbox Media (LBM) is yet another clone of Lokesh Dhakar’s Lightbox (v2) image add-on. It’s been slightly modified to allow any content (media) apart from images to be shown inside an iframe. This is detected automatically so there’s no need to modify text outside the source files. The overlay effect is applied exactly like before by adding rel=”lightbox” inside the link tag, or rel=”lightbox[some-media-set]“.

The download includes all files needed to set it up on any website, including the Prototype JavaScript Framework and some add-ons provided by Script.aculo.us. It also includes an example page in order to show how you should add the JavaScripts, style etc. Additionally lightbox-media.js and lightbox-media.css holds a few basic instructions on how to alter iframe height and width and set absolute URI’s for the navigation images.

Download Lightbox Media 1.01

Demo’s can be seen at our Area51 / LBM test site, or on our previous post Introducing Lightbox Media. Feel free to comment and/or ask for/provide help related to this add-on.

Update: Based on user input I’m now pleased to announce version 1.2 of Lightbox Media. The update includes a fix for upper-case file names and also the possibility to set the width and hight for the iframed content by adding a short query string to the link. Demo’s are available at our new Area51 / LBM2 test site.

Download Lightbox Media 1.20

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

Blogvaria » Introducing the Comic Strip Add-on said,

June 1, 2007 @ 5:14 pm

[...] Except during the update procedure the add-on should load much faster, and by combining it with my Lightbox Media add-on browsing the comics is sweet and [...]

jure said,

July 13, 2007 @ 8:34 am

BUGFIX:

Lightbox doesn’t detect correctliy linked images. This happens when i link an “image.JPG” (with uppercase extension) instead of an “image.jpg” (with lowercase extension)

Solution: when Lightbox checks for file’s extension (line 408), add “i” to the regexp:

/\.jpg$/
becomes
/\.jpg$/i

Repeat for each extension.

Thomas said,

July 13, 2007 @ 8:43 am

Hi Jure,

thanks for sharing your fix with the rest of us!

I suppose you could also use toLowerCase(), I’ll give that a try later as well

Thanks again!

Michael said,

September 16, 2007 @ 12:25 am

Hi,

best lightbox I found in the web. GREAT work.

Just one Question:

When i run JavaScript in the loaded IFRAME in the Box, how can the script close the box?
Is ther a function that exits the Box? The red cross button down rigth does this well, but i want to do this by Javascript after the user has done his selections in my dropdownmenus.

Any hint for me?

Already tried: lightbox.end();

But this does not work…

Thanks for your advise.

Michael said,

September 16, 2007 @ 1:03 am

Thanks,

i have got it: top.myLightbox.end();

May this help all of you…

Thomas said,

September 17, 2007 @ 3:45 pm

Thanks for your positive feedback and for the “fix”.

Much appreciated!

MpMp said,

September 17, 2007 @ 6:48 pm

I have a problem with the image created with asp.net (same problem with GD Library).

The resizer not found.

what do i do?

[Sorry for my english, I'm an italian guy]

MpMp said,

September 17, 2007 @ 7:18 pm

The images Extension are aspx (ex image.asp?id=1)

Thomas said,

September 18, 2007 @ 8:45 am

The script are looking for the extensions, therefore it will not recognize .asp as an image file but rather use the iframe to display what it thinks is a page. To fix this you will need to add asp to the image array in the script. That should hopefully solve your issues…

MpMp said,

September 19, 2007 @ 8:31 am

Here?

if(imageArray[activeImage][0].match(/\.aspx$/) || imageArray[activeImage][0].match(/\.gif$/) || imageArray[activeImage][0].match(/\.png$/) || imageArray[activeImage][0].match(/\.jpg$/) || imageArray[activeImage][0].match(/\.bmp$/) || imageArray[activeImage][0].match(/\.jpeg$/)){

Thomas said,

September 19, 2007 @ 9:23 am

Yes that looks right (line 408 in the original script). Not sure whether your query string will break this rule or not (.asp?id=x). Let me know how it goes.

MpMp said,

September 19, 2007 @ 10:49 am

The exact string is this:

imageArray[activeImage][0].match(/\.aspx\?id.+$/)

MpMp said,

September 19, 2007 @ 10:57 am

I have another question (sorry )
I would like to open a ligthbox with a exactly dimensions.
How do I do?

Thomas said,

September 19, 2007 @ 12:45 pm

I’ve not yet had time to implement this option. I know ThickBox includes this option and most certainly would be a nice alternative. It does however require a different Java library

I think it should be possible to add the width and height inside the rel ref, but as I said I’ve not had the time to play around with the code yet…

If you figure something out please let me know.

MpMp said,

September 19, 2007 @ 2:14 pm

In else of this if:
if(imageArray[activeImage][0].match(/\.gif$/) || …etc
write:
this.content_is_image = false; Element.setSrc('lightboxIframe', imageArray[activeImage][0]);


var url=imageArray[activeImage][0];

url=url.replace(”&”,”&”);

if(url.match(/\?*intX/)){

	i_intX=url.indexOf(”intX=”)+5;

	if (url.indexOf(”&”,i_intX)>-1){

	f_intX=url.indexOf(”&”,i_intX);

} else{

	f_intX=url.length;

}

lunghezza=f_intX-i_intX;

vidWidth=parseInt(url.substr(i_intX,lunghezza));

}

if(url.match(/\?*intY/)){

	i_intY=url.indexOf(”intY=”)+5;

	if (url.indexOf(”&”,i_intY)>-1){

		f_intY=url.indexOf(”&”,i_intY);

	} else{

		f_intY=url.length;

	}

lunghezza=f_intY-i_intY;

vidHeight=parseInt(url.substr(i_intY,lunghezza));

}

myLightbox.resizeImageContainer(vidWidth, vidHeight);

the url:
page

If someone find a bug contact me here.
My code is very very very very very very very very very banal… Sorry…

Thomas said,

September 19, 2007 @ 2:18 pm

The link doesn’t work - send it through my contact page and I’ll update it…

I’ll applaud your efforts when I’ve seen it in action

MpMp said,

September 23, 2007 @ 8:43 am

I have written to you
You have received the message

MpMp said,

September 26, 2007 @ 10:57 pm

http://www.micene.net/prova/

the same method you can use inside rel with some simple chages

Blogvaria » Lightbox Media Update said,

September 27, 2007 @ 2:58 pm

[...] post is just to announce the immediate availability of an updated version of my Lightbox Media [...]

MpMp said,

September 28, 2007 @ 3:06 pm

I’m sorry…. [ops]

webnot said,

November 6, 2007 @ 8:41 am

Hi i am getting the same problim MpMp is getting any help …

The problim is my extension is .asp and i am using lightbox 2.3 ver
but it is not working it just shows me an blank image

Thomas said,

November 6, 2007 @ 10:40 am

Look for the line referenced in comment 10, try to add your extension in a similar fashion and see if that helps, otherwise I would need more info and preferably a link to your test site.

wayou said,

July 23, 2008 @ 1:37 pm

Бегун не убежал от Гугла, а также Бегун скоро исчезнет, кто следующий? и Будет ли Рамблер подмят Гуглом, Бегун не убежал от Гугла и Бегун не убежал от Гугла и В РУнете дав играка: Google и Yandex, Позиции Гугла на Рунете укрепляются

efoiv said,

August 9, 2008 @ 3:06 am

I hope I explain this clearly.

When using the lightbox to load iframed pages the default page prior to clicking any link (while still hidden) loads the same page it’s on with the addition of /href to the url

for example….

if the lightbox is located at the following http://some.domain.com/index.html it will load in the iframe the same page http://some.domain.com/href

this then obviously loads your 404 page

The question is is there any way to set the default page it would load? I’d just point it to a blank page.

Thanks nice job on the lightbox

Thomas said,

August 11, 2008 @ 10:38 am

I haven’t had that problem to be honest. Could you provide an example page and also some information on which browser(s) and version(s) you are using?

efoiv said,

August 13, 2008 @ 12:55 am

Sure - first let me explain how I figured it out. First thing was I noticed 404 errors in my logs so I checked how it was happening. So I used Firefox with the Wed Developer Extension installed and used the Show Hidden Elements tool under Miscellaneous. You will see the default iframe loads the URL the lightbox is loaded on with the addition of /href on the end as in some.domain.com/href

You can see my demo page at http://snefo.com/demo/lbm

Thomas said,

August 13, 2008 @ 9:34 am

Hi efoiv, I’ve also managed to reproduce errors in my Apache log BUT they are not directly caused by the script I believe. In my case I’ll only get errors when trying to open Alexa.com.
Apparently this page contains several broken links/ads which causes the iframed content to produce several 404’s.

efoiv said,

August 14, 2008 @ 12:43 am

Hi Thomas thanks for you very quick replies… I’m specifically talking about what is default loaded into the iframe prior to ever clicking a link to display the iframe. Having not clicked any link to load and display the iframe. I would think the iframe wouldn’t have any content loaded but it does try to load your current page url with the addition of /href at the end.

I’ve tried it on several setups default install with your example page and it exhibits this every time.

I am not saying anything wrong is with the lightbox as is I was just curious if there was a way to *preload* the lightbox with some set page.

Cheers and thanks for your help

Thomas said,

August 14, 2008 @ 9:29 am

Hi again, as you know the script gathers info from all links that includes the reference to lightbox (rel=lightbox…). Furthermore, it reads the value set in the “href” attribute and examines whether it is an image or not.

I believe it would be possible to set a default page but in my mind that would only slow down the process as this would have to be loaded before opening the requested iframe page.

However, have a look for this line in lightbox-media-2.js:
objLightboxIframe.setAttribute('src','href');

And see if it makes any difference if you replace it with:
objLightboxIframe.setAttribute('src','#');

efoiv said,

August 18, 2008 @ 4:25 am

perfect! that did it. now it down’t bother to load anything in the iframe until a link is actually clicked.

Thank You

Si said,

August 24, 2008 @ 12:00 pm

Thank you =]
Changing href to # on that line solved a weird problem with my lbm2 setup — the href bit was mysteriously refreshing whatever page to the main page after around 20 seconds for some reason…

David Wright said,

October 1, 2008 @ 7:03 pm

cool script, but i can’t seem to get the lightbox to display over my flash. Tried to z-index the div my flash is contained in, and make the flash transparent, but nothing seems to work. Anybody got a work around for this.

Subscribe to Comments | TrackBack URI

Akismet has protected Blogvaria from 71,726 spam comments. Design by Evaria.com. Powered by WordPress.
Our beloved and trusted server has rendered 3.406 pages so far today, an amazing 4.008 pages yesterday
and even more astonishingly 103.056 pages since 12 September 2008 alone without dropping a byte nor a pixel.

Lightbox Media

Blogvaria » Introducing the Comic Strip Add-on said,

jure said,

Thomas said,

Michael said,

Michael said,

Thomas said,

MpMp said,

MpMp said,

Thomas said,

MpMp said,

Thomas said,

MpMp said,

MpMp said,

Thomas said,

MpMp said,

Thomas said,

MpMp said,

MpMp said,

Blogvaria » Lightbox Media Update said,

MpMp said,

webnot said,

Thomas said,

wayou said,

efoiv said,

Thomas said,

efoiv said,

Thomas said,

efoiv said,

Thomas said,

efoiv said,

Si said,

David Wright said,

Leave a Comment

Main pages

10 latest posts

Recent comments

Most Popular Posts

Page Stats

Most Viewed

Recent Tweets

Beneficial links

Friend's Sites

Paying the bills

Today's Comics

SiteSearch

Categories

Archives

Syndicate ++