Galeri Lightbox CSS3 Dengan jQuery

Untuk membuatnya ikuti langkah-langkah dibawah ini.

Login blogger
Tata Letak/Layout - Edit HTML
Klik pada Expand Template Widget.
Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin>

CSS

#gallery{
    /* The pics container */
    width:100%;
    height:580px;
    position:relative;
}

.pic, .pic a{
    /* Each picture and the hyperlink inside it */
    width:100px;
    height:100px;
    overflow:hidden;
}

.pic{
    /* Styles specific to the pic class */
    position:absolute;
    border:5px solid #EEEEEE;
    border-bottom:18px solid #eeeeee;

    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}

.pic a{
    /* Specific styles for the hyperlinks */
    text-indent:-999px;
    display:block;
    /* Setting display to block enables advanced styling for links */
}

h1{
    /* The title of the page */
    color:#000;
    font-family: 'Permanent Marker', serif;
        text-shadow: 3px 2px 5px #cc0000;
    font-size:40px;
    font-weight:normal;
}

h2{
    /* The subtitle */
        color:#cc0000;
    font-family: 'Just Me Again Down Here', serif;
        text-shadow: 3px 2px 5px orange;
    font-size:25px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin:10px 0 25px;
}
h3{
    /* The subtitle */
        color:#666;
    font-family:Arial, Helvetica, sans-serif;
        text-shadow: 0px 2px 1px #000;
    font-size:9px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin:10px 0 25px;

}

#orig{
    /* The link that is positioned above the title */
    font-family:"MyRiad Pro",Arial;
    font-size:10px;
    letter-spacing:1px;
    padding-bottom:15px;
    text-transform:uppercase;
    float:right;
}

hr{
    /* The horizontal ruler */
    background-color:#BBBBBB;
    border:medium none;
    color:#BBBBBB;
    height:1px;
    margin:30px auto;
    width:450px;
}

.clear{
    /* The clearfix hack */
    clear:both;
}

#main{
    /* The main container */
    width:780px;
    margin:30px auto;
}

a img{
    border:none;
}

a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

.tutorial-info{
    text-align:center;
    padding:10px;
    margin-top:70px;
}

div#fancy_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 30;
}

div#fancy_loading {
    position: absolute;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: none;
    overflow: hidden;
    background: transparent;
    z-index: 100;
}

div#fancy_loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_p8PmmgtubK8symnYooc5ojKQXT0DqDdeCrszuQxFF9JhL6j0TPrk_LKmP0gNIvOR_W-JDBJo_-O8chyphenhyphenr3LM_wIX0Rig32lwP9P7VgraUM4comz7u2-9zgGZShJtdU8Jy94l2LfoeEIG/s1600/fancy_progress.png') no-repeat;
}

div#fancy_outer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
}

div#fancy_inner {
    position: relative;
    width:100%;
    height:100%;
    background: #FFF;
    -moz-box-shadow: -2px 1px 100px #fff;
}

div#fancy_content {
    margin: 0;
    z-index: 100;
    position: absolute;
}

div#fancy_div {
    background: #000;
    color: #FFF;
    height: 100%;
    width: 100%;
    z-index: 100;
}

img#fancy_img {
    position: absolute;
    top: 0;
    left: 0;
    border:0;
    padding: 0;
    margin: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}

div#fancy_close {
    position: absolute;
    top: -12px;
    right: -15px;
    height: 30px;
    width: 30px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomQ44lstJ7KVmB4m6AH_32krJypwN7FkmkJ3ZcKx_YMtCnp_zuuU6H2kgPMjtsBiW9tF-Pjuy5QH1kPCgwOLAQjgq-iw0SqoR2ZiZ0MPEF6ewAjyjMOE6qqJIWTZugu8_q-iaeBYhIwrS/s1600/fancy_closebox.png') top left no-repeat;
    cursor: pointer;
    z-index: 181;
    display: none;
}

#fancy_frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}

#fancy_ajax {
    width: 100%;
    height: 100%;
    overflow: auto;
}

a#fancy_left, a#fancy_right {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 35%;
    cursor: pointer;
    z-index: 111;
    display: none;
    background-image: url("data:image/gif;base64,AAAA");
    outline: none;
    overflow: hidden;
}

a#fancy_left {
    left: 0px;
}

a#fancy_right {
    right: 0px;
}

span.fancy_ico {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    z-index: 112;
    cursor: pointer;
    display: block;
}

