Make Full Screen Image Viewer & Zoom Hover use jQuery

Koben in the net, ingin berbagi tutorial dari website dynamicdrive (sebuah tempat untuk mendapatkan DHTML & Javascript gratis dan asli untuk meningkatkan situs web!) Original posted title is "jQuery Full Screen Image Viewer" Setelah melihat, ternyata trik untuk menampilkan gambar secara mandiri itu di buat dengan menggunakan 2 buah plugin jQuery! fullscreen image viewer dan zoomio. Jika anda tertarik memasang trick jQuery ini, maka kita akan mendapatkan 2 gaya dalam menampilkan image? Yang pertama, gambar akan ditampilkan dengan metode klik dan akan tampak secara full, lalu bisa zoom with hover! Yang ke dua, gambar akan ditampilkan dengan gaya zoom saja!
Dengan kelebihan URL link gambar hasil upload hostingan blogspot, cocok sekali trik ini ;) Seperti biasa, saya di sini hanya melakukan optimalisasi kode & script. Dan membantu (kalau terbantu) menerangkan cara pemakaiannya saja :D Masukan seluruh kode CSS di tempat biasa

/* ddfullscreenimageviewer */
body.revealviewer {
overflow: hidden;
}
#fullscreencanvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: white;
z-index: 9000;
pointer-events: none;
display: block;
transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#fullscreencanvas img {
position: relative;
cursor: pointer;
transition: all .5s;
}
div#closeviewer {
/* Large x close button */
width: 35px;
height: 35px;
overflow: hidden;
display: block;
position: fixed;
cursor: pointer;
text-indent: -1000px;
z-index: 100000;
top: 10px;
right: 10px;
}
div#closeviewer::before, div#closeviewer::after {
/* render large cross inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: black;
top: 50%;
opacity: 0;
margin-top: -3px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
}
body.revealviewer div#closeviewer::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 1;
}
/* Loading DIV CSS */
#fullimageloadingdiv, #zoomioloadingdiv {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: hidden;
overflow: hidden;
display: flex;
pointer-events: none;
z-index: 10000;
align-items: center;
justify-content: center;
background: white;
}
#fullimageloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* zoomio */
#zoomiocontainer {
/* container containing enlarged image (native sized image) */
position: absolute;
z-index: 9999;
overflow: hidden;
background: white;
visibility: visible;
}
#zoomiocontainer img {
/* image inside zoom container */
width: auto;
height: auto !important;
position: absolute !important;
display: block !important;
cursor: move;
}
.disablepointer {
pointer-events: none;
}
#zoomiocontainer.mobileclass {
/* CSS class added to zoom container on mobile OS */
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* opsional */
.thumbnails {
cursor: zoom-in;
}

Kemudian download dan lakukan host javascript berikut jangan lupa di masukan ke template :P:

1. ddfullscreenimageviewer.js
www.dynamicdrive.com/dynamicindex4/fullscreenimageviewer/ddfullscreenimageviewer.js
2. zoomio.js
www.dynamicdrive.com/dynamicindex4/zoomio/zoomio.js

Sisipkan seonggok script berikut sebelum tag </body>

<script>//<![CDATA[
jQuery(function () {
    $('img.thumbnails').fullscreenimage({
        scale: 2
    })
    $('.zoomio').zoomio({
        fadeduration: 500
    })
    $('.nolargeimg').zoomio({
        w: '500px',
        h: '400px'
    })
})
//]]></script>

SAVE.

Ketika memosting nanti syntax URL img harus dituliskan dengan aturan main sbb!

Untuk jQuery Full Screen Image Viewer<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" alt="" />

<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" data-scale="3" alt="" />Untuk Zoomio<img class="zoomio nolargeimg" src="URL-GAMBAR" width="300" alt="" />

<img class="zoomio" src="URL-GAMBAR-UKURAN-KECIL" data-largesrc="URL-GAMBAR-UKURAN-BESAR" />

DEMO
codepen.io/beben-koben/full/NvWgVv/