15 Jun 2011
Implementing mediabox Advanced in Blogger
mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.It provides four different styles.Features:
Supports YouTube and Vimeo videos.
Support for Twitter links.
Videos displayed in the overlay can be played by Apple iOS devices, including the iPhone, iPod Touch, and iPad, along with other mobile devices that support HTML5.
Steps to Add it to Blogger:
1.Login to the Blogger account.
2. Now Go to Design > Edit HTML.
3.Now search for the </head> tag and paste the following code just Above/Before it.
<link href="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv-Minimal.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-core-1.3.2.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-more-1.3.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv.js" type="text/javascript">
</script>
2.Go to the Post/Page you want to add mediabox Advanced and go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<link href="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv-Minimal.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-core-1.3.2.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mootools-more-1.3.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Mediabox%20Advanced/mediaboxAdv.js" type="text/javascript">
</script>
4.Now for adding the images into mediabox Advanced ,Firstly add the image normally using Insert Image button
Now When you see the code in the edit HTMLwindow it would be something like this
| <a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a> |
Make it like this
| <a href=" " class="lightbox" ><img src=" " /></a> |
As you can see we added only a class="lightbox".
To Add Gallery ,this is the code
<a class="lightwindow" href="2.jpg" rel="lightbox[GalleryName]" >image #2</a>
<a class="lightwindow" href="2.jpg" rel="lightbox[GalleryName]" >image #2</a>
Just add a rel tag of the type "lightbox[GalleryName]".
Some Example Code:
Single
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="lightbox" title="Concrete::taken in eastern Michigan "><img alt="Concrete" height="100" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="100" /></a>
Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="lightbox[set1]" title="Concrete::taken in eastern Michigan "><img alt="Concrete" height="100" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="100" /></a> <a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="lightbox[set1]" title="Autumn 1"><img "width="100" alt="Nature1" height="100" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" /></a> <a href="http://dl.dropbox.com/u/27675057/2.png" rel="lightbox[set1]" title="Autumn 2"><img "width="100" alt="Nature2" height="100" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" /></a>
Twitter media
<p>
<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a></p>
<p>
<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a></p>
<p>
<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a></p>
<p>
<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a></p>
<p>
<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid::Red Knapp's Dairy Bar">TwitVid »</a></p>
<p>
<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by <a href="http://twitter.com/iaian7" title="John Einselen" target="_blank">John Einselen</a>">Yfrog image »</a></p>
<p>
<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a></p>
Social video
<p>
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.</p>
<p>
<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a></p>
<p>
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a></p>
<p>
<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a></p>
<p>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="Blue Monster::3D animation - John Einselen">Youtube</a></p>
<p>
<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com video »</a></p>
<p>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a></p>
<p>
<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a></p>
<p>
<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></p>
<p>
<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></p>
<p>
<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="vimeo via quietube.com">Quietube Vimeo »</a></p>
<p>
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a></p>
<p>
<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a></p>
<p>
<a href="http://www.tudou.com/programs/view/KG2UG_U4DMY/" rel="lightbox[social 400 340]" title="www.tudou.com">Tudou »</a></p>
<p>
<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a></p>
<p>
<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="www.youtube.com">YouTube »</a></p>
<p>
<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></p>
<p>
<a href="http://www.veoh.com/watch/v20943320Dz9Z45Qj" rel="lightbox[social 410 341]" title="www.veoh.com">Veoh »</a></p>
<p>
<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a></p>
Social video embed
<p>
Because some social video sites do not use the media ID in the page <span class="caps">URL</span>, you have to use the link given in the <em>embed</em> 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 site’s media player, not the video’s page).</p>
<p>
<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a></p>
<p>
<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></p>
<p>
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a></p>
<p>
<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> (some known issues with embedding limitations)</p>
<p>
<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a> (some known issues with the server refusing links)</p>
<p>
<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a></p>
Flash media
<p>
<span class="caps">SWF</span> files will be embedded directly using the flash plugin.</p>
<p>
<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::Homestarrunner.com flash animation"><span class="caps">SWF</span> animation »</a></p>
<p>
<span class="caps">FLV</span>, MP4, and MP3 files can be played using either <a href="http://nonverbla.de/blog/2008/09/15/nonverblasterhover/">NonverBlaster:Hover</a> or the <a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW Media Player</a>. Given the install base for Flash, this is typically the most reliable way of playing media files.</p>
<p>
<a href="http://iaian7.com/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel"><span class="caps">FLV</span> video »</a></p>
<p>
<a href="http://iaian7.com/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a></p>
<p>
<a href="http://iaian7.com/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a></p>
<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.
<a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div>
<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://vectorform.com/" rel="lightbox[external 80% 660]" title="Vectorform.com">Vectorform.com »</a>
5.Now save the Post/Page and see the magic.
Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
Til next time,
Prayag Verma
at 11:25
