Trik Komputer: Lightbox Effect Pure use CSS for Blogger

Siapkan diri sobat dengan kejutan artikel spektakuler kali ini mengenai Lightbox Image Technique Use 100% CSS. Sebelum masuk ke acara inti, adakalanya sobat mengetahui yang dimaksud dengan lightbox! Lightbox yg Beben Koben si Bloglang anu ganteng kalem tea maksudkan disini yaitu mirip kinerja modal windows ;) Gambar kecil pas diklik bisa menjadi guede, seperti itu kira² penjelasannya :D
Perhatikan deretan category berikut: FancyBox, Multibox, Pirobox, Cloud Zoom, PicBox, SlimBox, PrettyPhoto, ImageBox, DivBox, LightBox Plus, Awesome box, Bumpbox, Thickbox, Zoomy, Floatbox, ImageZoom, Easy Zoom, Shadowbox, Litebox, Milkbox, Lightbox 2, CeeBox, Foxibox, ImgBox, ColorBox, LightWindow, TripTracker Slideshow, mediaBox Advanced, AnythingZoomer, PieceMaker 2, jCarousel, SlideWindow, TopUp, LyteBox, TinyBox2, Featured Image Zoomer, Gzoom, NivoZoom, iBox, FaceBox, SexyLightBox, FacyBox, HighSlide JS, SuperBox, NyroModal, MopBox, FancyZoom, QuickBox, ReMooz, SqueezeBox, Jparallax, VideoBox, ZoomBox, PhotoViewer, JqZoom, JsImageBox, YUI LightBox, Fullsize, PhotoShoot, PhotoZoom, imgZoom, Jquery Panel Gallery 2.0, Slides, Cerabox, ZoomIt, tinylightBox, Control.Window.

Jika diantara sobat mencari trik yg termasuk kategori diatas, jangan capek² karena trick dengan judul asli "Implementing CSS Lightbox in Blogger" Beben dapatkan dari salah satu sobat blogger yg postingannya berisi edan eling punya (high class) b-)
Bisa jadi setelah membaca artikel dari blogger 'ntuh, agan² bisa jadi master cemuanyah =D>

demo
Original article can you find here Implementing CSS Lightbox in Blogger.

Kalau pada postingan aslinya, CSS yang digunakan meliputi buat browse I E juga, ternyata pas dites sama juga amburadul. Jadi Dicinih ma Beben CSSnya diminimalis & dimodif lagi sesuai dengan kebutuhan :-"

Kode CSS Lightbox

