Name of the extension?

**ross** · 09/28/2009, 07:14

I like the new look of TYPOlight website, however I got lost looking this community forum.

The video pop-up window on home page is cool with a dark border. Is it a TYPOlight extension, that can embed videos on pop-up window?

**Medianomaly** · 09/28/2009, 15:27

The Typolight home page uses MediaBox:
http://iaian7.com/webcode/Mediabox

I don't believe there is an extension for it, currently -- unless it's named differently.

***leo*** · 09/28/2009, 16:11

Mediabox will be available as part of the TYPOlight core from version 2.8.

**Medianomaly** · 09/28/2009, 19:30

Nice!!!

**Ola** · 09/28/2009, 23:13

It's easy to implement MediaBox right now. No need to wait for TL 2.8. I have used it on a site for a while now to show movies:

http://www.lonka.se/filmer.html
(In swedish)
The list of movies is pulled from Vimeo through some php and xml, and then shown in Mediabox.

**Xstream** · 10/01/2009, 23:45

Hi Ola,

Could you share how to make it work? I've added all the required .js and .css files, but it just won't work.
I have to admit that lightbox didn't work for me either, so maybe it's a local problem.

Did you do anything special, other then adding the JS and CSS files?

Thanks in advance!

Cheers,
Xs.

**Ola** · 10/02/2009, 09:59

First, make sure you download MediaboxAdvanced. The regular Mediabox is for mootools v1.11 only. MediaboxAdvanced uses Mootools v1.2 that the latest TYPOlight version uses. MediaboxAdvanced can be downloaded here:
http://iaian7.com/webcode/mediaboxAdvanced

Upload the Mediabox css-files, javascript-files and image-files to your webbserver. I did put the files in the TYPOlight plugins folder, but you can choose whatever directory you want. Also don't forget to add links to the files in the header section.

Since TYPOlight uses slimbox you must either remove slimbox or alter the MediaboxAdvanced so they don't interfere with each other.

1.
If you want to use only MediaboxAdvanced, then you must remove Slimbox so it is not included in the page header.

2.
If you want to use both Slimbox and MediaboxAdvanced, i.e. Slimbox for images and MediaboxAdvanced for videos, you must alter the MediaboxAdvanced javascript a little:

Change this line in the bottom of the javascript:

Code:

return el.rel && el.rel.test(/^lightbox/i);

Change to this:

Code:

return el.rel && el.rel.test(/^mediabox/i);

With this little change you can now use Mediaboxadvanced by using mediabox as the rel-attribute in links:

Code:

(Using the normal lightbox as rel-attribute will open the normal slimbox.)

**Xstream** · 10/02/2009, 17:07

Funny, i did all the things you said without any luck, so i was now trying some other lightbox clones, but again without any luck.

I was preparing it to mediabox again to provide you a link to see how i implemented it, and guess what, it works

I'm trying to go back to see what is different this time. And i think it's the order of calling the JS files. I it was in the wrong order (does that make sense?). I had mediabox.js first and then mootools.js, now the other way around. Makes sense now actually, but didn't think of it before

So thanks for helping me :D

Cheers,
Xs.

**Ola** · 10/02/2009, 18:42

Glad you got it working! The order of the javascript-files is important. The mediabox javascript needs to come after the mootools javascript since mediabox uses functions in mootools.