12 Jun 2011
Implementing CeeBox in Blogger
This is a modal window system built as a jQuery plugin.It can present images, galleries, HTML, inline content, Flash files and remote videos (Facebook, Vimeo, YouTube, Daily Motion, CNN, Metacafe, etc.).Here are some key features of "CeeBox":
iPhone users are automatically redirected to link, (youtube movies launch the youtube app)
CeeBox currently supports Google Video, YouTube, Metacafe, Vimeo, Dailymotion, Spike, iFilm, CNN, Facebook videos and swf files.
With a bit of regex knowhow you can add support yourself for other sites
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.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>Now search for the </body> tag and paste the following code just Above/Before it.
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.swfobject.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.ceebox-min.js" type="text/javascript"></script>
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/css/ceebox-min.css);
</style>
<script type='text/javascript' >
jQuery(document).ready(function(){
debugging = true;
//$().ceebox(); //used to test to make sure the init call works.
//$(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
$(".ceebox").ceebox({borderColor:'#dcdcdc',boxColor:"#fff"});
});
</script>
2.Go to the Post/Page you want to add CeeBox and go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.swfobject.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/js/jquery.ceebox-min.js" type="text/javascript"></script>
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/catcubed-CeeBox-f62b1ad/css/ceebox-min.css);
</style>
<script type='text/javascript' >
jQuery(document).ready(function(){
debugging = true;
//$().ceebox(); //used to test to make sure the init call works.
//$(".ceebox").ceebox({boxColor:'#fff',borderColor:'#525252',textColor:'#333',videoJSON:"js/humor.json"});
$(".ceebox").ceebox({borderColor:'#dcdcdc',boxColor:"#fff"});
});
</script>
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="ceebox" ><img src=" " /></a> |
As you can see we added only a class="ceebox".
To Add Gallery ,this is the code
<a href=" " class="ceebox nameofgallery" ><img src=" " /></a> |
Some Example Code
Single
<a class="ceebox" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a>
Gallery
<ul class="ceebox i">
<li><a href="http://catcubed.com/images/kurtvon.jpg" title="drawing of Kurt Vonnegut">Kurt</a></li>
<li><a href="http://catcubed.com/images/zombie_puppetmaster.jpg" title="Zombie Sock Puppet" class="{boxColor:'#130',textColor:'#dfd'}">Zombie Puppet</a> color of background at text set via metadata</li>
<li><a href="http://catcubed.com/images/balsa-man.jpg" title="Balsa Man 2008 as the sunsets. Oh boy isn't it pretty! Didn't get as nice of a picture this time.">Balsa Man</a></li>
<li><a href="http://farm3.static.flickr.com/2642/3894718411_88fe1d2968.jpg" title="16th Indian Tacos (photo by sninky-chan)">16th Indian Tacos</a></li>
<li><a href="http://tr-tr.facebook.com/profile/pic.php?oid=AAAAAQAQ_W8eL0hDl1i9pyC5HlMBWwAAAA_UlK1k0GmRW2Jc1JOQvcPL&size=normal" rel="image">photo</a> photo link does not contain jpg but we are forcing CeeBox to recognize it as an image with rel="image"</li>
</ul>
Videos,Images,Iframes
<ul class="ceebox mixed {videoWidth:200}">
<li><a href="http://www.youtube.com/watch?v=G_5htGZkp9g" title="Balsa Man 2009 Video" >YouTube: balsa man vid</a></li>
<li><a href="http://www.youtube.com/watch?v=__GhJl_UQg0" title="Machine with oil" class="{videoGallery:false}">Machine with Oil</a> set to not be in gallery</li>
<li><a href="http://www.vimeo.com/5606758" title="Awesome Aquarium">link to vimeo video</a></li>
<li><a href="http://www.facebook.com/video/video.php?v=238358730483" class="{videoWidth:400,boxColor:'#bbf',borderColor:'#db0 #aa0',borderWidth:'12px'}" title="Lame Facebook Video">link to facebook video</a> (videoWidth set to 400, boxColor set to a light blue, and borderColor set to orange via metadata)</li>
<li><a href="http://farm3.static.flickr.com/2642/3894718411_88fe1d2968.jpg" title="16th Indian Tacos (photo by sninky-chan)">16th Indian Tacos</a></li>
<li><a href="http://www.catcubed.com" title="Catcubed: My blog">Catcubed</a></li>
<li><a href="http://www.spike.com/video/crazy-heart/3292468" title="Crazy heart" rel="width:600" class="{video:false,html:false}">Spike.com: Crazy Heart Trailer</a> Set to not display via metadata</li>
<li><a href="http://www.ifilm.com/video/2861849">iFilm: Swear Jar</a> Note: this is an old link. iFilm forwards to spike.com but CeeBox still works </li>
<li><a href="http://us.cnn.com/video/?/video/world/2009/11/18/amanpour.rwanda.cnn" >CNN: Rwanda Then and Now</a></li>
<li><a href="http://www.metacafe.com/watch/3740158/the_wolfman_movie_trailer/" >Metacafe: The Wolfman Movie Trailer</a></li>
<li><a href="http://www.colbertnation.com/the-colbert-report-videos/256451/november-19-2009/ak-47-designer-celebrates-his-birthday---john-pike" rel="ratio:1.3333">Colbert: AK-47 designers birthday</a> Colbert supported via the humor.json</li>
<li><a href="http://www.thedailyshow.com/watch/tue-november-17-2009/submission-accomplished" rel="videoId:256344 ratio:4:3">Daily Show: Submission Accomplished</a> NOTE: ceebox does not support Daily Show videos natively. It requires the humor.json file to be loaded and a videoId to be on the rel</li>
<li><a href="http://www.uctv.tv/search-details.aspx?showID=16803">uctv</a></li>
</ul>
Daily Motion Video
<a class="ceebox" title="BMW M3 auf dem Nürburgring" rel="600 400" href="http://www.dailymotion.com/video/x3j545_bmw-m3-auf-dem-nurburgring_auto">
<img class="video-thumb" alt="BMW M3 auf dem Nürburgring" src="http://ak2.static.dailymotion.com/static/video/149/139/5931941:jpeg_preview_medium.jpg?20090120063245"/>
</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 10:49