/***********************************************

this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome

Modify by: http://beben-koben.blogspot.com/

tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome

***********************************************/
html { -webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
p{font-size:13px;line-height:18px;color:#234;}
#lightbox{display:inline-block;margin:0 auto;height:auto;vertical-align:middle;padding:0;text-align:center}
div.holder{position:fixed;width:100%;height:100%;display:table;text-align:center;left:-9999px;top:0;z-index:100;}
div.holder p.instructions{font:bold 11px/15px verdana,arial,sans-serif;color:#ccc;margin:0;opacity:0;filter:alpha(opacity=0);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-transition:opacity 0.25s linear 0s;
-ms-transition:opacity 0.25s linear 0s;
-o-transition:opacity 0.25s linear 0s;
-webkit-transition:opacity 0.25s linear 0s;
transition:opacity 0.25s linear 0s;
}
div.backdrop{position:fixed;left:-9999px;top:0;width:100%;height:100%;background:#000;opacity:0.8;filter:alpha(opacity=80);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);z-index:-1;}
div.frame{display:table-cell;vertical-align:middle;}
div.y1{display:inline-block;background:#fff;padding:10px;
-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
-moz-transform:scaleY(0.1);
-ms-transform:scaleY(0.1);
-o-transform:scaleY(0.1);
-webkit-transform:scaleY(0.1);
transform:scaleY(0.1);
-moz-transition:-moz-transform 0.5s linear 0s;
-ms-transition:-ms-transform 0.5s linear 0s;
-o-transition: -o-transform 0.5s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s;
transition:transform 0.5s linear 0s;
}
div.y1{*display:inline;*margin-top:50px;}
div.x1{display:inline-block;overflow:hidden;position:relative;
-moz-transform: scaleX (0.1);
-ms-transform: scaleX (0.1);
-o-transform: scaleX (0.1);
-webkit-transform: scaleX (0.1);
transform: scaleX (0.1);
-moz-transition:-moz-transform 0.5s linear 0.5s;
-ms-transition:-ms-transform 0.5s linear 0.5s;
-o-transition: -o-transform 0.5s linear 0.5s;
-webkit-transition: -webkit-transform 0.5s linear 0.5s;
transition:transform 0.5s linear 0.5s;
}
div.x1{*display:inline;}
div.x1 img.pic{opacity:0;display:block;position:relative;z-index:10;margin:0 auto;
-moz-transition:opacity 0.25s linear 0s;
-ms-transition:opacity 0.25s linear 0s;
-o-transition:opacity 0.25s linear 0s;
-webkit-transition:opacity 0.25s linear 0s;
transition:opacity 0.25s linear 0s;
}
div.x1 p{font:bold 12px/18px verdana,arial,sans-serif;color:#444;margin:0;height:40px;padding:10px 0 0 0;margin-top:-50px;z-index:5;opacity:0;text-align: left;clear: left;width:100%;
-moz-transition:0.25s linear 0s;
-ms-transition:0.25s linear 0s;
-o-transition:0.25s linear 0s;
-webkit-transition:0.25s linear 0s;
transition:0.25s linear 0s;
}
div.x1 p.close{text-align:right;font-size:14px;position:absolute;right:10px;bottom:-13px;cursor: pointer;color:#888;}
.thumb{outline:0;}
.thumb img{height:110px;border:0;width:150px;}

/* non IE browsers */

.b1:focus ~ div.p1 {left:0;}
.b2:focus ~ div.p2 {left:0;}
.b3:focus ~ div.p3 {left:0;}
.b4:focus ~ div.p4 {left:0;}
.b5:focus ~ div.p5 {left:0;}
.b1:focus ~ div.p1 div.backdrop {left:0;}
.b2:focus ~ div.p2 div.backdrop {left:0;}
.b3:focus ~ div.p3 div.backdrop {left:0;}
.b4:focus ~ div.p4 div.backdrop {left:0;}
.b5:focus ~ div.p5 div.backdrop {left:0;}
.b1:focus ~ div.p1 div.frame p.instructions,
.b2:focus ~ div.p2 div.frame p.instructions,
.b3:focus ~ div.p3 div.frame p.instructions,
.b4:focus ~ div.p4 div.frame p.instructions,
.b5:focus ~ div.p5 div.frame p.instructions{opacity:1;filter:alpha(opacity=100);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-transition:opacity 0.5s linear 2s;
-ms-transition:opacity 0.5s linear 2s;
-o-transition:opacity 0.5s linear 2s;
-webkit-transition:opacity 0.5s linear 2s;
transition:opacity 0.5s linear 2s;
}
.b1:focus ~ div.p1 div.frame div.x1,
.b2:focus ~ div.p2 div.frame div.x1,
.b3:focus ~ div.p3 div.frame div.x1,
.b4:focus ~ div.p4 div.frame div.x1,
.b5:focus ~ div.p5 div.frame div.x1 {
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
-o-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
.b1:focus ~ div.p1 div.frame div.x1 > div.y1,
.b2:focus ~ div.p2 div.frame div.x1 > div.y1,
.b3:focus ~ div.p3 div.frame div.x1 > div.y1,
.b4:focus ~ div.p4 div.frame div.x1 > div.y1,
.b5:focus ~ div.p5 div.frame div.x1 > div.y1 {
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
-o-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
.b1:focus ~ div.p1 div.frame div.x1 img.pic,
.b2:focus ~ div.p2 div.frame div.x1 img.pic,
.b3:focus ~ div.p3 div.frame div.x1 img.pic,
.b4:focus ~ div.p4 div.frame div.x1 img.pic,
.b5:focus ~ div.p5 div.frame div.x1 img.pic{opacity:1;
-moz-transition:opacity 0.5s linear 1s;
-ms-transition:opacity 0.5s linear 1s;
-o-transition:opacity 0.5s linear 1s;
-webkit-transition:opacity 0.5s linear 1s;
transition:opacity 0.5s linear 1s;
}
.b1:focus ~ div.p1 div.frame div.x1 p,
.b2:focus ~ div.p2 div.frame div.x1 p,
.b3:focus ~ div.p3 div.frame div.x1 p,
.b4:focus ~ div.p4 div.frame div.x1 p,
.b5:focus ~ div.p5 div.frame div.x1 p{margin-top:0;opacity:1;
-moz-transition:0.25s linear 2.5s;
-ms-transition:0.25s linear 2.5s;
-o-transition:0.25s linear 2.5s;
-webkit-transition:0.25s linear 2.5s;
transition:0.25s linear 2.5s;
}

Sedikit kan sob :D Kalau ukuran tinggi dan lebar gambar dirasa kurang, rubah saja kode yg diberi warna yah (tinggi & lebar image yg akan tampil) :) Kalau upload imagenya mah gede resolusinya. Masa nanti pas diklik gambar yg keluarnya segede kutil =)) Nah sekarang pemakaiaannya nih. Karena murni menggunakan CSS, maka dalam penulisan sedikit banyak menggunakan tag ;)) Taging utama/single image dalam pemakaian kayak ngono

<div id="lightbox"> <a class="thumb b1" href="#" tabindex="1"> <img alt="" src="http://YOUR-LINK-IMAGE.jpg" /> </a> <div class="holder p1"> <div class="backdrop"> </div> <div class="frame"> <div class="x1"> <div class="y1"> <img class="pic" src="http://YOUR-LINK-IMAGE.jpg" alt="" /> <p>Image 1 of 4 A line for descriptive text</p> <p class="close">CLOSE X</p> </div> </div> <p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p> </div> </div> </div>
Coded warna biru, semua harus didalam tag tersebut. Code warna merah, disitu tempat image gede nanti keluar pas diklik. Maka kalau mau pakai banyak tinggal tambah saja kode warna merah itu. Contoh pemakaian banyak image...

<div id="lightbox"> <a class="thumb b1" href="#" tabindex="1"> <img alt="" src="http://YOUR-LINK-IMAGE.png" /> </a> <a class="thumb b2" href="#" tabindex="2"> <img alt="" src="http://YOUR-LINK-IMAGE.png" /> </a> <a class="thumb b3" href="#" tabindex="3"> <img alt="" src="http://YOUR-LINK-IMAGE.png" /> </a> <a class="thumb b4" href="#" tabindex="4"> <img alt="" src="http://YOUR-LINK-IMAGE.png" /> </a> <div class="holder p1"> <div class="backdrop"> </div> <div class="frame"> <div class="x1"> <div class="y1"> <img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" /> <p>Image 1 of 4 A line for descriptive text</p> <p class="close">CLOSE X</p> </div> </div> <p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p> </div> </div> <div class="holder p2"> <div class="backdrop"></div> <div class="frame"> <div class="x1"> <div class="y1"> <img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" /> <p>Image 2 of 4 A line for descriptive text</p> <p class="close">CLOSE X</p> </div> </div> <p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p> </div> </div> <div class="holder p3"> <div class="backdrop"></div> <div class="frame"> <div class="x1"> <div class="y1"> <img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" /> <p>Image 3 of 4 A line for descriptive text</p> <p class="close">CLOSE X</p> </div> </div> <p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p> </div> </div> <div class="holder p4"> <div class="backdrop"></div> <div class="frame"> <div class="x1"> <div class="y1"> <img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" /> <p>Image 4 of 4 A line for descriptive text</p> <p class="close">CLOSE X</p> </div> </div> <p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p> </div> </div> </div>
Perhatikan kode holder p4!!!
Itu tambahkan saja jika dalam 1 postingan mau menampilkan effect lightbox-nya lebih dari 10 :)) Please come and visit to look the great article by Stylify Your Blog.

Trik css3 lightbox hadir kembali dan kali ini datang dari web top markotop. Dengan sentuhan hover indah menawarkan kepada para pengguna lebih variatif ;) CSS3 Lightbox created by: Codrops
Capeeeekkk deuh :P
Happy CSS lightbox aja deh \m/

Trik Komputer

Senin, 18 Juli 2011

Lightbox Effect Pure use CSS for Blogger

Kode CSS Lightbox

Tidak ada komentar:

Posting Komentar