Membuat jQuery LightBox dengan CSS3

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

www.junioriqfar.com, Membuat jQuery LightBox dengan CSS3. Alhamdulillah saya bisa blogging lagi karena kemaren - kemaren saya masih sibuk dengan beres beres rumah. Dan untuk tutorial blogging kali ini adalah Membuat jQuery LightBox dengan CSS3 dan tak lupa LightBox ini menggunakan jQuery untuk masalah animasinya. Jadi sobat tidak perlu khawatir dengan animasinya. OK langsung saja saya mulai tutorialnya.

Memasang jQuery LightBox dengan CSS3 di template blog

1. Masuk ke akun blogger sobat
2. Kemudian klik Rancangan, lalu edit HTML
3. Centang Expand Template Widget
4. Setelah selesai, salinlah kode CSS dibawah ini

.lb-album{
 width: 900px;
 margin: 0 auto;
 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
 float: left;
 margin: 5px;
 position: relative;
}
.lb-album li > a,
.lb-album li > a img{
 display: block;
}
.lb-album li > a{
 width: 150px;
 height: 150px;
 position: relative;
 padding: 10px;
 background: #f1d2c2;
 -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
 -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
 box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
 position: absolute;
 width: 150px;
 height: 150px;
 top: 10px;
 left: 10px;
 text-align: center;
 line-height: 150px;
 color: rgba(27,54,81,0.8);
 text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
 font-size: 24px;
 opacity: 0;
 filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
 background: rgb(241,210,194);
 background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 -webkit-transition: opacity 0.3s linear;
 -moz-transition: opacity 0.3s linear;
 -o-transition: opacity 0.3s linear;
 -ms-transition: opacity 0.3s linear;
 transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
 opacity: 1;
 filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
 width: 0px;
 height: 0px;
 position: fixed;
 overflow: hidden;
 left: 0px;
 top: 0px;
 padding: 0px;
 z-index: 99;
 text-align: center;
 background: rgb(241,210,194);
 background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
 background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
 position: relative;
 color: rgba(27,54,81,0.8);
 opacity: 0;
 filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
 width: 550px;
 margin: 10px auto 0px auto;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
 -webkit-transition: opacity 0.3s linear 1.3s;
 -moz-transition: opacity 0.3s linear 1.3s;
 -o-transition: opacity 0.3s linear 1.3s;
 -ms-transition: opacity 0.3s linear 1.3s;
 transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
 padding: 0px 20px;
 width: 200px;
 height: 60px;
}
.lb-overlay div h3{
 font-size: 36px;
 float: left;
 text-align: right;
 border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
 font-size: 16px;
 font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 font-style: italic;
}
.lb-overlay div h3 span{
 display: block;
 line-height: 6px;
}
.lb-overlay div p{
 text-align: left;
 float: left;
 width: 260px;
}
.lb-overlay a.lb-close{
 background: rgba(27,54,81,0.8);
 z-index: 1001;
 color: #fff;
 position: absolute;
 top: 43px;
 left: 50%;
 font-size: 15px;
 line-height: 26px;
 text-align: center;
 width: 50px;
 height: 23px;
 overflow: hidden;
 margin-left: -25px;
 opacity: 0;
 filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 -webkit-transition: opacity 0.3s linear 1.2s;
 -moz-transition: opacity 0.3s linear 1.2s;
 -o-transition: opacity 0.3s linear 1.2s;
 -ms-transition: opacity 0.3s linear 1.2s;
 transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
 /* height: 100%; For Opera max-height does not seem to work */
 max-height: 100%;
 position: relative;
 -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
 -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
 box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
 width: auto;
 height: auto;
 bottom: 0px;
 right: 0px;
 padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
 -webkit-animation: fadeInScale 1.2s ease-in-out;
 -moz-animation: fadeInScale 1.2s ease-in-out;
 -o-animation: fadeInScale 1.2s ease-in-out;
 -ms-animation: fadeInScale 1.2s ease-in-out;
 animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
 opacity: 1;
 filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 
 100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
 http://bricss.net/post/11230266445/css-hack-to-target-opera 
*/
x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

5. Dan letakkan di atas kode

]]></b:skin>

6. Selanjutnya salin framework jQuery ini

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

7. Dan letakkan di atas kode

</head>

8. Simpan template sobat

Memasukkan jQuery LightBox dengan CSS3 di postingan / artikel

1. Silahkan sobat membuat posting baru untuk disisipkan jQuery LightBox ini
2. Kemudian tambahkan kode di bawah ini

<ul class="lb-album">
<li>
  <a href="#image-1">
  <img src="ALAMAT URL GAMBAR THUMB" alt="image01">
  <span>TULISAN SAAT DISOROT MOUSE</span>
  </a>
  <div class="lb-overlay" id="image-1"><img src="ALAMAT URL GAMBAR FULL" alt="image01" />
    <div>
    <h3>TULISAN<span>TULISAN</h3>
    <p>DESKRIPSI GAMBAR</p>
    <a href="#image-3" class="lb-prev">Prev</a>
    <a href="#image-2" class="lb-next">Next</a>
    </div>
  <a href="#page" class="lb-close">x Close</a>
  </div>
</li>
<li>
  <a href="#image-2">
  <img src="ALAMAT URL GAMBAR THUMB" alt="image02">
  <span>TULISAN SAAT DISOROT MOUSE</span>
  </a>
  <div class="lb-overlay" id="image-2"><img src="ALAMAT URL GAMBAR FULL" alt="image02" />
    <div>
    <h3>TULISAN<span>TULISAN</h3>
    <p>DESKRIPSI GAMBAR</p>
    <a href="#image-1" class="lb-prev">Prev</a>
    <a href="#image-3" class="lb-next">Next</a>
    </div>
  <a href="#page" class="lb-close">x Close</a>
  </div>
</li>
<li>
  <a href="#image-3">
  <img src="ALAMAT URL GAMBAR THUMB" alt="image03">
  <span>TULISAN SAAT DISOROT MOUSE</span>
  </a>
  <div class="lb-overlay" id="image-3"><img src="ALAMAT URL GAMBAR FULL" alt="image03" />
    <div>
    <h3>TULISAN<span>TULISAN</h3>
    <p>DESKRIPSI GAMBAR</p>
    <a href="#image-2" class="lb-prev">Prev</a>
    <a href="#image-1" class="lb-next">Next</a>
    </div>
  <a href="#page" class="lb-close">x Close</a>
  </div>
</li>
</ul>

3. Terbitkan entry sobat

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait