Implementing PhotoBoard in Blogger

Want to show off your Photos in a cluttered fashion, then this is the right Plugin for you. Photoboard is based on Mootools framework and gives you the capability to define a space where you can freely Drag your Pictures  (and even move them over each other!).The code is tiny, as it relies heavily on the framework for much of the functionality.

             

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 type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/style.css" rel="stylesheet" media="screen"> 
<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.css" rel="stylesheet" media="screen"> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4-core-yc.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4.2-more.js"></script> 

Now Search for the </body> tag and Paste the following code Above/Before it.

<script src="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.js"></script> 
<script> 
window.addEvent('domready', function() {
 var photos = new PhotoBoard('photo-board');
});
</script> 

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

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

<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/style.css" rel="stylesheet" media="screen"> 
<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.css" rel="stylesheet" media="screen"> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4-core-yc.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4.2-more.js"></script> 


-----------THIS AREA CONTAINS ALL THE PICTURES--------------

<script src="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.js"></script> 
<script> 
window.addEvent('domready', function() {
 var photos = new PhotoBoard('photo-board');
});
</script> 

4.Now for adding the images into PhotoBoard ,See the following Markup below.

<div class="span-24 last">
 <div id="photo-board" name="PhotoBoard_Controller">
  
<div class="photo" style="left: -43px; top: 106px;">
    <img src="s.jpg"width="500" height="375"> 
</div>

<div class="photo" style="left: 73px; top: 137px;">
    <img src="as.jpg"width="500" height="331"> 
</div>

<div class="photo" style="left: 37px; top: 36px;">
    <img src="e.jpg"width="500" height="375"> 
</div>

<div class="photo" style="left: 175px; top: 133px;">
    <img src="r.jpg"width="500" height="336"> 
</div>

<div class="photo" style="left: -32px; top: 69px;">
    <img src="l.jpg"width="500" height="335"> 
</div>

<div class="photo" style="left: 88px; top: 147px;">
    <img src="n.jpg"width="500" height="375"> 
</div>

<div class="photo" style="left: 255px; top: 26px;">
    <img src="l.jpg"width="434" height="262"> 
</div>


</div>
</div>

The First Two Div tags are used for linking the pictures with the plugin and the rest of DIV tags act as containers for the Images. A class "photo" is necessary in each of these pictures. The style attribute used in every container defines the initial position of the picture.You can move the pictures in this area freely ,drag them over each other (Tip: To bring a Picture in the background to the foreground, just drag it to the corner most point and then Bring it Back)


Want to change the Dimensions of the Area occupied by the Photoboard ?
For this open photoboard.css and change the height & width attribute of #photo-board .

5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!