Membuat CSS Lightbox image gallery

Biasanya lightbox image gallery menggunakan jQuery, kali ini kita akan buat lightbox hanya dengan html dan css.

Memang sedikit agak panjang scriptnya, namun hasilnya cukup lumayan menarik, tinggal di sesuaikan saja sesuai dengan kebutuhan.

Kali ini, Saya menggunakan external css, dan Anda bisa men-download css-nya di akhir postingan ini.

Script CSS Lightbox

<!DOCTYPE html>
<html lang="en"> 
<head>
<title> CSS only Lightbox </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://my-id.site/editor/assets/css/lightbox-custom.css">
</head>

<body>
<div id="lightbox">
<h1>CSS Lightbox</h1>
<h4>For IE7/8/9/10, Firefox, Opera, Safari and Chrome. Animation in Firefox 4+, Opera, Safari and Chrome latest versions.</h4>
<a href="#x" class="thumb b1" tabindex="1"><img src="https://my-id.site/images/bg/a1.jpg" alt="" /></a>
<a href="#x" class="thumb b2" tabindex="2"><img src="https://my-id.site/images/bg/a2.jpg" alt="" /></a>
<a href="#x" class="thumb b3" tabindex="3"><img src="https://my-id.site/images/bg/a3.jpg" alt="" /></a>
<a href="#x" class="thumb b4" tabindex="4"><img src="https://my-id.site/images/bg/a4.jpg" alt="" /></a>
<a href="#x" class="thumb b5" tabindex="5"><img src="https://my-id.site/images/bg/a5.jpg" alt="" /></a>
<div class="holder p1">
	<div class="backdrop"></div>
	<div class="frame">
		<div class="x1">
			<div class="y1">
				<img class="pic" src="https://my-id.site/images/bg/a1.jpg" alt="" />
				<p>Image 1 of 5<br />A line for descriptive text</p>
				<p class="close">CLOSE</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="https://my-id.site/images/bg/a2.jpg" alt="" />
				<p>Image 2 of 5<br />A line for descriptive text</p>
				<p class="close">CLOSE</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="https://my-id.site/images/bg/a3.jpg" alt="" />
				<p>Image 3 of 5<br />A line for descriptive text</p>
				<p class="close">CLOSE</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="https://my-id.site/images/bg/a4.jpg" alt="" />
				<p>Image 4 of 5<br />A line for descriptive text</p>
				<p class="close">CLOSE</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 p5">
	<div class="backdrop"></div>
	<div class="frame">
		<div class="x1">
			<div class="y1">
				<img class="pic" src="https://my-id.site/images/bg/a5.jpg" alt="" />
				<p>Image 5 of 5<br />A line for descriptive text</p>
				<p class="close">CLOSE</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>
<p>Click the above images for a 'Lightbox' type image popup.<br>Does not use :target so there is no problem with using the browsers 'back' button<br>and has a means of selecting the previous and next large image without<br>the need to close the large image and select from the thumbnails.</p>
</div>
</body>
</html>

Perhatikan pada baris kode No.07, itulah external css yang Saya maksud, Anda bisa men-download css-nya disini: https://my-id.site/editor/assets/css/lightbox-custom.css.
*Klik kanan pada link, lalu save as.

Dan seperti biasa, untuk melihat serta mengedit dari script diatas, silahkan Anda gunakan halaman yang telah disediakan, yaitu: Realtime HTML Editor ↗

Sampai disini saja pembahasan tentang membuat CSS Lightbox image gallery, semoga bermanfaat, dan salam sukses selalu buat Anda semua.

Mungkin Anda Menyukai