Creating a Blogger Lightbox Image With Zoom Effects


Answering Kompi's best friend's question in a previous post about zoom image Blogger posts, finally I tried again to modify again the zoom image for the Blogger post image to be like Blogger's default lightbox.

If the post image is clicked, a popup will appear that enlarges the post image. For that, I slightly changed the jquery and css from the previous zoom image.

DEMO

If you want to try it, please follow the steps below.

Please save the css code below above the code </head>, if you have used the zoom image css code yesterday, please replace it with this one.

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

.separator.new {
  width: 80%!important;
  background: #fff;
  position: absolute!important;
  top: 10%!important;
  left: 50%;
  margin-left: -40%!important;
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.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: "×";
  font-family: Arial;
  position: absolute;
  font-weight: 400;
  bottom: 100%;
  top: -10px;
  line-height: 1;
  right: -30px;
  font-size: 2.5em;
  background: none;
  padding: 0;
  color: #fff;
}

.wrap_separator {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 99999
}

@media screen and (max-width:768px) {
  .separator.new {
    width: 90%!important;
    margin-left: -45%!important;
  }
  .separator.new:before {
    top: -35px;
    right: -3px;
  }
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
/*]]>*/
</style>
</b:if>

Then please save the javascript code below above the </body> code, if you have used the zoom image javascript code yesterday, please replace it with this one.

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

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

How to get an awesome font now change you know, please see here: