Implementing Control.Window in Blogger

Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are also present.



             

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 src="http://dl.dropbox.com/u/27675057/Control.Window/all.js" type="text/javascript"></script> 

Now search for ]]></b:skin> And copy the following code just Above/Before it

#control_overlay {
background-color:#000;
}

.modal {
background-color:#fff;
padding:10px;
border:1px solid #333;
}

.tooltip {
border:1px solid #000;
background-color:#fff;
height:25px;
width:200px;
font-family:"Lucida Grande",Verdana;
font-size:10px;
color:#333;
}

.simple_window {
width:250px;
height:50px;
border:1px solid #000;
background-color:#fff;
padding:10px;
text-align:left;
font-family:"Lucida Grande",Verdana;
font-size:12px;
color:#333;
}

.window {
background-image:url("http://saibaba.googlecode.com/files/window_background.png");
background-position:top left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:10px;
font-family:"Lucida Grande",Verdana;
font-size:13px;
font-weight:bold;
color:#fff;
text-align:center;
min-width:150px;
min-height:100px;
}

.window .window_contents {
margin-top:10px;
width:100%;
height:100%;
}

.window .window_header {
text-align:center;
}

.window .window_title {
margin-top:-7px;
margin-bottom:7px;
font-size:11px;
cursor:move;
}

.window .window_close {
display:block;
position:absolute;
top:4px;
left:5px;
height:13px;
width:13px;
background-image:url("http://saibaba.googlecode.com/files/window_close.gif");
cursor:pointer;
cursor:hand;
}


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



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


<script src="http://dl.dropbox.com/u/27675057/Control.Window/all.js" type="text/javascript"></script> 

<style>

#control_overlay {
background-color:#000;
}

.modal {
background-color:#fff;
padding:10px;
border:1px solid #333;
}

.tooltip {
border:1px solid #000;
background-color:#fff;
height:25px;
width:200px;
font-family:"Lucida Grande",Verdana;
font-size:10px;
color:#333;
}

.simple_window {
width:250px;
height:50px;
border:1px solid #000;
background-color:#fff;
padding:10px;
text-align:left;
font-family:"Lucida Grande",Verdana;
font-size:12px;
color:#333;
}

.window {
background-image:url("http://saibaba.googlecode.com/files/window_background.png");
background-position:top left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:10px;
font-family:"Lucida Grande",Verdana;
font-size:13px;
font-weight:bold;
color:#fff;
text-align:center;
min-width:150px;
min-height:100px;
}

.window .window_contents {
margin-top:10px;
width:100%;
height:100%;
}

.window .window_header {
text-align:center;
}

.window .window_title {
margin-top:-7px;
margin-bottom:7px;
font-size:11px;
cursor:move;
}

.window .window_close {
display:block;
position:absolute;
top:4px;
left:5px;
height:13px;
width:13px;
background-image:url("http://saibaba.googlecode.com/files/window_close.gif");
cursor:pointer;
cursor:hand;
}

</style>


4.Now for adding the images into Control.Window ,Firstly add the image normally using Insert Image Button


Now When you see the codein the edit HTML window it would be something like this

<a title="1 tes" href="large3.jpg"><img src="small3.jpg" /></a>


Make it like this 







<a id="styled_window_one" href="large3.jpg"><img src="small3.jpg" /></a>


As you see we only added id tag namely "styled_window_one".Now link this to the lightbox using the JavaScript snippet below:

<script> 
document.observe('dom:loaded',function(){

var window_factory = function(container,options){
var window_header = new Element('div',{
className: 'window_header'
});
var window_title = new Element('div',{
className: 'window_title'
});
var window_close = new Element('div',{
className: 'window_close'
});
var window_contents = new Element('div',{
className: 'window_contents'
});
var w = new Control.Window(container,Object.extend({
className: 'window',
closeOnClick: window_close,
draggable: window_header,
insertRemoteContentAt: window_contents,
afterOpen: function(){
window_title.update(container.readAttribute('title'))
}
},options || {}));
w.container.insert(window_header);
window_header.insert(window_title);
window_header.insert(window_close);
w.container.insert(window_contents);
return w;
};

var styled_window_one = window_factory($('styled_window_one'));


});
</script>


There is option for overlay too,here is the customized snippet for it:



<script> 
document.observe('dom:loaded',function(){

var modal = new Control.Modal($('styled_window_one'),{
overlayOpacity: 0.75,
className: 'modal',
fade: true
});

});
</script>


Another interesting option available in this lightbox is the ability to move or drag two lightbox windows ,which are open at the same time ,over each other.This can be achieved by the following snippet


<script> 
document.observe('dom:loaded',function(){

var window_factory = function(container,options){
var window_header = new Element('div',{
className: 'window_header'
});
var window_title = new Element('div',{
className: 'window_title'
});
var window_close = new Element('div',{
className: 'window_close'
});
var window_contents = new Element('div',{
className: 'window_contents'
});
var w = new Control.Window(container,Object.extend({
className: 'window',
closeOnClick: window_close,
draggable: window_header,
insertRemoteContentAt: window_contents,
afterOpen: function(){
window_title.update(container.readAttribute('title'))
}
},options || {}));
w.container.insert(window_header);
window_header.insert(window_title);
window_header.insert(window_close);
w.container.insert(window_contents);
return w;
};

var styled_window_one = window_factory($('styled_window_one'));
var styled_window_two = window_factory($('styled_window_two'));

});
</script>

This snippet is similar to first one but the only difference being the highlighted line (which technically contains a second Variable for another image).To implement it just change the id of the second image to styled_window_two.




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.


             

0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger