blogger jquery Facebox and image viewer Gallery


Image Demo:

Content View Demo:

View DIV with id="mydiv" on the page

How to install to blogger

Step 1:

Go to EDIT HTML and Past the below code above </head>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

<script type='text/javascript'>
    jQuery(document).ready(function($) {

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 .b {

#facebox .tl {

#facebox .tr {

#facebox .bl {

#facebox .br {

#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 {

#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>

0 Comments | Post a comment:

Post a Comment

Find us on Facebook