span#fancy_left_ico {
    left: -9999px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwXKiuat-dVhAINB2INreYcyoqWLs8SiZgy5UbKnAlwxIzzgRxBxOuBAXksGH24T58p7zFZmwXKuIRPIiagjJniEl_vWKYUZPAS4N6VEvhntiOAA07NazzXm4X_EjJtSdvcFQNGltvvH0/s1600/fancy_left.png') no-repeat;
}

span#fancy_right_ico {
    right: -9999px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHJaLdLLRx1YO_6OdjV1b-P3z3wDR-A3TQ10w-jcxFYJg92a55ea7y8GslLaWQ3EckTl3bl07PfZUJPv0mt6KCXXcJbieocJ3pndvyR_VHCm8_1MebsmCTMBkNKjgLmHu3o76Y5fYc9tU/s1600/fancy_right.png') no-repeat;
}

a#fancy_left:hover, a#fancy_right:hover {
    visibility: visible;
    background-color: transparent;
}

a#fancy_left:hover span {
    left: 20px;
}

a#fancy_right:hover span {
    right: 20px;
}

#fancy_bigIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

div#fancy_bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}

div.fancy_bg {
    position: absolute;
    display: block;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}

div#fancy_bg_n {
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnybSAULQpmdQPizbqU8KXVEYChc9SgPdgYen6LjmYI9dRAyOrUd4K5Gg5W611A-7ODyx5w9Sy1AUExnTIji8CWJuRIdt3izdtTAgceaKBE0dd4G566ARAZUIRw1PTvn9zKXeHtHAz0FDA/s1600/fancy_shadow_n.png') repeat-x;
}

div#fancy_bg_ne {
    top: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsctXMsRj6lYtal8Yl82fgCNyfZ41n3zcsqdnPnvZNj2WJkvakSgHWiCfrwxTQ6phTQhDNlzSKXwlhSmMpEQ-sXufHbENHIR711_JBpQW1vyHo5AvTnf9l6QIFBuZT-C7yxIC0LGP7vcr/s1600/fancy_shadow_ne.png') no-repeat;
}

div#fancy_bg_e {
    right: -20px;
    height: 100%;
    width: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT2A_YtoErFpAyp5YfRhtLwjFaNmqIIUQ4alZCadHyBl7OmV2Dldb9n2bGggsSF2EHAnW1m5YbM8aM1yk-ZfPAt0j_-FUdso82Xv1Gx3t4aYX2n6pTf1TiSUZ5yeE2qhs-t8qx4cmQvKsn/s1600/fancy_shadow_e.png') repeat-y;
}

div#fancy_bg_se {
    bottom: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQlwydHfvFlBP-ksydHuhUV0pmANA7_o6R5y17kiwzaYBOdty9qb2U0owpytgPtI-_JoFQ2HI2yPc5GHkeOYaSU8R7JpwmCIzO-z5dl9aQkslZsw4lCtL4JkV-IT8TnQMA6uyAcuJdhl6R/s1600/fancy_shadow_s.png') no-repeat;
}

div#fancy_bg_s {
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3krzttIFBwI22nSmzezFJk-hHYvL_-XjNxr4wrHrd_wAt6dzUWFD_ksfVNtvha7nkQNdw7N64S5SVQM4N_kkwCmSxk0mpBTOQ2B5qKXQo5fv-tUpxlDdIBDVkDPNR7HF9S3Q-Of6Unr8/s1600/fancy_shadow_s.png') repeat-x;
}

div#fancy_bg_sw {
    bottom: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYC1r0C5qaO3iqKrA4lTuqdvldhORB5dU9JiWo_72Ghn1A2Atf3qbWpU_yCg5tIkGJlinEdn0cl5tN1Ud9n6VccOX7Ix_r_Drh01K6xQgDtZRrPw-u2amv0r9G9Yp91NTq8m1m3bbwuV6/s1600/fancy_shadow_sw.png') no-repeat;
}

div#fancy_bg_w {
    left: -20px;
    height: 100%;
    width: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27fX1w_1weZ6b4OcEA0g3xS1W-b5jkUGbrL4p3rnp2tcdkq3m49Iu7noWIhoLaRmveKuCk-kRL757GjJLYBBX3OAeN3PivNl7M2zDU2ESS_Cj5ZvrPVrN10JWI3bmzU11gQZKBHgwROla/s1600/fancy_shadow_w.png') repeat-y;
}

