mediaboxAdvanced demo
Based on Lightbox, Slimbox, and the Mootools javascript library, mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.
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.
-CSS3 support
-Elements have been designed with CSS3 effects in mind, making it a cinch to apply rounded corners, shadows, image based borders, or anything else you could want! For those worried about speed, the style sheet includes rules applied only during animation; by default, shadows are turned off while elements scale.
-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.
-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 | Social Video | Flash media | Quicktime | 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" title="Window::taken in <a href="http://www.cityofwabash.com/" title="cityofwabash.com" target="_blank">Wabash, Indiana</a>" class="an7_thumb"><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 truly determined users, it should discourage the vast majority 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="/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>-+
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>You can also include links in a title by encoding HTML characters using their entity name.
+< = <> = >" = "+- -
<a href="/media/mediabox/window.jpg" rel="lightbox" title="Window::taken in <a href="http://www.cityofwabash.com/" title="cityofwabash.com" target="_blank">Wabash, Indiana</a>" class="an7_thumb"><img src="/media/mediabox/thumbs/window.jpg" alt="window" /></a>-+ +
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>Twitter media
+ ++- -
<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a>-+ +
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>+- -
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>-+ +
<a href="http://twiturm.com/ocicc" rel="lightbox[twitter]" title="Twiturm">Twiturm »</a>+- -
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>-+ +
<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>+- -
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>-+ +
<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by John Einselen">Yfrog image »</a>+- -
<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>-+ +
<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a>++ +
<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by John Einselen">Yfrog image »</a>+++
<a href="http://yfrog.us/0ia9mcz" 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=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a>+-
<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a>-mediaboxAdvanced accepts both
+...v= 543650258685and...v= 543650258685&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.+- -mediaboxAdvanced accepts both
...v= 543650258685and...v= 543650258685&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://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</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/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://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>+- -
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>-+ +
<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a>+- -
<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://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://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://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>+-
<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.
++- -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://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://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://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://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://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]" title="www.youtube.com">YouTube »</a>+- -
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" 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>+-
<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.+-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 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>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/browse/videos/category/scifi_and_fantasy/watch/v20072707NWacjBq6" rel="lightbox[social 540 438]" title="www.veoh.com">Veoh »</a>+- -
<a href="http://www.veoh.com/browse/videos/category/scifi_and_fantasy/watch/v20072707NWacjBq6" 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://www.viddyou.com/viddstream?videoid=49456" rel="lightbox[social]" title="viddyou.com">Viddyou »</a>-+ +
<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a>+- -
<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a>-+ +
<a href="http://12seconds.tv/channel/Iaian7/81432" rel="lightbox[social]" title="12seconds.tv">12seconds.tv »</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://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>+-
<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.
++- -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.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>-+ +
<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=100005440,t=1,mt=video" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>+-
<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=100005440,t=1,mt=video" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>-(known issues with embedding limitations)
++- -(known issues with embedding limitations)
-+ +
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>+-
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>-(known issues with the server refusing links)
++- -(known issues with the server refusing links)
-+ +
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>++
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>Flash media
SWF files will be embedded directly using the flash player.
- --+ +
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>+
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>FLV, MP4, and MP3 files can be played using either NonverBlaster:Hover or the JW Media Player. Given the install base for Flash, this is typically the most reliable way of playing media files.
- --+ +
<a href="/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel">FLV video »</a>+- -
<a href="/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel">FLV video »</a>-+ +
<a href="/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a>+- -
<a href="/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a>-+ +
<a href="/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>++
<a href="/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>Quicktime
Files playable with Quicktime (.mov, ,m4v, .m4a, and many others) can use the native QT browser plugin if the MooTools plugin Quickie.js is installed (separate installation, see the download section for more). The overlay height is automatically adjusted to include the 16px controller. Plugin detection is not easily possible on multiple platforms, so this is a less forgiving solution than Flash, but typically far better quality and responsiveness on machines running OSX.
Some errors of note: Opera does not play well with Quicktime on any platform, and Chrome for Mac may not display the controller.
- ----
<a href="http://symboleffects.com/media/2007vfx.mov" rel="lightbox[quicktime 640 360]" title="MOV video::2007 VFX reel - John Einselen">MOV video »</a>-Quickie.js, the helper script for handling QuickTime media, has not been updated to use MooTools 1.3 yet. While mediaboxAdvanced 1.4.x fully supports Mootools 1.3 and does not require compatibility enabled, until Quickie is updated you’ll still need to include Mootools 1.2.x compatibility. For testing purposes, this page does NOT include Mootools 1.2.x compatibility, so the above sample will fail due to Quickie’s use of deprecated code.
+ +++
<a href="http://symboleffects.com/media/2007vfx.mov" rel="lightbox[quicktime 640 360]" title="MOV video::2007 VFX reel - John Einselen">MOV video »</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>+ + + ++++
<a href="#mb_inline" rel="lightbox[inline 360 180]" title="">inline content »</a>+<a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div>
<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 mediaboxAdvanced knows to load it from the current page.It’s also important to note that when mediaboxAdvanced loads an overlay, it recreates the embedded content, instead of moving it from its current location. This prevents any weirdness when closing the overlay (which destroys the overlay content to prevent even more weirdness!), but means that adding custom code to the embedded elements may be messed up (especially attaching events with element references). If possible, element references should use relative methods to accommodate for any position in the DOM. i.e. They shouldn’t depend on a single ID since the elements will be duplicated once copied to the overlay (relative methods such as child, parent, previous, next, and multi-level selectors are typically more flexible).
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 tofalseto 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 thekeyDownfunction (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://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=detroit,+mi&aq=&sll=42.653,-83.14063&sspn=0.026765,0.024848&ie=UTF8&hq=&hnear=Detroit,+Wayne,+Michigan&z=10&ll=42.331427,-83.045754&output=embed" rel="lightbox[external 640 360]" title="Google.com">Google map »</a>+- -
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=detroit,+mi&aq=&sll=42.653,-83.14063&sspn=0.026765,0.024848&ie=UTF8&hq=&hnear=Detroit,+Wayne,+Michigan&z=10&ll=42.331427,-83.045754&output=embed" rel="lightbox[external 640 360]" title="Google.com">Google map »</a>-+ +
<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com »</a>+- -
<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com »</a>-+ +
<a href="http://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.com »</a>+
<a href="http://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.com »</a>
