Menampilkan Gambar Besar Dengan Panel Popup
Panel popup akan menyesuaikan iteself dengan ukuran gambar besar dan jumlah teks deskripsi. Posisi panel popup juga dapat disesuaikan untuk setiap gambar, dengan menggunakan tiga baris stylesheet tambahan.
Demo:
Letakan cursor pada gambar, kemudian klik...
CLOSE X
TBMC
Foto Para biker karyawan PDAM Tirta Benteng Kota Tangerang, yang tergabung dalam Tirta Benteng Motor Community ( TBMC ).
CLOSE X
TBMC Touring
Ini adalah Foto teman-teman saya, mereka adalah para biker, mereka sangat menikmati touring-touring mereka yang rutin diselengarakan di setiap ada kesempatan. Dengan semangat kekeluargaan mereka tetap bersemangat walau perjalanan mereka masih panjang.
CLOSE X
Alay
Alay adalah sebuah istilah yang merujuk pada sebuah fenomena perilaku remaja di Indonesia. "Alay" merupakan singkatan dari "anak layangan" Istilah ini merupakan stereotipe yang menggambarkan gaya hidup norak atau kampungan. Selain itu, alay merujuk pada gaya yang dianggap berlebihan dan selalu berusaha menarik perhatian. Seseorang yang dikategorikan alay umumnya memiliki perilaku unik dalam hal bahasa dan gaya hidup. Dalam gaya bahasa, terutama bahasa tulis, alay merujuk pada kesenangan remaja menggabungkan huruf besar-huruf kecil, menggabungkan huruf dengan angka dan simbol, atau menyingkat secara berlebihan.
Di Filipina terdapat fenomena yang mirip, sering disebut sebagai "Jejemon"..
Nah Foto ke empat orang ini adalah teman-teman saya, mereka mengaku sebagai Alay tapi bukan Alay seperti yang sudah saya katakan. Mereka mengaku sebagai Alay karena kisah semasa kecil mereka yang mempunyai hobi yang sama yaitu mengejar layangan.
CLOSE X
COKER
COKER, atau orang-orang sering menyebutnya "Cowok Keren" adalah mereka yang menganggap dirinya orang terkeren sedunia tapi bukan Udin Sedunia Loch... dan ini adalah Foto Para Coker tersebut.
More Detail:
Silahkan letakan kode CSS kedalam tag <head> template anda dan kode HTML kedalam tag <body> atau dimanapun anda ingin memasang PopBox pada halaman website anda.
Kode CSS:
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-popBox.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* 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;}
}
.enlarge {display:inline-block; position:relative; margin:0 auto;}
.frame {position:absolute; height:0; overflow:hidden; background:transparent; z-index:100; float:left;
-moz-transition: 0.25s linear 1.5s;
-ms-transition: 0.25s linear 1.5s;
-o-transition: 0.25s linear 1.5s;
-webkit-transition: 0.25s linear 1.5s;
transition: 0.25s linear 1.5s;
}
.pic1 .frame {left:50px; top:120px;}
.pic2 .frame {left:-78px; top:120px;}
.pic3 .frame {left:-206px; top:-70px;}
.pic4 .frame {left:-334px; top:120px;}
.caption {margin-top:-200px; position:relative; opacity:0; background:#000; padding:10px; z-index:5;
border-radius:0 0 10px 10px;
-moz-transition: 0.25s linear 0.5s;
-ms-transition: 0.25s linear 0.5s;
-o-transition: 0.25s linear 0.5s;
-webkit-transition: 0.25s linear 0.5s;
transition: 0.25s linear 0.5s;
}
.caption h1 {font:bold 24px/30px georgia, serif; color:#6c9; padding:0; margin:0;}
.caption p {font:normal 14px/20px georgia, serif; color:#ccc; padding:0; margin:0;}
.close {position:absolute; left:-9999px; top:0; width:200px; font:bold 15px/24px georgia, sans-serif; color:#aaa !important; text-decoration:none; opacity:0; margin-bottom:-40px; z-index:200;
-moz-transition: 0.25s linear 0s;
-ms-transition: 0.25s linear 0s;
-o-transition: 0.25s linear 0s;
-webkit-transition: 0.25s linear0s;
transition: 0.25s linear 0s;
}
.caption a {color:#6cf;}
.frame img {display:block; opacity:0; border:1px solid #fff;
-moz-transition: opacity 0.25s linear 0.75s;
-ms-transition: opacity 0.25s linear 0.75s;
-o-transition: opacity 0.25s linear 0.75s;
-webkit-transition: opacity 0.25s linear 0.75s;
transition: opacity 0.25s linear 0.75s;
}
.thumb {outline:0;display:block; float:left;}
.thumb img {display:block; border:1px solid #000;}
.thumb:focus ~ div.frame {height:1000px;
-moz-transition: 0s linear 0s;
-ms-transition: 0s linear 0s;
-o-transition: 0s linear 0s;
-webkit-transition: 0s linear 0s;
transition: 0s linear 0s;
}
div.framey {position:relative; z-index:10;
-moz-transform: scaleY(0.01);
-ms-transform: scaleY(0.01);
-o-transform: scaleY(0.01);
-webkit-transform: scaleY(0.01);
transform: scaleY(0.01);
-moz-transition: -moz-transform 0.25s linear 1.25s;
-ms-transition: -ms-transform 0.25s linear 1.25s;
-o-transition: -o-transform 0.25s linear 1.25s;
-webkit-transition: -webkit-transform 0.25s linear 1.25s;
transition: transform 0.25s linear 1.25s;
}
div.framex {background:#000; padding:25px 10px 10px 10px;
border-radius:10px 10px 0 0;
-moz-transform: scaleX(0.01);
-ms-transform: scaleX(0.01);
-o-transform: scaleX(0.01);
-webkit-transform: scaleX(0.01);
transform: scaleX(0.01);
-moz-transition: -moz-transform 0.25s linear 1s;
-ms-transition: -ms-transform 0.25s linear 1s;
-o-transition: -o-transform 0.25s linear 1s;
-webkit-transition: -webkit-transform 0.25s linear 1s;
transition: transform 0.25s linear 1s;
}
.thumb:focus ~ div.frame div.framey {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 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;
}
.thumb:focus ~ div.frame div.framey div.framex {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 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;
}
.thumb:focus ~ div.frame img {opacity:1;
-moz-transition: opacity 0.5s linear 1.25s;
-ms-transition: opacity 0.5s linear 1.25s;
-o-transition: opacity 0.5s linear 1.25s;
-webkit-transition: opacity 0.5s linear 1.25s;
transition: opacity 0.5s linear 1.25s;
}
.thumb:focus ~ div.frame .caption {opacity:1; margin-top:-10px;
-moz-transition: 0.5s linear 1.75s;
-ms-transition: 0.5s linear 1.75s;
-o-transition: 0.5s linear 1.75s;
-webkit-transition: 0.5s linear 1.75s;
transition: 0.5s linear 1.75s;
}
.thumb:focus + .close {opacity:1; margin-bottom:0;
-moz-transition: 0.5s linear 1.75s;
-ms-transition: 0.5s linear 1.75s;
-o-transition: 0.5s linear 1.75s;
-webkit-transition: 0.5s linear 1.75s;
transition: 0.5s linear 1.75s;
}
.pic1 .thumb:active + .close {left:60px; top:120px;}
.pic2 .thumb:active + .close {left:-68px; top:120px;}
.pic3 .thumb:active + .close {left:-196px; top:-70px;}
.pic4 .thumb:active + .close {left:-324px; top:120px;}
.pic1 .thumb:focus + .close {left:60px; top:120px;}
.pic2 .thumb:focus + .close {left:-68px; top:120px;}
.pic3 .thumb:focus + .close {left:-196px; top:-70px;}
.pic4 .thumb:focus + .close {left:-324px; top:120px;}
</style>Text warna ^ Biru muda: Baris stylesheet tambahan ( Untuk menentukan posisi panel popup)
Kode HTML:
<div id="info">
<div class="enlarge pic1">
<a class="thumb" href="#x" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNpuj_ht6zO92rE-IsdGYNjGxHMEegZyY9uLS2-wmYQF9a7wqDTToKPhosJoxYVaU-vpeulr6sV8fKd84dZ4LQnwsbp-AtHiJf1PaIht6F37Ix0FUJnCHsVJA8jIODcUg88Lsaon9HDs/s128/Resize-of-100-0227.jpg" alt="" /></a><a class="close" href="#x">CLOSE X</a><div class="frame">
<div class="framey">
<div class="framex">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNpuj_ht6zO92rE-IsdGYNjGxHMEegZyY9uLS2-wmYQF9a7wqDTToKPhosJoxYVaU-vpeulr6sV8fKd84dZ4LQnwsbp-AtHiJf1PaIht6F37Ix0FUJnCHsVJA8jIODcUg88Lsaon9HDs/s500/Resize-of-100-0227.jpg" alt="" /></div>
</div>
<div class="caption">
<h1>
Puna Teal</h1>
<p>
The <a href="http://en.wikipedia.org/wiki/Puna_Teal" rel="nofollow">Puna Teal</a> (Anas puna) is a species of dabbling duck in the genus Anas. It was previously regarded as a subspecies of the Silver Teal.</p>
</div>
</div>
</div>
<div class="enlarge pic2">
<a class="thumb" href="#x" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvPOtxgSz7lGDDRux_UoGzt-H7yUnz31lVIPtvAfUEmCTmdV2MWaXJT8VT178VTsVapXPLNPRbOY1q4S3P14RXWWu3C5HhsAQPYjhtZQ5bNUee3XiF-Ez7Z93zjRIBCgP4ujoGOJ12KQ/s128/Resize-of-100-0212.jpg" alt="" /></a><a class="close" href="#x">CLOSE X</a><div class="frame">
<div class="framey">
<div class="framex">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvPOtxgSz7lGDDRux_UoGzt-H7yUnz31lVIPtvAfUEmCTmdV2MWaXJT8VT178VTsVapXPLNPRbOY1q4S3P14RXWWu3C5HhsAQPYjhtZQ5bNUee3XiF-Ez7Z93zjRIBCgP4ujoGOJ12KQ/s500/Resize-of-100-0212.jpg" alt="" /></div>
</div>
<div class="caption">
<h1>
BETE</h1>
<p>
<a href="http://en.wikipedia.org/wiki/Puna_Teal" rel="nofollow">B'T</a> Ya sangat membosankan, bt alias.</p>
</div>
</div>
</div>
<div class="enlarge pic3">
<a class="thumb" href="#x" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaywsnpMdewuZra3ipQ2dnqpHOFIOzuZXGqqdW29QjNAi400VNDXIXgJ0AAZqhjfNzKkNH0Dhjw85HfedK1MTyuAYayAblcZJfj4ZtNuM3WtWSHsotl-tPqS8qJ2IVpPVKE9epVH7Nb0/s128/Resize-of-100-0216.jpg" alt="" /></a><a class="close" href="#x">CLOSE X</a><div class="frame">
<div class="framey">
<div class="framex">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaywsnpMdewuZra3ipQ2dnqpHOFIOzuZXGqqdW29QjNAi400VNDXIXgJ0AAZqhjfNzKkNH0Dhjw85HfedK1MTyuAYayAblcZJfj4ZtNuM3WtWSHsotl-tPqS8qJ2IVpPVKE9epVH7Nb0/s500/Resize-of-100-0216.jpg" alt="" /></div>
</div>
<div class="caption">
<h1>
Greylag Goose</h1>
<p>
The <a href="http://en.wikipedia.org/wiki/Greylag_goose" rel="nofollow">Greylag</a> is the largest and bulkiest of the grey Anser geese. It has a rotund, bulky body, a thick and long neck, and a large head and bill. It has pink legs and feet, and an orange or pink bill.</p>
</div>
</div>
</div>
<div class="enlarge pic4">
<a class="thumb" href="#x" tabindex="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsClq0Ka3IELom2DbXv0-oXwBaQsNP10_YRveehraykAzCjIeCIt5I8UwznLeboxhIoH5kh_gS0fbhiMgxIBtXOiGC36R6EaU3s0bkyj4ILOxWIDVxchZOcZ56iyUqeh269TI2F8zCmLZ/s128/Resize-of-100-0119.jpg" alt="" /></a><a class="close" href="#x">CLOSE X</a><div class="frame">
<div class="framey">
<div class="framex">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsClq0Ka3IELom2DbXv0-oXwBaQsNP10_YRveehraykAzCjIeCIt5I8UwznLeboxhIoH5kh_gS0fbhiMgxIBtXOiGC36R6EaU3s0bkyj4ILOxWIDVxchZOcZ56iyUqeh269TI2F8zCmLZ/s500/Resize-of-100-0119.jpg" alt="" /></div>
</div>
<div class="caption">
<h1>
Demoiselle Crane</h1>
<p>
The <a href="http://en.wikipedia.org/wiki/Demoiselle_Crane" rel="nofollow">Demoiselle Crane</a>, Anthropoides virgo, is a species of crane that breeds in Central Asia and winters in India, with a few found in Cyprus and eastern Turkey as well.</p>
</div>
</div>
</div>
</div>
<!-- end of info -->
Text warna ^ Kuning : URL Gambar Thumbnail
^ Merah : URL Gambar Besar
^ Cyan : Close X ( Untuk menutup Popup )
^ Biru : Title
^ Hijau : Link ( Jika diperlukan )
^ Pink : Text Deskripsi
thank bro bwat infonya
ReplyDeleteSama-sama, semoga bermanfaat... :)
Delete