mediaboxAdvanced
iaian7 » code » webcode John Einselen, 16.02.09Based on Slimbox and the Mootools javascript library, mediaboxAdvanced can handle your images, videos, animations, social video sites, inline elements, and external pages with ease.
mediaboxAdvanced 0.9.9g includes new YouTube preferences along with Viddyou support. Available for download below.
As always, post bugs and issues to the Google Group, not the comments below. I encourage you to test out the features; if they aren’t working, please let me know the OS platform, browser, and media type. A link to an example of the problem is ideal. I’ll try to get it fixed as soon as I can! I want to make sure the eventual 1.0 release is the best yet.
Jump to:
Introduction | Examples | Installation | Scripting | Troubleshooting | Support
Introduction
A lightbox for any occasion
mediaboxAdvanced supports most online media formats, and anything not recognized is automatically contained within a dynamic frame, allowing you to open a lightbox-style overlay with anything inside. From JPEG images or flash videos, to PHP pages, mediaboxAdvanced can display your content in an easy-to-style overlay.
Based on Slimbox
Inheriting the foundation laid by Slimbox, mediaboxAdvanced boasts animations that are hard to break, keyboard navigation, valid CSS, and javascript accessibility.
Gallery sets
mediaboxAdvanced supports cross-media sets, allowing you to navigate from one item to another without closing the overlay. Images are preloaded dynamically as the viewer browses, while other media elements, often much larger, are loaded only when needed.
Titles and captions
Using title::caption notation, mediaboxAdvanced lets you set both a title and a caption, just a title, or leave the title attribute blank for elements you need left unlabelled, such as user interface elements.
Validates cleanly
It’s all valid XHTML, and if a user has javascript turned off, your links operate normally.
Important changes
The original Mediabox used rel="mediabox[...]" so as to play nicely alongside other lightbox-style scripts. I wanted a media script that could be paired with any other image-only script. Because mediaboxAdvanced is no longer a companion script, but a full media solution, the rel attribute has been changed back to "lightbox[...]" so as to maintain compatibility with the lightbox standard. Pages currently set up to use Mediabox will have to be changed, or you can edit the script yourself (simply replace “lightbox” with “mediabox” to match the desired behaviour).
The original Mediabox companion-style script will remain available for Mootools 1.11.
On another note, it is NOT required that you define a gallery set! The following examples are labelled lightbox[image...] or lightbox[social...] just to organise them into galleries. It has no impact on how a link is formatted or embedded (for example, linking to YouTube will still open the video, regardless of the gallery you put it in – it doesn’t define the media type, the script will always discover media type based on the URL given).
Media types and Examples
mediaboxAdvanced supports a wide range of media formats, and an even wider range of social media sites. Simply link to any image, flash video, or popular website, and the media will be automatically loaded into the overlay.
Images
Images contained in gallery sets are preloaded, even when the set contains mixed media types.
<a href="../media/mediabox/concrete.jpg" rel="lightbox[set1]" title="Concrete::taken in central Michigan"><img src="../media/mediabox/thumbs/concrete.jpg" alt="Concrete" class="lbThumb"/></a>
As of version 0.9.9, mediaboxAdvanced will also weed out identical links in the same set. Multiple links to the same item will be combined, using settings from the first link (title, width, and height).
Social video links
Please note: width and height are not required for social video links, but can be still be defined if you want to override the defaults (especially useful when videos don’t fit the typical aspect ratio of a given site).
<a href="http://www.facebook.com/video/video.php?v=47157459019" rel="lightbox[social]" title="facebook.com">Facebook »</a>
mediaboxAdvanced is set up to accept both
...v=47157459019and...v=47157459019&subj=72053641URL formats (or anything else after an ampersand sign). Please note that privacy settings apply! If a video is not public, the general public will not be able to view it.
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a>
(1.0 release)
(1.0 release)
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>
(1.0 release)
<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a>
<a href="http://www.metacafe.com/watch/2185365/spot_electrabel_gdf_suez_happy_new_year_2009/" rel="lightbox[social 400 350]" title="www.metacafe.com">MetaCafe »</a>
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>
<a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="lightbox[social 430 346]" title="myspacetv.com">MySpaceTV »</a>
<a href="http://quietube.com/v.php/http://www.youtube.com/watch?v=b5Ff2X_3P_4" rel="lightbox[social 480 392]" title="youtube via quietube.com">Quietube + Youtube »</a>
<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="quietube.com">Quietube + Vimeo »</a>
Quietube.com is a site designed to strip away the clutter of a few popular social video sites – if you’re concerned about the quality of user experience sans-javascript, when mediaboxAdvanced would not intercept links, this may be a good option. Right-click the above links to open in a new tab, and see for yourself.
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a>
<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a>
<a href="http://seesmic.com/app?#/video/GtXGiBXzWb/watch" rel="lightbox[social 425 353]" title="www.seesmic.com">Seesmic »</a>
<a href="http://www.tudou.com/programs/view/KG2UG_U4DMY/" rel="lightbox[social 400 340]" title="www.tudou.com">Tudou »</a>
<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social 480 380]" title="www.youtube.com">YouTube »</a>
<a href="http://www.youtube.com/view_play_list?p=63F0C78739B09958" rel="lightbox[social]" title="www.youtube.com playlist::hover over the window to see everything in the play queue">YouTube Playlist »</a>
To embed using one of the higher quality YouTube streams, you’ll need to append a format code to your URL or set a default quality setting in the script options. The HD video format (
&fmt=22) does not deprecate to a lower format automatically, so please make sure any videos embedded with this quality setting are actually available in HD. High quality videos (&fmt=18) will default to the lower quality if HQ isn’t available, which makes it a little more reliable (besides streaming faster than HD). MediaboxAdvanced will override the script’s quality option with any manually appended format numbers, so both methods can be used on a website.
YouTube HQ » (via options)
<a href="http://www.youtube.com/watch?v= 2_HXUhShhmY" rel="lightbox[social 640 385]" title="www.youtube.com">YouTube HQ »</a>
YouTube HD » (via url code)
<a href="http://www.youtube.com/watch?v=L5Nu8bo2d-o&fmt=22" rel="lightbox[social 960 565]" title="www.youtube.com">YouTube HD »</a>
<a href="http://www.veoh.com/videos/v753286qccrGhsT" rel="lightbox[social 540 438]" title="www.veoh.com">Veoh »</a>
<a href="http://www.viddyou.com/viddstream?videoid=49456" rel="lightbox[social]" title="viddyou.com">Viddyou »</a>
<a href="http://vimeo.com/877053" rel="lightbox[social 640 360]" title="vimeo.com">Vimeo »</a>
<a href="http://12seconds.tv/channel/Iaian7/81432" rel="lightbox[social]" title="12seconds.tv">12seconds.tv »</a>
Social video embed links
Because some social video sites do not use the media ID in the page URL, you have to use the link given in the embed code. Be forewarned that this is both more difficult (you must dig through the embed code to find the link) and does not deprecate nicely (without javascript, the links will point to the video player, not the video page).
<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a>
(1.0 release)
Break.com uses an inconsistent URL scheme – sometimes the 6-digit video ID is present in the page URL, but most of the time it is only present in the embed code. So long as the URL contains the 6-digit code, mediaboxAdvanced will be able to load the video.
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>
(1.0 release)
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>
Flash animation
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>
Flash video
FLV and MP4 video are played using the NonverBlaster or Jeroen Wijering Media Player.
<a href="../media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV player::John Einselen - 2007 demo reel">FLV player »</a>
<a href="../media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 player::John Einselen - 2005 demo reel">MP4 player »</a>
Flash audio
MP3 and AAC files can also be played using the Jeroen Media Player.
<a href="../media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>
Inline content
Using an anchor tag, Mediabox can insert html found elsewhere on your page. This circumvents many of the associated issues with Ajax – when accessing hidden inline content, Mediabox both accommodates for deprecation (if javascript is turned off, the inline content is not hidden, and the anchor links work normally), and for accessibility and search engine optimisation (your content is always available for non-visual browser systems).
<a href="#mb_inline" rel="lightbox[inline 360 180]" title="">inline content »</a>
<div id="mb_inline" style="display: none;"> <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/> <a href="javascript:Mediabox.close();">close via javascript »</a></span></div>
Because external links might also contain anchors, any inline content ID must use the mb_ prefix to make sure Mediabox knows to load it from the current page.
External content
HTML files, PHP, ASP, and any other web document format will be displayed inside a dynamic frame.
<a href="http://www.google.com" rel="lightbox[external 640 360]" title="Google.com">Google.com»</a>
<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com»</a>
<a href="http://www.engadget.com/" rel="lightbox[external 640 80%]" title="Engadget.com">Engadget.com»</a>
Installation and requirements
Depending on what you want to use it for, mediaboxAdvanced requires very few files, and minimal setup. Follow these simple directions to get it up and running on your site in minutes.
1 – Download Scripts
mediaboxAdvanced version 0.9.9g Beta (28kb)
Mootools 1.2.1 (57kb for the core)
JW Media Player
or
NonverBlaster
NonverBlaster is a simpler, cleaner alternative to the JW Media Player, and has no “commercial” licensing requirements. However, users should note that NonverBlaster does not support MP3 and AAC files – only FLV and MP4.
mediaboxAdvanced is distributed under the MIT license, and is free for use, abuse, and complete modification. Enjoy! However, the software is released without warranty, and the author(s) retain no responsibility for damages, acts of God, spontaneous combustion, or technical support. I’ll do my best to help when I get the time, but can’t promise anything.
2 – Download Styles
3 – Copy
Copy the files to your web server, and into the appropriate folders (usually /js, /css, and /images).
4 – Edit
From your server, open up the mediaboxAdvanced javascript file in a text or code editor, and update the preferences to reflect your desired settings. Make sure you update the file path to the JW media player with the correct path to your server.
Other preferences to keep an eye on are the default overlay width and height, and the Revver affiliate ID, which allows you to generate revenue based on ad views through the Revver videos you link too.
Do the same for the CSS file, updating the image links to point to the correct images hosted on your server.
5 – Header
Now that your files are ready to go, add the appropriate links to your page header. This may be different based on your content management system, but most let you set up custom header content.
<link rel="stylesheet" href="../css/mediaboxAdvBlack.css" type="text/css" media="screen" /> <script src="../js/mootools12.js" type="text/javascript"></script> <script src="../js/mediaboxAdv.js" type="text/javascript"></script>
Please edit the links to match your server setup. The styling may not work correctly without a proper xhtml transitional DOCTYPE. Check out w3.org for more information.
6 – Link
All that’s left is to test a link! Go ahead and try a simple YouTube video, using the code below.
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[set 480 380]" title="Blue Monster::3D animation - John Einselen">play video</a>
The set, width, and height are technically optional. Pleast note that trying to use width and height without a set will actually create a set based on the width value, grouping the content with any other set-less content that have the same width. Width and Height can also use percentages, but neither make any difference on images because the image size is read directly from the file.
Scripting and link alternatives
If you need to customise the code, mediaboxAdvanced may appear daunting if you’re new to javascript. Give it time. Look over the comments in the code, and check out how media types have been added. You should be able to add your own with minimal trouble.
If you implement a media type you think could be included in the next version of mediaboxAdvanced, contact me and let me know. Please remember that when implementing plugin-based media (quicktime, windows media, divx, etc.), a basic plugin check should be performed to alert viewers if they don’t have the proper software installed.
In addition to the anchor tag, you can also create a Mediabox overlay via javascript, from within other frames, flash based websites, even flex.
Javascript
Mediabox.open('url', 'title', 'width height');
A group of elements can be loaded by defining an array of objects, followed by an index number (0 = first element).
Mediabox.open([['url1', 'title1', 'width height'], ['url2', 'title2', 'width height'], ['url3', 'title3', 'width height']], index);
<a href="javascript:Mediabox.open('#mb_inline', 'javascript trigger', '640 120')">Open HREF »</a>
<a href="" onclick="Mediabox.open('#mb_inline', 'javascript trigger', '360 180');return false;">Open onClick »</a>
Close via javascript »
<a href="javascript:Mediabox.close();">Close via javascript »</a>
Frames
Using javascript, you can access other frames on the page.
parent.Mediabox.open('url', 'title', 'width height');
This allows you to open and close a mediaboxAdvanced overlay from any frame, in any frame (the above example would open an overlay in the parent frame – keep in mind that mediaboxAdvanced needs to be running in the frame that receives the javascript call, not the one that sends it).
Flash
CodeFidelity has posted an article describing how to link up anchor elements with flash clicks. It might prove helpful, but without any flash experience myself, I can’t say for sure.
Flash AS 3
Not yet tested. If you have an example of working code, please contact me.
Flash AS 2
Not yet tested. If you have an example of working code, please contact me.
Flex
flash.external.ExternalInterface.call(Mediabox:String[,'url', 'title', 'width height']):Object;
Not yet tested. If you have an example of working code, please contact me.
Troubleshooting
Most problems stem from the most basic of mistakes; a broken link in your header, or a mis-formatted link. Please make sure you’ve followed the directions, and if possible, open up the debugger that comes with your browser (Safari and FireFox both have decent error consoles) and see if you can track down the problem.
Here are some of the most common issues people have…
Mediabox doesn’t open
— Make sure the files are actually on the server where you think they are, then double check the links in your header. Using absolute links (“http://…”) may help sort out buggy relative paths.
— Make sure you’re only using scripts based on the Mootools library. Trying to run Mediabox+Mootools on a page that’s already using Jquery or Prototype will cause conflicts and prevent scripts from working.
Overlay opens but previous, next, and/or close links are missing
— See above. Recheck the header link for the css file.
— Double check the image links in the css file. Make sure the images are where you think they are.
The flash media player isn’t loading, or loads the wrong media
— Make sure you’ve updated the Mediabox javascript file with the correct path to the JW Media Player or NonverBlaster.
— NonverBlaster may need to be in the same directory as mediaboxAdvanced, for it to properly load the media link.
Things are visually messed up
— Internet Explorer often screws up element alignment and width/left/right placement. I’m unsure of the fixes, as I have been unable to reproduce the effect myself.
— If you are using sIFR on your page, you’ll need to set the sWmode variable to opaque (thanks to Adam Messinger for the tip).
— Firefox often adds dotted lines around media elements when a viewer clicks or interacts; this can be fixed by adding
object#MediaboxSWF:focus { outline: transparent none; }in a CSS file (thanks to Adam Messinger for the tip).
Internet Explorer stops loading the page, “Operation Aborted”
— There are apparently several problems that can cause this, but the typical issue seems to be that mediaboxAdvanced (or another script) is trying to access elements that aren’t there yet. You can change the line
window.addEvent("domready", Mediabox.scanPage);(at the very end of the script) towindow.addEvent("load", Mediabox.scanPage);, and it should fix the issue. Be forewarned; changing this means none of the overlay links work until the entire page is loaded.
Known issues
mediaboxAdvanced has been tested on both Microsoft and Apple platforms with very few known bugs.
Tested and working in the following:
OSX — Camino 1.6, Cruz 0.1, Firefox 3, Safari 4, Stainless 0.5, Opera 9.6
Vista — Chrome 1.0, Firefox 3, Internet Explorer 7 and 8, Opera 9.6, Safari 3
Windows 7 — Firefox 3, Internet Explorer 8, Opera 9.6, Safari 4
Ubuntu 8.10 (Intrepid Ibix) — Firefox 3
Linux Mint — Firefox 3
OS X known issues
— Some Safari users have reported issues with FLV playback and the JW Mediaplayer (unconfirmed).
— Gecko rendering engine version 18 (Firefox 2 and Camino 1.6) will not render flash content on top of a transparent background. This has been fixed by replacing the transparent background with a PNG. However, this causes scrollbars to be rendered on top of the overlay – I recommend not using these browsers. This has not been tested in Windows due to the difficulty of installing multiple versions of the same browser, but is very likely a problem with Firefox 2 in windows as well.
Windows known issues
— Internet Explorer 7 has trouble with iFrame scrollbars loosing focus while scrolling content by clicking and dragging on the scrub bar (typically sites with XHTML doctypes).
— Some Internet Explorer 8 users have reported trouble updating iFrame content (unconfirmed).
Nebulous issues
— If the connection to a server fails during the process of opening mediaboxAdvanced, the overlay will fail to load the media, and the browser will remain oblivious to the error. No currently known workaround for this.
Version history
Source code with version history can be found in the Google Code repository.
v0.9.9g — Added Viddyou support and new YouTube options
v0.9.9f — Added Facebook video support
v0.9.9e — Added YouTube playlist support (and yes, running out of numbers)
v0.9.9d — Fixed auto play for Metacafe, MySpace, Revver, and Vimeo
v0.9.9c — Added Megavideo and Quietube support, fixed NonverBlaster loop
v.0.9.9b — Added Blip.tv support and removed IE6 transparency hack
v0.9.9 — Duplicate link consolidation, added key option, fixed javascript API
v0.9.8 — Added NonverBlaster (JW alternative) and RuTube.ru support
v0.9.7c — Fixed background colour options on several social media formats
v0.9.7b — Fixed IE support, streamlined Gecko detection
v0.9.7 — Added default sizes for social media and percentage support
v0.9.5 — Fixed Viddler support, fixed captions
v0.9.4 — Added Tudou and YouKu support
v0.9.2 — Added YouTube quality settings, better Viddler support
v0.9.0 — Fixed non-numeric set error
v0.8.9 — Fixed javascript API (both single and multiple)
v0.8.8 — Added flash plugin check and error routine
v0.8.7 — Fixed FireFox / Camino flash errors
v0.8.6 — Fixed IE6 errors
v0.8.4 — Added preferences for applicable media types
v0.8.2 — Updated CSS and redid display organization
v0.8.0 — First public testing
v0.7.8 — Cleaned up operatives
v0.7.6 — First private release
Credits
Framework:
Slimbox 1.64 — Christophe Beyls
Pieces:
Yosha (API support)
Robert Jandreu (Megavideo support)
(if you contributed code to this project and I’ve missed your name, please let me know!)
Comments and Support
Feel free to leave comments below. I love to hear about sites that use mediaboxAdvanced, and from people that find it helpful! You can also promote mediaboxAdvanced by posting a link back here (http://tr.im/mbAdvanced is an easy link), and recommending it to your friends.
However, all questions or support requests must be posted to the Google discussion group. It’s open for anyone to join and start posting. When posting to the Google discussion group, please remember to include a link to an online example of the problem, steps to reproduce the issue, and relevant information such as operating system and browser version. Thank you!
Just a friendly reminder, questions or requests posted in the comments below will have to be removed. The comment system is simply not set up for use as a discussion board, and we both waste time and energy trying to use it as such.
awesome! thanks for refactoring this great script for mootools 1.2
Awesome!! Thank you for the update!
Thanks for not forgetting this awesome update! Works like a charm they usually say!
*that’s a very good thuff.I see that Mediabox is more stable than the ohter clones of lightbox.I tested that on IE6,Firefox3 and the last Opera.
Good work!!
First of all, thanks for the great script. It was exactly what I needed at just the right time.
I had some trouble with Mediabox in IE6 — the background was showing up as solid black. I think this was probably happening because lines 125-129 set the background opacity to 1 for that browser. Even with the transparent GIF background, this causes the background to appear solid in IE6.
I looked to the Slimbox code for a solution, since partial background transparency works okay in IE with that script. I discovered that Slimbox skips background images for the overlay, and just handles the transparency effect with MooTools. I commented out lines 125-129, and your script now works as expected for me.
Thanks again for this great utility.
Very nice! You can see an example of it here: http://www.project66.net/top-10-exercises-youre-not-doing/ Really slick! Would be nice if the it used jQuery instead of mootools though
¡IncreÃble!
¡Awesome!
MagnÃfico trabajo.
Felicidades.
I’m still unable to get this to work in I.E. 7. Works fine in other browsers. A paragraph above gives what seems to be a solution for Internet Explorer not loading the page, but the “what you change” and “what you change it to” looks like the SAME thing to me, am I missing something? Here’s what it says above… “You can change the line window.addEvent(“domready”, Mediabox.scanPage); (at the very end of the script) to window.addEvent(“domready”, Mediabox.scanPage);”
Thanks in advance for any suggestions
Hello,
I really like this code, it works fine for my websites.
But now, I would like to make some change in it, a little change, but after several tries, I can’t find the solution…
I would like the bottom bar with the name and the close button on the top of the image box instead of bottom…
Would anybody know how I can do this ?
Best regards
David
IE6 Overlay:
Line 134: options.overlayOpacity = 1;
I changed the value to 0.7 and overlay works in IE6.
Thanks to Adam Messinger
IE7 Scrollbar focus problem dirty fix :
I used mediaboxAdvanced for external pages. I created a container div for all of content with fixed width and height (short than mediabox’s) and set overflow as auto :
// in external page
#container {
position:relative;
width:480px; //mediabox’s is 500
height:380px; // mediabox’s is 400
overflow:auto; // scroll for div
}
and it works for now. External sites can be loaded with ajax for this way but i don’t know how the scripts in these sites will work. Maybe evalScripts option (in mootools request code) can… i’m too lazy to try ^^
Thanks John for your great script
Thanks! Just what I need!
@ ellemental:
I have no problems with all browsers.
I just add the new swfobject version.
The swfobject.js must be add in the header. The Nonverblaster and the JW Media Player are using this script.
Please check your css and js foldertrees.
What happens in your IE7 browser ?
Not sure if they has been posted yet or not – couldn’t be bothered to read that wack of comments above
I noticed that the width centering of the modal box was perfect, but the height centering was messed up for some reason or another.
I changed:
top = window.getScrollTop() + (window.getHeight() / 15);
to:
top = window.getScrollTop() + (window.getHeight() / 2) – (options.initialWidth / 2);
and it now seems to work wonderfully.
Just thought others might like to know
Sincerely,
Mark
Mediabox Advanced is just what I needed. Thanks a million. Did you discontinue quicktime support? I can’t get it to work using the same code from Mediabox (swapping lightbox for mediabox)
Don’t use this in your css files :
* { margin:0 auto; }
“auto” will affect the script, just use * { margin:0; }
Now, script is working normally at high resolutions
NonverBlaster dosen’t like url’s containing Capital letters. I resolved the problem by adding speling module to my apache2 webserver:
http://keystoneit.wordpress.com/2007/02/19/making-apache-case-insensitive/
Awesome work…
Looks great.
Managed to get it working without too much trouble.
Thanks a lot
PROPS
Yes very good work ! Thanks a lot !
I have only one small problem with CSS and Internet Explorer :
the #mbBottom
border: 10px solid #000;
seems not to be recognized (no problem with Safari or FF). So I get a bottom 20px smaller than the image…
A way to make it accepted by IE ?
Hi,
How can i disable right-click when open a single image? i know how can i disable if opened object is a page
I found it
line 36:
image = new Element(“div”, {id: “mbImage”}).injectInside(center);
i added this to line 37:
image.addEvent(‘contextmenu’,function(e) { e.stop(); });
it works
How can I disable the function when you click on the overlay to close?
If someone click outside the image/video they will not close it.
The need to hit the close-button instead.
Thanks!
You saved me. It works great in all browsers. Firefox 3 & Safari 4 & IE 7
Thanks for a great great script.
Anyone know what to change to make videos autoplay? I’m trying to get it to work with Viddyou.
Thanks
NonverBlaster:hover can play MP3 since 21.04.2009
Great Stuff
looking forward to working with this
Regards
Kb