blogger jquery Facebox and image viewer Gallery

blogger_jquery_facebox|blogger_jquery_image_gallery|content_viewer

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='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(http://3.bp.blogspot.com/-ISW2GRGR_qY/TlJJ1k_ovcI/AAAAAAAABU8/QmnbzaHjV5k/s1600/b.png);
}

#facebox .tl {
  background:url(http://3.bp.blogspot.com/-HBD69TFIrCA/TlJJ2Ot2QII/AAAAAAAABVU/lC4dKK_WirI/s320/tl.png);
}

#facebox .tr {
  background:url(http://3.bp.blogspot.com/-4HXZ5BCSs0w/TlJJ2re0kZI/AAAAAAAABVc/V1IrL7WD_sc/s1600/tr.png);
}

#facebox .bl {
  background:url(http://2.bp.blogspot.com/-5IOIk_QON8g/TlJJ15mu15I/AAAAAAAABVE/faIO6zrqTrg/s320/bl.png);
}

#facebox .br {
  background:url(http://1.bp.blogspot.com/-N_JF3s0rBaA/TlJJ1yL9TwI/AAAAAAAABVM/Hf2jE_ixwP0/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>

0 Comments | Post a comment:

Post a Comment

Find us on Facebook