blogger jquery Facebox and image viewer Gallery

Image Demo:

Image Eye

Content View Demo:

View DIV with id="mydiv" on the page

This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none"
Free Blogger Layouts (you can also embed some of adsense code here to make money)

How to install to blogger

Step 1:

Go to EDIT HTML and Past the below code above </head>

<script src='http://js-files-hosting-and-sharing.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://js-files-hosting-and-sharing.googlecode.com/files/facebox.js' type='text/javascript'/>

<script type='text/javascript'>
    jQuery(document).ready(function($) {
      $(&#39;a[rel*=facebox]&#39;).facebox()
    })
</script>

step 2:

past the below css code above ]]></b:skin> or Go to Design>Template Designer>Advanced>Add CSS past the code and Apply to Blog

/*--facebox
-------------------------*/
#facebox .b {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPu-lrXniLWrWcAZMtn3F4RpDNHCyMP5QJff8NpDLdRxenQltvz93jLTVxXjXsZrR6GHEinit26pBHmAexs_UUTQmWpe1YWp3he2SIFuqExdlPZsZ9feh48jaYOSB2Mb1-SxxmRqniOW9/s1600/b.png);
}

#facebox .tl {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4_B57tqzjbR514q1puzyFAXrYOs8zW1TyGr7kaXjCTV7kf75GKQRb92MUVYc2LTIu8Ch9TxH7PjtCQujHJvrC1ybi6ruOpXgXmGPFd8J9shKN0zLkZQD3QcbuGxl1_rvUqYW29zUNOAI_/s320/tl.png);
}

#facebox .tr {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENbqHcSUlbze7yDpjhZjKzNiI9D7jbXJfpStGf3h8K5J6bOuTyF0suoWTzfxcxywBT5xbsAYMGYNHPHViSUavhluNxKptncQQVk9AiUYv7cmHu-Y46VAlMvXoaVIyjhKdi11tqUCy3hb0/s1600/tr.png);
}

#facebox .bl {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVY8yKbk1FG7_-By3ql2nElRkXiVjDW-dzDe8orT_jU3FrAmnEO13iuEVpyz64kCnb0CponpE9lkEkhEQiMILQTjoPw0O7h3wGLxVRZRgO1htR_ggP7RNGLpPca6JMKBjnZ50OhWj-yV_R/s320/bl.png);
}

#facebox .br {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimswBOEb9ysMVbCoFS4UUZw72Yy-38NXKclv6OLD8IINjvdeBuKoNM3Os2R559yDCMFk1lkX7mHFhJotxVhK0-k9rG5UGckwOtLdLOMDh8J48fu-F-JTJ7_GvLW28tLAEX-84nKHQPSqM/s320/br.png);
}

#facebox {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
}

#facebox table {
  margin: auto;
  border-collapse: collapse;
}

#facebox .body {
  padding: 10px;
  background: white;
  width: 370px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border:0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 10px;
  text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

for image gallery use this code:

<a href="image.jpg" rel="facebox">Image Eye</a>

div facebox jquery use:

<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p> <div id="mydiv" style="display:none"> This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none" <br />(you can add some adsense code here to be displyed when clicked) </div>