Recently Google's BLogger has been redesigned with much more new features. The original openness features are still available. Still I don't like the way in Blogger to resize images in narrow width so that it is hard to see. I understand that exploded image would distract the whole blog layout. Therefore, I have been thinking about adding a feature to zoom images in Blogger.
Last weekend I spent about whole day to find a suitable solution and enhanced it with my updates. The strategy is based on jQuery and CSS. I found it in a blog in CSS Globe. It is really easy to use. Add a CSS and two script links to Blogger HTML settings first. After that it is ready for use.
For example, to add zoom feature to an image in blog, add class called as "zoom" to the image's parent anchor HTML tag:
<a class="zoom" href="test.png">
<img src="test2.png" border="0" width="300">
</a>
It works great; however, there is one thing I found not perfect. In case of an image with narrow height, there is a big gap on the top in its zoomed image. I would like to let the zoom image auto-adjust its height: either to the image height to at most the height defined in the CSS.
Here are the steps to add my enhanced zoom feature to Blogger.
Update Blogger HTML Settings
The first thing to do is to update your Blogger HTML settings. It is recommended to backup your HTML settings before any changes.
Step 1. In your Blogger Dashboard, click Template and then Edit HTML
Step 2. Find your blog CSS sections. Those CSS definitions should be ended by
Step 3. Copy and post the following CSS codes into your CSS sections before ]]></b:skin>
/* following css for zoom effect is copied from
http://www.spiceupyourblog.com/2011/05/amazing-jquery-image-zoom-effect-for.html
*/
#easy_zoom{
/* default width and height, those settings can be optionally set in
anchor element attribute: zoomboxwidth and zoomboxheight */
width:500px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
The top and left values are the position of zoom box. You adjust above top and left values for your blogger template. The width and height values are default zoom box size. You may change them according to your needs.
Step 4. Find the following piece of codes in your HTML template:
This is the end of head tag in your HTML template.
Step 5. Before the head tag, copy the following codes:
The above codes add links to jQuery library and my updated EasyZoom library to you blogger. The libraries contains a function easyZoom for any HTML anchor tag with class "zoom" to add mouse hover event, i.e., zoom effect to your images!
Step 6. Save your new HTML template.
You do this (6 steps) only once. Now it is ready for you add zoom feature to your blogs.
Edit Image in a Your Blog
Now you can add zoom effect to your images in your blog posts. Normally, after your adding images to your posts, Blogger will add some HTML tags for your image. You should simplify those tags like this:
<a class="zoom" href="test.png">
<img src="test2.png" width="300" ...>
</a>
The key to enable zoom feature is to add "zoom" class in anchor or a HTML tag. Here ... are any other settings you may want to your image, for example, align to left, center or right, or border. The width attribute value is based on your blog layout, and you may change it for best result.
You only need to update your Blogger HTML once in above 6 steps. To add zoom feature to your image, all you have to do is to enable HTML edit and to add "zoom" to your anchor tag for the image. Basic knowledge about HTML will be great help, but it is not required. My recommendation is to learn some basic HTML and you will be able to enhance your blog with great self-satisfaction.
Examples
Here are some examples of images with zoomable feature. The first one is the log of jQuery without customized height. As you can see there is big gap in the zoom box:
and again with customized height to remove the gap:
John Resig is an application developer at Khan Aademy. He was a JavaScript tool developer for Modizlla Corporation. He is also the creator and lead developer of the jQuery JavaScript library.
jQuery is a crosse-brower JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
Advanced Topics
This technique is based on jQuery library. jQuery is a great JavaScript library with a rich APIs to enhance HTML documents. One of great features is that jQuery let developers concentrate on codes without worrying various browsers. It just works. Another feature is that jQuery is so tiny small. Developers can easily add features based this platform, just like this EasyZoom library.
In addition to jQuery library, you need to add this EasyZoom JavaScript library. I put my updated codes on Google Code Project. It is an Open Source library. You can take it or modify for your needs. I'll keep my codes there forever, but if you concern its availability, you may move it to your site, your Google Code Project or any other places.
The logic of this zoom feature is based on JavaScript and CSS. JavaScript codes above will be loaded when your blog is opened first time. The codes will find all anchor HTML elements with class "zoom" and pass those elements to JavaScripts. The magic happens in the function call, where mouse hover event, a dynamic zoom box with image referenced in the anchor, and CSS style are created.
Another note about this is that this technique is based on two images in your blog. Blogger normally add them when you update an image. The image element is a smaller size image and it is displayed in your blog. Since the image is smaller, your blog loading process is faster. Anther image Blogger added is an image its parent anchor element, with large size image. It is only be loaded when the image is clicked. This image is used in the zoom box.
I may add additional features to this easy-zoom library. For example, add a caption for the zoomed image. The caption can be easily defined in your blog.
References
Read More...
Collapse...
Yesterday I was asked to help to resolve some issues for a piece of PL/SQL codes, which was provided by our client support. I was working on only error issues, nothing related to its logic. I spent about 2 hours and finally almost got the script running OK (it was too late in the afternoon). Here are two notes about the work.
Posts
