Creating a Zoom Image for Blogger Post Pictures


Something caught my attention when I went to the Google Support page for Google Adsense, I found an image with a zoom effect.

Then I thought of trying to make something similar for a Blogger post image, yeah ... at least it has a zoom effect that is similar like that hehehe ....

Finally I managed to make it with the help of jquery, as a demo, please look at the demo page below:

DEMO

If you want to try zooming in like a demo, please follow the steps below.

Please save the css style below above the code </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.separator img {
  width: 100%;
  height: auto;
}

.new {
  width: 100%!important;
}

.separator {
  width: 50%;
  position: relative;
  transition: all 100ms ease-in-out;
  cursor: pointer;
}

.separator:before {
  content: "f00e";
  font-family: FontAwesome;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 2em;
  background: rgba(255, 255, 255, .6);
  padding: 10px;
  color: #444;
}

.separator.new:before {
  content: "f010";
  font-family: FontAwesome;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 2em;
  background: rgba(255, 255, 255, .6);
  padding: 10px;
  color: #444;
}
/*]]>*/
</style>
</b:if>

If the thumbnail image is smaller, please reduce the width in the following css:

.separator {
  width: 50%;
  position: relative;
  transition: all 100ms ease-in-out;
  cursor: pointer;
}

Then please save this javascript code above the </body> code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumbsmall(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(//s200/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumbmedium(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(//s320/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumblarge(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(//s400/,"/s"+e),r[t].width=e,r[t].height=e}function resizeThumbextralarge(e){for(var r=document.querySelectorAll(".separator img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(//s640/,"/s"+e),r[t].width=e,r[t].height=e}$(".separator a > img").unwrap(),$(".separator").each(function(){$(this).click(function(){$(this).toggleClass("new")})}),resizeThumbsmall("1600"),resizeThumbmedium("1600"),resizeThumblarge("1600"),resizeThumbextralarge("1600");
//]]>
</script>
</b:if>

And make sure your blog already uses jquery library and awesome fonts.

Bloggers treat different posts, some like small, medium, large, extra large, or original sizes, and some delete links or use links.

For that in the javascript above I have anticipated all sizes that may be used by Blogger so that the posting image is not blurred when it is zoomed in unless the original image is indeed small, and automatically removes the link in the image because if it has a link then this effect will not work.