I have recently extracted the Photografia Blog Template By TNB effect of the Photo Galery Light Box Effect where I wish to share with everyone on implementing it on their own sites without having to change their layout. What's a light box effect? When you click on the images, it will popup an alternate box without have to leave the current image page. Try it out ! Another Sample Page Here Using Default Theme Minima Black How you implement into your blog? Step 1: 1. Go to Layout, then Edit HTML. 2. Copy the code below, and paste it right
after ]]></b:skin> and before </head>
<b:if cond="data:blog.pageName == "Portfolio""> <style type="text/css"><br /> #outer-top{background: url(http://i39.tinypic.com/23mmwle.jpg) no-repeat top center}<br /> #outer-wrapper{background: url(http://i43.tinypic.com/2vt2vzn.jpg) repeat-y center}<br /> #outer-bottom{background: url(http://i44.tinypic.com/1zz4yyt.jpg) no-repeat bottom center}<br /> .post {background: #000;}<br /> .post h3{display:none}<br /> .post-footer{display:none}<br /> .date-header{display:none}<br /> #sidebar-wrapper{width: 130px;}<br /> #main-wrapper{width: 680px}<br /> </style> </b:if> <!-- Code for Lightbox --> <b:if cond="data:blog.url != data:blog.homepageUrl"> <script language="Javascript" type="text/javascript"><br />var cssNode = document.createElement('link');<br />cssNode.type = 'text/css';cssNode.rel = 'stylesheet';<br />cssNode.href = 'http://sites.google.com/site/inclusively/jscripts/lightbox.css';<br />cssNode.media = 'screen';<br />cssNode.title = 'using lightbox 2 with GPC';<br />document.getElementsByTagName("head")<br />[0].appendChild(cssNode);<br /><br /> </script> <script src="http://sites.google.com/site/inclusively/jscripts/prototype.js" type="text/javascript"></script> <script src="http://sites.google.com/site/inclusively/jscripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="http://sites.google.com/site/inclusively/jscripts/lightbox.js?" type="text/javascript"></script> <script src="http://sites.google.com/site/inclusively/jscripts/effects.js?" type="text/javascript"></script> <script src="http://sites.google.com/site/inclusively/jscripts/builder.js?" type="text/javascript"></script> </b:if>3. Then, all you got to do is create a post and the Title must be "Portfolio" and put the code as below in the content.
<a href="URL OF YOUR IMAGE" rel="lightbox"><img border="0" src="URL OF YOUR IMAGE" style="height: 110px; width: 110px;" /></a>4. Publish it and everything works. 5. You can do your own hosting for the javascripts and images if you want, incase the owner of the javascripts and images for the sites is down or move or change, it won't affect you near future. Download Javascript Download Images Download Code Hope you like it ! P/S : If you wish to change the TITLE, please kindly rename the Portfolio in the code to something you want, and you have to make sure both title and in the code have to be match in order for the Light Box Effect to works !