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

Fancybox in Blogger Jquery Image Zomming Script

Earlier Colorbox, Multibox , Lightbox and I was doing Fullsize expression extensions. Now, how to use blogs Blogger Fancybox plugin and optimize the files I needed.

Lightbox is an alternative application Fancybox application. Unlike application works with jQuery lightbox. This application, according to Lightbox Fancybox application performance one step ahead is making.

Application is the most beautiful side Fancybox picture on the blog, we've added an extra regulation is not needed. So that after you add pictures blog edit html section of the rel or class type class should not let us enter. Of course, if you want to add a title that you add the picture again in edit html section must include class title

Stages of implementation to integrate Blogger Fancybox in turn tell.

1. First, take a backup of our blog template code.

2. The following code between the template code we are looking for.

</head>

This code would add the following code immediately above.

<link href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>

3. We save our template.

4. Now, the images you add blogs with fancybox application will open. The following extra editing codes.

To show pictures in groups in order to show that after adding the pictures from the summer section of the edit html files class codes must assign the following rel.

rel="group" title="image title"

Add your blog to link you want to display the page without leaving the class label must include the following link.

class="iframe"

Before

<a href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a>

After

<a class="iframe" href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a>

Application to see how it works Fancybox blogger blogs have been created for the Fancybox Demo page you can browse Fancybox.

Js files are hosted on my my private space. To avoid future problems in your own area here to download and install the file in the theme links to the js file, please replace the link! ..