Implementing Fullsize in Blogger

Fullsize is an attempt to add a new IMG attribute called “fullsize” in the next version of HTML. The idea is simple; create a standardized solution by which browsers handle the image popups rather than javascript/AJAX. Whenever the fullsize attribute is found within the img tag, browsers would tackle the heavy lifting, generating a popup of the full size image.Even though it is not standardized till now but it is available as a Jquery plugin

             

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

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/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/fullsize/jquery.fullsize.minified.js" type="text/javascript">
</script> 
<script type="text/javascript">
 
   $(function(){
    $("div.desc img").fullsize();
   });
  
   
  
</script> 

"desc" in the above snippet should be noted as a div tag of similar id will be used later,in which all the images have to be enclosed

2.Go to the Post/Page you want to add Fullsize 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/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/fullsize/jquery.fullsize.minified.js" type="text/javascript">
</script> 
<script type="text/javascript">
 
   $(function(){
    $("div.desc img").fullsize();
   });
  
   
  
</script> 

"desc" in the above snippet should be noted as a div tag of similar id will be used later,in which all the images have to be enclosed

4.Adding the images into Fullsize is a little different

Firstly inlcude your image in the following way:


<div id="desc">
<img  longdesc="big.jpg" src="small.jpg"  />
</div>

Here longdesc is the attribute which contains the larger version of the image and is related to fullsize


You can have a link in these images if you like:

<div id="desc">

<a href="html.html"><img  longdesc="big.jpg" src="small.jpg"  /></a>

</div>

Fullsize is not like other lightboxes, It only opens the popup window when the magnify icon is clicked ,which appears when the image is hovered over.The following image will explain the it more clearly.

5.Now save the Post/Page.

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.