Membuat CSS Image Gallery Tanpa Javascript

Tutorial kali ini saya akan membuat image gallery dengan CSS, ya CSS saja tanpa menggunakan jQuery atau library javascript lainnya. Saya akan memanfaatkan CSS pseudo selector :target.

CSS Images Gallery tanpa Javascript

Markup

Saya menggunakan desain dari Orman Clark yang dapat di unduh disini. Struktur HTML nya terdiri dari gambar thumbnail dan gambar gallery yang besar. Gambar gallery yang besar memiliki id masing-masing, ini digunakan untuk memilih gambar mana yang akan muncul ketika thumbnail di klik.

<div class="gallery">
    <!-- Big Gallery -->
    <div class="image-slide" id="slide1"><img src="images/slide/slide-1.jpg" alt="Slide 1"></div>
    <div class="image-slide" id="slide2"><img src="images/slide/slide-2.jpg" alt="Slide 2"></div>
    <div class="image-slide" id="slide3"><img src="images/slide/slide-3.jpg" alt="Slide 3"></div>
    <!-- /Big Gallery -->

    <!-- Gallery Thumbnail -->
    <ul class="image-list">
        <li>
            <a href="#slide1" title="Slide 1" id="link-slide1"><img src="images/thumb/slide1.jpg" alt="slide1"></a>
        </li>
        <li>
            <a href="#slide2" title="Slide 2" id="link-slide2"><img src="images/thumb/slide2.jpg" alt="slide2"></a>
        </li>
        <li>
            <a href="#slide3" title="Slide 2" id="link-slide3"><img src="images/thumb/slide3.jpg" alt="slide2"></a>
        </li>
    <ul>
    <!-- /Gallery Thumbnail -->
</div>

Setiap anchor di dalam gallery thumbnail saya beri id masing-masing, ini berfungsi nanti saat thumbnail dalam posisi active.

CSS

Pertama kita rapikan terlebih dahulu layout nya. Noise background dapat kamu slice dari file PSD atau ambil dari source code dari saya.

html {
    background: url(images/background-noise.jpg)
}
.gallery {
    width: 640px;
    position: relative;
    margin: 60px auto 0
}
.image-slide {
    width: 400px;
    height: 235px;
    position: absolute
}
.image-list {
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 240px;
    list-style: none;
    position: absolute
}
.image-list li {
    float: left;
    position: relative;
    margin: 0 0 10px 10px
}
.image-list img {
    display: block
}

Sampai sini gallery kamu akan terlihat seperti ini.

Jika kamu lihat pada desainnya, ada border-radius dan border 1px pada gallery thumbnail. Border-radius tidak dapat diterapkan pada image begitu juga dengan inset box-shadow. Jadi saya menggunakan image untuk mendapatkan efek itu. Sebenarnya dengan bantuan javascript efek tersebut dapat diterapkan tanpa menggunakan image, tapi disini saya tidak akan menggunakan javascript.

Baca Juga:  Code Iginter #2: Struktur file framework

Image akan ditambahkan dengan memanfaatkan pseudo element :after dan :before, dengan cara ini kita tidak perlu mengubah HTML markup. Image pada Gallery disembunyikan kecuali image gallery yang pertama.

.image-slide {
    opacity: 0
}
.image-slide:first-child {
    opacity: 1
}
.image-slide:after {
    content: "";
    left: 0;
    width: 415px;
    height: 245px;
    position: absolute;
    background: url(images/image-overlay-big.png) -7px -7px no-repeat
}
.image-list li a:before, .image-list li a:after {
    content: "";
    top: 0;
    left: 0;
    width: 76px;
    height: 76px;
    position: absolute
}
.image-list li a:before {
    background: url(images/image-overlay.png) -7px -7px no-repeat
}

Sekarang kita gunakan pseudo selector :target untuk mengganti image gallery pada saat gallery thumbnail di klik.

.image-slide:target {
    opacity: 1
}
/* Efek Transisi */
.image-slide {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease
}

Hasilnya akan seperti ini, coba klik salah satu thumbnail gallery.

Langkah yang terakhir adalah dengan menambahkan active state pada gallery thumbnail yang sedang aktif. Saya akan menggunakan sibling selector (~) untuk menghasilkan active state.

#slide1:target ~ .image-list #link-slide1:after,
#slide2:target ~ .image-list #link-slide2:after,
#slide3:target ~ .image-list #link-slide3:after {
    top: -2px;
    left: -3px;
    background: url(images/image-border.png) no-repeat
}

Sedikit penjelasan tentang sibling selector, selector ini akan memilih element yang berada satu level dengan element pada selector pertama pada deklarasi CSS. Bingung? Saya beri contoh,

<article>
    <p>Paragraph Satu</p>
    <div>Section Satu</div>
    <p>Paragraph Dua</p>
    <p>Paragraph Tiga</p>
</article>

Pada markup di atas, jika menggunakan selector p ~ p semua element p ikut termasuk, tapi jika menggunakan selector div ~ p semua element p setelah div ikut termasuk tapi tidak dengan element p sebelum div.

Yap CSS Gallery sudah selesai, ada keuntungan dan kerugian membuat Gallery dengan CSS saja. Keuntungannya, page load jadi lebih cepat karena tidak membutuhkan library javascript. Kerugiannya, IE (lagi-lagi IE) tidak support pseudo selector :target kecuali IE 9.

Demo Download

Komentar

comments

Arif Widipratomo

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

You may also like...

eskişehir bayan escort - samsun escort - diyarbakır escort