div#fancy_bg_nw {
    top: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqA1VHP213UN3ISROF6MBy4mpR79Tfjq44el1Z82j8SFk4yuCqwuT8_zoznVe5yzXlJtJvQ38eiqt_6BV0iK39gA9Ug1_SP29YcdBCkpZGoHoZRNgVdqlQzR5bOBOuh6FANbJ14rMpc4zV/s1600/fancy_shadow_nw.png') no-repeat;
}

div#fancy_title {
    position: absolute;
    z-index: 100;
    display: none;
}

div#fancy_title div {
    color: #FFF;
    font: bold 12px Arial;
    padding-bottom: 3px;
    white-space: nowrap;
}

div#fancy_title table {
    margin: 0 auto;
}

div#fancy_title table td {
    padding: 0;
    vertical-align: middle;
}

td#fancy_title_left {
    height: 32px;
    width: 15px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76E7Hag6jr1bV5FofB6OoyfkypK-UuYAJjUidLf2Lto_jqzVJwqIvkE9-qOa-fVLYDqLiyj04oBHtDZval1We6w16SYrh63PSSbsq9BEQTXn5iNiBUn6L5qfRidakTEQepXsT2xlq0KVI/s1600/fancy_title_left.png') repeat-x;
}

td#fancy_title_main {
    height: 32px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6guuzRRlpWdhFYHx5eZxguuKSrhyUZ92UKTqZ4G_5Zz9CK1F1RzsfXWYf9BKMzuH9h-W6ucPkKccbkVkfnFLq8O8UsxABIQqfFh52DfHu9aPxJHvFDSAgh4XUaH_RLCZczlLRHcb_Mk4/s1600/fancy_title_main.png') repeat-x;
}

td#fancy_title_right {
    height: 32px;
    width: 15px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8-9eva5CMmQ0-_6vkDezOjZz898N8zuTAqyGeDgmAlhsRwL5d6iE60iRTkxbm-ntXqZhI1RnORxA2cUZzsUEfiBSoc0BPiRfW8XoEEl_3ygeKYbMNmE-rvECyFnfrz2pEx2PrTcyZFbD/s1600/fancy_title_right.png') repeat-x;
}

Dan sekarang sobat masukin javascript di bawah ini
Cari Kode </head>

Pastekan Kode di bawah ini Tepat di atas kode </head>

SCRIPT

Dan ini kode Html,sobat bisa memasukan di Edit HTML/ tambah gadget

MARKUP

<div id="gallery">

<div id="pic-1" class="pic" style="top:311px;left:133px;background:url(MASUKIN img/thumbs/GAMBAR KECIL 1 ) no-repeat 50% 50%; -moz-transform:rotate(17deg); -webkit-transform:rotate(17deg);">
<a class="fancybox" rel="fncbx" MASUKIN img/original/GAMBAR BESAR 1 " target="_blank">colosseum</a>
</div>
<div id="pic-2" class="pic" style="top:199px;left:335px;background:url(MASUKIN img/thumbs/GAMBAR KECIL 2 ) no-repeat 50% 50%; -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg);">
<a class="fancybox" rel="fncbx" href="MASUKIN img/original/GAMBAR BESAR 2 " target="_blank">industrial-mech</a>
</div>
<div id="pic-3" class="pic" style="top:60px;left:294px;background:url(MASUKIN img/thumbs/GAMBAR KECIL 3 ) no-repeat 50% 50%; -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg);">
<a class="fancybox" rel="fncbx" href="MASUKIN img/original/GAMBAR BESAR 3 " target="_blank">4-green-beach</a>
</div>

<div class="drop-box">
</div>
</div>
<div class="clear">
<div class="container tutorial-info">
</div>
</div>

Oke selamat mencoba..!!!!
Ket :
MASUKIN img/thumbs/GAMBAR KECIL 1 ( SIlahkan masukin Url gambar yg berukuran kecil )
MASUKIN img/original/GAMBAR BESAR 1 ( Silahkan masukin Url gambar asli nya yg gede'^_^)

MeMbLe

Blogger Themes

Galeri Lightbox CSS3 Dengan jQuery

Senin, 11 April 2011

Untuk membuatnya ikuti langkah-langkah dibawah ini.

0 komentar:

Posting Komentar

Recent Posts

Follow Us

Download

Site Map

Resource

Advertise

Sport News

Visitors