Download:
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 | Twitter Media | Social Video | Flash | Video | Audio | Inline | HTML
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 eastern Michigan"><img src="/media/mediabox/thumbs/concrete.jpg" alt="Concrete" class="lbThumb"/></a>
You can include links in a title by encoding HTML characters using their entity name. < = < > = > " = "
<a href="/media/mediabox/window.jpg" rel="lightbox[set1]" title="Image set::Window - taken in <a href="http://www.cityofwabash.com/" title="cityofwabash.com" target="_blank">Wabash, Indiana</a>"><img src="/media/mediabox/thumbs/window.jpg" alt="window" /></a>
mediaboxAdvanced will also weed out identical links in a set. Links to the same URL, be it an image, social video, media, or website, will be combined using the settings from the first of the identical links (title, width, and height). Open any of the below duplicate images, and they will link to the original image from the gallery above, including the correct position in the set.
You can choose how images should be embedded; as a CSS background (imgBackground: true), which makes it harder for visitors to rip off images, or as an IMG tag (imgBackground: false), which can automatically scale images for smaller screens. While I’ve added click protection to the IMG embed option, Opera does not allow javascript to disable the right click context menu. All other browsers have image dragging and right clicking disabled. While this does not protect your images from those determined to download, it should discourage the vast majority of the population from ripping off your files.
Page links are also automatically protected, with the context menu turned off, further protecting image files from rampaging downloaders. Same as for the IMG tag click protection, this works in all browsers except Opera.
Twitter media
<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a>
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>
<a href="http://www.twitvid.com/3717D" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>
<a href="http://twitvid.io/acDU" rel="lightbox[twitter]" title="TwitVid.io">TwitVid.io »</a>
<a href="http://yfrog.com/4q4soj" rel="lightbox[twitter]" title="Yfrog image::Photo by Ryan Keberly">Yfrog image »</a>
<a href="http://yfrog.us/56800z" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a>
Social video
Width and height settings are not required for social video links, but can be still be defined if you want to override the defaults. This can be especially useful when videos don’t fit the typical aspect ratio of a given site, or if you want to fit the scale to a specific site layout.
<a href="http://www.facebook.com/video/video.php?v=47157459019" rel="lightbox[social]" title="facebook.com">Facebook »</a>
mediaboxAdvanced accepts both
...v=47157459019and...v=47157459019&subj=72053641URL formats. 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>
<a href="http://geovideos.fliggo.com/video/fqSStugR" rel="lightbox[social]" title="Fliggo">Fliggo »</a>
<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a>
<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com video »</a>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>
(full support postponed due to issues with embed codes)
<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=22does 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=18will 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
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>
<a href="http://www.break.com/usercontent/2009/4/The-Wonderful-World-of-Reals-703500.html" rel="lightbox[social]" title="break.com">Break.com »</a>
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>
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>
<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 (NonverBlaster support hopefully coming soon).
<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 can accommodate both 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="" onclick="Mediabox.close();return false;">close onClick »</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.
There is one major caveat to this method – the keyboard commands that navigate through a gallery (“p” for previous, etc.) will interrupt typing into text fields. Near the top of the options list, you’ll find a setting for stopKey – set this to false to override the default settings. This does not prevent the key commands from initially affecting the overlay, however (typing “tax” into a search field for example, will close the overlay). To change the default keyboard shortcut controls for gallery content (removing the alphabetical entries such as “x,” “c,” “p,” and “n”), you can edit the keycodes listed under the keyDown function (further down in the script). Ultimately, the most stable route is to use external page content when loading forms, as iFrame embedding prevent the overlay (parent frame) key commands from interfering with the form (child frame) inputs. Read on for details…
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>
Power by mediaboxAdvanced.
Example Source : http://iaian7.com.
为什么我用上Lightbox M插件后，Techified主题首页的精选帖子还是显示不出来呢？
http://www.yuqingquan.com/
删除从
<!– begin gallery scripts –>
到
<!– end gallery scripts –>
之间的代码我保证它是可以正常运行的.
I have used your plugin for my portfolio website, it works great, have a look if you want…
http://www.derricklemaster.com
Thank you very much for this, I am very happy with it, no I am going to add my demo real and animation videos to my website with you plug in.
Hi! Plugin looks great. Been trying to make it work on wordpress but it won’t work:/ I’ve been trying to use different versions of js files but still nothing:/ Can you plz help?
Perhaps it is with your other plug-in conflict.
Please tell me your blog URL, so that I can find out why.
Ok, I know where the problem is. When you put files on your ftp you must have “change file names to small letters” (or sth like that) UNCHECKED! And it works like a charm
Thanks!
Your blog url please.
I am very willing to help you.
If you couldn’t worked this script, try different mootools.js. I found a web page which using mediabox and i downloaded mootools from the site. and.. yes.. it worked
any detail installation guide for this wp plugin please?
The installation guide is preparing now.
Thanks!
help
is this script really working or not?
because i installed
and did the Installation in iaian7.com :
http://iaian7.com/webcode/mediaboxAdvanced#installation
and still not working with me
do i need to add the Header in iaian7.com?
thanks
Do not need to add the Header in iaian7.com.
This is a WP plugin for mediaboxAdvanced.
Download link is:http://files.cnblogs.com/cheonnii/lightbox-cheon.info.zip
You can test on this page.
It might be useful to users to note that the lightbox script used here, including all of the examples posted above, are actually from Iaian7.com. The script is called mediaboxAdvanced, and I’d recommend downloading from the original source.
Iaian7.com / John Einselen
Sorry,and thank you for remind me.
I’ve been coupled with
Power by mediaboxAdvanced.
Example Source : http://iaian7.com.
Hello
it’s not working with me
why??
It may be clashes with jQuery
本来想换个lightbox插件的，但是后来发现也不是很有用到，就懒得换了。。
只是炫丽，没什么太大用途。
我开始想发展简约风格了。