Images Lightbox Blogger Solutions for Template Problem

Blogger has introducing Lightbox a few days ago, Lightbox is a whole new way to interact with photos. When clicked, images now expand into a shiny new overlay that displays them at their full size for optimal viewing (more info). But, there are problems for some templates that have "z-index for positioning CSS code" and "zooming images feature".

1. Z-Index for positioning CSS code
If your templates have Z-Index for positioning CSS code, you need to make sure that the value is "0". How to change? Go to "Edit HTML" then search "z-index".
Example:

The text box below use CSS Code "Position:Absolute;" and "z-index:99999;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

CLICK THIS IMAGE
2. Zooming Images Feature
If your templates have this feature(like Monte Cristo Template), then you will see 2 images shown when the image clicked. The best solution is by removing you zoom images feature because.

For Monte Cristo Blogger Template, you only need to remove zoom feature on posts page.
Go to "Edit Html" then search this codes
<script src='http://fbtemplate.googlecode.com/files/FancyZoom1.js' type='text/javascript'/>
<script src='http://fbtemplate.googlecode.com/files/FancyZoomHTML.js' type='text/javascript'>
</script>
Replace with this codes
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://fbtemplate.googlecode.com/files/FancyZoom1.js' type='text/javascript'/>
<script src='http://fbtemplate.googlecode.com/files/FancyZoomHTML.js' type='text/javascript'>
</script>
</b:if>

Click here for solution of Templates Error or Not Work Properly, slideshow not work, etc