Membuat Zoom Image Untuk Gambar Postingan Blogger

Ada yang menarik perhatian saya saat jalan-jalan ke halaman Google Support untuk Google Adsense, saya menemukan sebuah gambar dengan efek zoom.

Kemudian saya berpikir untuk mencoba menciptakan hal serupa untuk gambar postingan Blogger, ya... minimal mempunyai efek zoom yang menyerupai mirip itu hehehe....

Gambar yang saya jumpai itu mempunyai efek zoom menyerupai pada gambar animasi gif di bawah ini.



Akhirnya berhasil saya buat dengan pertolongan jquery, sebagai demonya silahkan lihat pada halaman demo berikut:

DEMO

Jika Anda ingin mencoba zoom image menyerupai demo, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan css style di bawah ini di atas isyarat </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>

Jika gambar thumbnailnya ingin lebih kecil silahkan perkecil width pada css berikut:

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

Kemudian silahkan simpan isyarat javascript ini di atas isyarat </body>

 <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>

Dan pastikan blog Anda sudah memakai jquery library dan font awesome.

Perlakuan blogger terhadap gambar postingan berbeda-beda, ada yang suka dengan size small, medium, large, extra large, atau original, dan ada juga yang menghapus link-nya atau memakai link.

Untuk itu pada javascript di atas sudah saya antisipasi semua size yang mungkin dipakai oleh Blogger supaya gambar postingan tidak buram saat di-zoom kecuali kalau gambar aslinya memang kecil, dan otomatis menghapus link pada gambarnya alasannya ialah kalau mempunyai link maka efek ini tidak akan berfungsi.
Sumber https://www.kompiajaib.com/

Share this post