Fullsize Jquery Image Script Add to Blogger

Nice effect with the application and fullsize images in the popup window can display. Demo page at the bottom of the box that appears when you roll over the pictures when you click you will understand what I mean.

1. Location - Edit Html Templates expand widgets is called section.
   
2. Html template
   
   ]]></b:skin>
   
   following code immediately above and we are looking for add css code.
   
   .fullsize-icon {
position: absolute;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
background: transparent url(http://i36.tinypic.com/2s17rmh.png) no-repeat left top;
z-index: 950;
cursor: url(http://sites.google.com/site/teknomobi/Home/fullsize.cur), auto;
}

.fullsize-loading, .fullsize-wrapper {
position: absolute;
margin: 0;
padding: 0;
z-index: 999;
}

.fullsize-loading {
height: 51px;
width: 51px;
background: transparent url(http://i37.tinypic.com/30cpu6v.png) no-repeat left top;
}

.fullsize-loading-inner {
height: 100%;
width: 100%;
background: transparent url(http://i34.tinypic.com/2poazx3.gif) no-repeat center center;
}

.fullsize-image {
display: block;
}

.fullsize-title {
position: relative;
width: 100%;
margin: 0;
padding: 5px 0;
min-height: 14px;
color: #fff;
font-weight: bold;
font-size: 11px;
font-family: "Lucida Grande", sans-serif;
text-shadow: 0 0 1px #000;
background: transparent url(http://i36.tinypic.com/23uopqr.png) repeat-x left top;
}

.fullsize-title-text {
text-align: center;
margin: 0 auto;
width: 100%;
}

a.fullsize-close {
position: absolute;
display: block;
margin: -15px 0 0 6px;
width: 16px;
height: 16px;
text-decoration: none;
z-index: 1000;
background: transparent url(http://i38.tinypic.com/5xo5r9.png) no-repeat left top;
}

/* Safari 3.0 and Chrome rules here */
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.fullsize-close {
margin-top: -14px;
}
}

a.fullsize-close:hover {
background-position: right top;
}

.fullsize-close {
cursor: pointer;
}

/* Shadows */

.fullsize-sh-wrap {
position: absolute;
z-index: 980;
}

.fullsize-sh-top, .fullsize-sh-body, .fullsize-sh-bottom {
width: 100%;
}

.fullsize-sh-top-l, .fullsize-sh-top-m, .fullsize-sh-top-r, .fullsize-sh-bottom-l, .fullsize-sh-bottom-m, .fullsize-sh-bottom-r {
background-position: left top;
background-repeat: none;
background-color: transparent;
height: 20px;
}

.fullsize-sh-top-l {
float: left;
width: 22px;
background-image: url(http://i33.tinypic.com/57jvl.png);
}

.fullsize-sh-top-m {
margin: 0 22px;
background-image: url(http://i35.tinypic.com/del5wm.png);
background-repeat: repeat-x;
}

.fullsize-sh-top-r {
float: right;
width: 22px;
background-image: url(http://i35.tinypic.com/16hqefo.png);
}

.fullsize-sh-bottom-l {
float: left;
width: 22px;
height: 24px;
background-image: url(http://i33.tinypic.com/2qamnx0.png);
}

.fullsize-sh-bottom-m {
margin: 0 22px;
height: 24px;
background-image: url(http://i38.tinypic.com/rbfpxl.png);
background-repeat: repeat-x;
background-position: left bottom;
}

.fullsize-sh-bottom-r {
float: right;
width: 22px;
height: 24px;
background-image: url(http://i37.tinypic.com/24etjmb.png);
}

.fullsize-sh-body {
background-image: url(http://i36.tinypic.com/2yjvbdj.png);
background-repeat: repeat-y;
}

.fullsize-sh-body-r {
float: right;
height: 100%;
width: 11px;
background-image: url(http://i36.tinypic.com/j8ku28.png);
background-repeat: repeat-y;
}
   
3. Html template again
   
   </head>
   
   code immediately above the place the following code We are.
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/teknomobi/Home/jquery.fullsize.minified.txt' type='text/javascript'/>
<script type='text/javascript'>jQuery(document).ready(function(){jQuery(&quot;img&quot;).fullsize([]);});
</script>

   
   Now, the editing of the template is completed. We save the template.
4. Add a picture we will use our post code is as follows.
   
   <div class="separator" style="clear: both; text-align: center;">
<img border="0" src="Resim Linki" longdesc="Resim linki" tooltip="linkalert-tip" width="320" height="240" title='' />
</div>
   

Value width of the image in the case where a small width, height value, center value shows the layout. You can change them according to your own. In addition, pictures are hosting your own blog. Normally formed from the code official remi install and get the address of the connection and give it the code by deleting the code phrases you can use the above instead.

Here you can download the necessary files in your account can host your own sites.google. Css code contained in its own fullsize.cur file upload and link to your account sitesgoogle change the link. Also in the same way jquery.fullsize.minified.txt file and upload it to your account sitesgoogle change hyperlinks. Application host application itself Fullsize jQuery problem can not be brought to sitesgoogle the host. The normal application directly jQuery api google speed having trouble because you do not pull over. To avoid future trouble at times in the bar would be useful in your own field