scribble

Scribble

About Blog GitHub
‹
›

01 Jul 2011
Implementing SuperBox in Blogger

Superbox is a jQuery plugin for creating easily customizable modal windows (lightbox-like).

It is an accessible script, uses the rel attribute of an element for triggering & href attribute is used for defining the source to be displayed.

It can display any type of content as every HTML content can be presented. But by default, images (single or gallery mode), text content & iframes are supported

Dimensions of the modal window can be choosen to resize automatically according to the content or width & height can be defined for a standard size.



             


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/SuperBox/demo.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox.css" media="all" rel="stylesheet" type="text/css"></link>
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(http://saibaba.googlecode.com/files/loaderss.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox-min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>



2.Go to the Post/Page you want to add SuperBox and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<link href="http://dl.dropbox.com/u/27675057/SuperBox/demo.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox.css" media="all" rel="stylesheet" type="text/css"></link>
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(http://saibaba.googlecode.com/files/loaderss.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/SuperBox/jquery.superbox-min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>


4.Now for adding the images into Facybox ,Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTML Window 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 rel="superbox[image]" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

As you see we only added a rel="superbox[image]"


For Adding Gallery:
 rel="superbox[gallery][GalleryName]" In all the elements of the Gallery


For Adding IFrame:
 rel="superbox[iframe]"


For Inline Content:
rel="superbox[content]"


For AJAX Content
rel="superbox[ajax]


Some Example Code:


Single
<a href="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5.jpg" rel="superbox[image]">Superbox picture (auto dimensions)</a>  
<a href="http://farm4.static.flickr.com/3111/2605394848_e11968abaf.jpg" rel="superbox[image][700x]">Superbox picture (defined width)</a>  
<a href="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab.jpg" rel="superbox[image][x600]">Superbox picture (defined height)</a>


Gallery
<a href="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3269/2605397024_73497a6cf5_s.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://farm4.static.flickr.com/3111/2605394848_e11968abaf.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3111/2605394848_e11968abaf_s.jpg" width="75" /></a>&nbsp;&nbsp;<a href="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="http://farm4.static.flickr.com/3031/2605388478_b8ae228aab_s.jpg" width="75" /></a>


Iframe
<a href="http://en.wikipedia.org/wiki/Special:Random" rel="superbox[iframe]">Iframe Superbox (default dimensions)</a>
<a href="http://en.wikipedia.org/wiki/Special:Random" rel="superbox[iframe.wikipedia][750x500]">Iframe Superbox (defined dimensions)</a>


Inline
<div id="mode-content">
Generates a box containing an element of the page.
The link will be external, and will point to an element of the page using its <code>id</code> attribute.
This element will be copied to appear in Superbox.
</div>

<a href="#mode-content" rel="superbox[content]">SuperBox element</a>
<a href="#mode-content" rel="superbox[content][500x400]">SuperBox element (dimensions)</a>

AJAX
<a href="http://pierrebertet.net/projects/jquery_superbox/crockford.html" rel="superbox[ajax][crockford-ajax.html]">AJAX SuperBox</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 Loader.gif is 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:55

scribble

About Blog GitHub