Lightwindow Install plugin for blogspot

Would not you ever seen the effect magnified image is clicked after using the lightbox plugin. There is a plugin that can create similar effects, in addition can apply to text links (no lightbox functions), which is Lightwindow. Note Lightwindow using Scriptaculous library should be having conflicts with jQuery library. If your capital is k devotees should apply jQuery plugin. If you prefer to use this plugin can be applied because later I will introduce several unique applications from Lightwindow for blogspot.
Demo .
To install the plugin, please follow the steps below.

Step 1. Sign Blogger >> Design >> Edit HTML. Place the following code before the tag </ head> .

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'/>
< script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js'/>
< script src='/lightwindow.js' type='text/javascript'/>
< style type='text/css'>
#lightwindow_overlay {display: none; visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 500;}
#lightwindow {display: none; visibility: hidden; position: absolute; z-index: 999; line-height: 0px;}
#lightwindow_container {display: none; visibility: hidden; position: absolute; padding: 0; margin: 0;}
* html #lightwindow_container {overflow: hidden;}
#lightwindow_contents, #lightwindow_loading {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 40px #DDD inset;-webkit-box-shadow:0 0 40px #DDD inset;box-shadow:0 0 40px #DDD inset;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=&#39;#FF000000&#39;, EndColorStr=&#39;#FF333333&#39;);}
#lightwindow_contents {background-color:transparent;overflow:hidden;padding:15px;position:relative;z-index:0;}
#lightwindow iframe {background-color:#EEE;}
#lightwindow_loading {background-color:#333;height:100%;left:0;position:absolute;top:0;width:100%;z-index:9999;}
#lightwindow_loading img {float:left;margin:30px 0 0 50px;}
#lightwindow_loading span {color:#DDD;float:left;font-size:14px;margin:42px 0 0 5px;}
#lightwindow_loading span a {color:#FFF;cursor:pointer;}
#lightwindow_loading_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation {position: absolute; top: 0px; left: 0px; display: none;}
#lightwindow_navigation_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation a, #lightwindow_navigation a:link, #lightwindow_navigation a:visited, #lightwindow_navigation a:hover, #lightwindow_navigation a:active {}
#lightwindow_previous, #lightwindow_next {width: 49%; height: 100%; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQzRQJO_7zXhI1reJ5l3gdLezPazSoRtKmBwoIytmFc1hZVzg-Q53M820Pt196QSUS4NbTs5mkmKm6-2cnnS259zpHpA2mTSKFA8TsVnOi5fgvjo8wNatHhwi8yygN17sWufXMfBk-e0/s0/blank.gif) no-repeat; display: block;}
#lightwindow_previous {float: left; left: 0px;}
#lightwindow_next {float: right; right: 0px;}
#lightwindow_previous:hover, #lightwindow_previous:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9_ACRuxlpPzAr2i4rwaKoy8jo-wDjGPSj75CW_NALDxTOCI4F91e50FN4NUYvDna51vmZFmd3KfNYm3fXea-FyRT7Gor6PdVtKBzja28Wmjv7gudUwFK3q2pW0AuG17TEDr0QPGrFc0/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPFQE9o-V121-IJqu7xosTE89Bl0ZJJkIMXeDIRAc0y0V6ONTZ0SRvUyLiuTXxOMqd6n5J3pdoKFFJlk_ARSyvDNAVmYujmBaIwAfqds2jEALMIUbvhIL-BKuR7ewRHH9hBcT_OpA31o/s0/LWicoright.png) no-repeat right 50%;}
#lightwindow_previous_title, #lightwindow_next_title {display: none;}
#lightwindow_galleries {display:none !important;}
#lightwindow_data {position: absolute;}
#lightwindow_data_slide {display:none !important;}
#lightwindow_title_bar {height: 25px; overflow: hidden;}
#lightwindow_title_bar_title {color:#DDD;float:left;font-size:14px;line-height:25px;margin-left:20px;text-align:left;}
a#lightwindow_title_bar_close_link, a#lightwindow_title_bar_close_link:link, a#lightwindow_title_bar_close_link:visited {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 17px #FFF inset;-webkit-box-shadow:0 0 17px #FFF inset;box-shadow:0 0 17px #FFF inset;background-color:#000;color:#AAA;cursor:pointer;display:block;float:right;font-family:Verdana;font-weight:bold;height:22px;line-height:22px;padding:0 30px;text-align:right;text-transform:lowercase;}
a#lightwindow_title_bar_close_link:hover {color:#FFF;background-color:#222}
#lightwindow p {color: #000; padding-right: 10px;}
a.lightwindow {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSQCobVhXjkjBc2CBoBgZyhX7t5MbSh9a-lAX3jlJ5B_Vqw2hyWWdfN1gYlXNU_FFhXx2HXh18K1aHwmCGZk438u9nfeG1N8JQDADKqzg-8PBQGpMHt2GarZNnAjMpYwOfhTNAXHvLZE/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSQCobVhXjkjBc2CBoBgZyhX7t5MbSh9a-lAX3jlJ5B_Vqw2hyWWdfN1gYlXNU_FFhXx2HXh18K1aHwmCGZk438u9nfeG1N8JQDADKqzg-8PBQGpMHt2GarZNnAjMpYwOfhTNAXHvLZE/s0/magplus.gif), pointer !important;}
< /style>

Js file you download lighwindow.js then upload to your host or on GoogleCode to use for your blogspot. Save Template.
Step 2. Setting up the HTML structure for the links as follows:

<a class='lightwindow' href='#' params='lightwindow_width=600,lightwindow_height=600,lightwindow_loading_animation=true' rel='nofollow' title='Title Text'>Text Link</a>
Note width adjustment (600) and height (600) corresponds to the width and height of the window effect that is compatible with each case of application. In order to apply this plugin for images, you can use the HTML structure like this: < a class = "lightwindow" href = " URL_ image "> <img src =" URL_ image "width =" 350 px "height =" 250 px "/> </ a>