jQuery Custom Image Lightbox 2

Cara membuat jQuery Custom Image Lightbox 2

Apa itu jQuery Custom Image Lightbox 2? apa fungsi dari Lightbox 2
Singkatnya fungsi dan pengertian dari Custom Image Lightbox ini adalah berguna untuk mengatur setiap gambar di dalam postingan blog jadi pada saat gambar di dalam posting blog di klik akan di tampilkan secara floating dengan penuh di lengkapi dengan fitur animasi loading gif, next, previous dan tombol close, keren juga bukan Custom Image Lightbox ini.
Untuk lebih jelas tentang jQuery Custom Image Lightbox 2 silahkan lihat demo disini klik saja salah satu gambar post tersebut atau klik gambar di atas.

Tutorial Membuat jQuery Custom Image Lightbox 2

1. CSS
Letakan kode CSS berikut di atas ]]></b:skin> ataupun </style> template sobat.

#jquery-overlay
 {
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 90;
}
#jquery-lightbox {
left: 0;
line-height: 0;
position: fixed;
text-align: center;
top: 7% !important;
width: 100%;
z-index: 100;
}
#jquery-lightbox a, #jquery-lightbox a:hover {
border: none;
}
#jquery-lightbox a img {
border: none;
}
#lightbox-container-image-box {
background-color: #000;
border-radius: 8px 8px 0 0;
margin: 0 auto;
max-height: 560px;
max-width: 960px;
position: relative;
}
#lightbox-container-image {
padding: 10px;
}
img#lightbox-image {
max-height: 540px;
max-width: 940px;
}
#lightbox-loading {
height: 25%;
left: 0;
line-height: 0;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
}
#lightbox-nav {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav {
left: 0;
}
#lightbox-nav a {
outline: none;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
display: block;
height: 98% !important;
width: 49%;
}
#lightbox-nav-btnPrev {
float: left;
left: 10%;
}
#lightbox-nav-btnNext {
float: right;
right: 10%;
}
#lightbox-container-image-data-box {
background-color: #000;
border-radius: 0 0 8px 8px;
font: 10px Verdana, Helvetica, sans-serif;
line-height: 1.4em;
margin: 0 auto;
max-width: 940px;
overflow: auto;
padding: 0 10px;
}
#lightbox-container-image-data {
color: #fff;
padding: 0 10px;
}
#lightbox-container-image-data #lightbox-image-details {
float: left;
text-align: left;
width: 70%;
}
#lightbox-image-details-caption {
font-weight: 700;
}
#lightbox-image-details-currentNumber {
clear: left;
display: inline-block;
padding-bottom: 1em;
}
#lightbox-secNav-btnClose {
float: right;
padding-bottom: .7em;
width: 66px;
}

2. Berikutnya
Letakan kode berikut di atas </head> template sobat, jika sudah terdapat kode yang sama tidak perlu dilakukan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

3. Terakhir
Selanjutnya letakan lagi kode berikut ini di atas </head> template sobat

<script src='https://kampung-bodoh-x2.googlecode.com/svn/trunk/kampung-bodoh-x2-dark-v2.js' type='text/javascript'/>

Dan jangan lupa simpan template sobat.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul jQuery Custom Image Lightbox 2. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.https://kampung-bodoh.blogspot.com/2015/01/jquery-custom-image-lightbox-2_55.html

• Share
• Share
• Share
• Share
• Share

✚

Related Post