CSS, Web Design / Posted 2 years ago / 19 Komentar
css-image-gallery

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.

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

Tags

membuat image slider dengan css,membuat image slideshow dengan php,keuntungan css,membuat gallery foto dengan php,membuat image gallery dengan php,membuat galeri foto dengan css,membuat gallery dengan jquery,css image gallery,membuat galeri foto dengan html,membuat galeri foto dengan javascript,css image slider,image gallery css,tutorial menggunakan jquery,membuat gallery foto dengan html,membuat gallery foto dengan javascript,membuat image gallery,membuat image slideshow dengan javascript,membuat foto gallery dengan php,membuat slide image dengan css,membuat image gallery dengan javascript Tags: , , , , ,
cToko Toko Online

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

http://arifwidi.co.vu


19 Comments

  1. Posted February 14, 2012 at 11:39 am | Permalink

    watur nuwun mas arif buat tutorialnya, izin nyedot yaa.. :)

  2. Posted February 15, 2012 at 11:18 am | Permalink

    lagi belajar css nich … infonya OK

  3. Posted February 16, 2012 at 1:23 pm | Permalink

    mantap kang..
    dpt ilmu baru lgi ni…

  4. Posted March 2, 2012 at 9:33 am | Permalink

    wah kayanya simple pake css3 ya dari pada pake javascript gitu mas, thanks info nya mas..

  5. Posted March 18, 2012 at 11:13 am | Permalink

    Mantab bro tutorialnya
    Nambah pengetahuan
    Langsung ke TKP tuk coba

  6. Posted March 27, 2012 at 4:03 pm | Permalink

    Wah sangat membantu gan… terimakasih infonya… :)

  7. swtkkswt
    Posted March 27, 2012 at 10:32 pm | Permalink

    kalo di tambah kan kata” tentang gambar gmn ya? tiap di ganti tulisan nya di ganti jg.
    entah di bawah foto yg di perbesar atau pas di gambar yg di klik nya yg muncul ada kata”

  8. Posted March 28, 2012 at 10:46 am | Permalink

    kode css ini bisa dipake buat multipy ga?

    • Posted March 28, 2012 at 6:28 pm | Permalink

      kalau multiply bisa html/css pasti bisa dipakai

  9. Posted April 29, 2012 at 4:34 pm | Permalink

    Kayaknya pernah lihat di Sohtanaka ya?

  10. daniel
    Posted May 22, 2012 at 4:39 pm | Permalink

    mau tanya dong..untuk membuat katalog produk yang seperti di web e-commerce bagaiamana ya?

    jadi gambar produk di buat kesamping sebanyak 4 buah (misalnya)dan harga beserta deskripsi produk berada di bawah gambar tersebut??

    tapi saya menggunakan database mysql dan php untuk menyimpan gambarnya..

    mungkin bisa kasih referensi

    maaf kalau membingungkan

  11. Posted May 30, 2012 at 11:49 am | Permalink

    Mantap Mas tutorialnya. BAru tahu nih kalo bisa hanya dengan CSS :D

  12. Posted July 1, 2012 at 6:55 am | Permalink

    Maap mas,
    mas aku ni masih pemula mbanget.
    mas kalau digunakan diCMS wordpress caranya bagaimana ya mas.
    trimkasih mbaget mas

  13. Suhainda
    Posted July 4, 2012 at 5:01 pm | Permalink

    Mantap, salam coding :D

  14. Posted September 29, 2012 at 8:00 am | Permalink

    terima kasih sangat membantu sekali artikel ini..

  15. Posted November 9, 2012 at 2:56 pm | Permalink

    tambah ilmu makasih sharenya

  16. Posted December 19, 2012 at 6:26 pm | Permalink

    Wah mantab gan, CSS akan segera menyingkirkan jQuery
    Kita tunggu saja

  17. Posted March 7, 2013 at 6:14 am | Permalink

    keren mas! :)

    Saya lebih sering pake css3 carousel untuk gallery. :)

  18. setiawan
    Posted May 3, 2013 at 3:55 pm | Permalink

    wah makasih banyak mas sangat menginspirasi :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign