1.3.15
28
Gallery Gambar Efek Filter Dengan CSS - Mengumpulkan koleksi gambar dalam satu frame yang susunannya secara acak dengan sistem pemanggil input-select-label, maka gambar yang sudah Anda susun dan tempatkan pada label-label tertentu akan dengan mudah Anda tampilkan dalam sebuah tampilan gallery gambar efek filter.

Untuk mengganti kinerja link pada tombol label, saya menggunakan sistem perintah CSS input radio-checked, artinya saat link pada tombol label di KLIK tidak akan mengarah pada halaman lain, sedangkan untuk menon-aktifkan isi gambar pada label yang tidak dipilih, saya menggunakan efek blur filter. Fungsi efek filter disini adalah untuk menyaring dan mengumpulkan semua isi label yang terpanggil (jika tombol label di KLIK), sehingga yang akan tampil hanya gambar pada label yang kita pilih saja seperti ini:




DEMO SHOW




gallery gambar



BACA JUGA
Tampilkan Foto Kecil Saat Gambar Utama Dihover



Sebenarnya kinerja efek pada gallery gambar kali ini perintahnya sama seperti pembahasan pada artikel sebelumnya tentang CSS3 Slider Concept Design, hanya pada tampilan disana saya menggunakan elemen CSS-target untuk memanggil gambar jika tombol label di KLIK. Untuk efek gambar seperti ini, saya menggunakan efek filter blur. CSS lengkapnya seperti ini:



<style>
ul {padding:0}
ul.gallery li {
  display: inline-block;
  opacity:1;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out}

label:hover {background:red;text-shadow:1px 1px 2px #111}
label {
  cursor: pointer;
  color: #fff;
  background: #39f;
  padding: 6px 19px;
  margin:0 -26px 0 26px;
  border-left:2px solid red}

img {padding: 5px;border: 1px solid #ccc;width:150px;margin:10px 2px -10px 0}
/* Menu label Item gambar */
input {display: none}
input#select-animals:checked ~ .gallery li:not(.animals-item),
input#select-Car:checked ~ .gallery li:not(.Car-item),
input#select-lovely:checked ~ .gallery li:not(.lovely-item) {opacity: 0.1}
</style>


Setiap satu menu label sudah saya isi dengan 4 buah gambar, sebagai contoh saya membuat gallery gambar dengan 3 menu label dengan masing-masing nama label yang berbeda. misalnya seperti ini:

Category Name label
  • Animal : 4 buah gambar
  • Car Picture : 4 buah gambar
  • Lovely Pic : 4 buah gambar


jadi total gambar ada 12 buah yang disusun secara acak dalam satu album gallery, Jika Anda ingin menambahkan beberapa gambar lagi pada masing-masing label, cukup letakkan URL-Gambar Anda pada category label sesuai nama menu seperti ini:


<input type="radio" id="select-all" name="button">
<label for="select-all" class="label-all">All Image</label>
<input type="radio" id="select-animals" name="button">
<label for="select-animals" class="label-animals">Animals</label>
<input type="radio" id="select-Car" name="button">
<label for="select-Car" class="label-Car">Car Picture</label>
<input type="radio" id="select-lovely" name="button">
<label for="select-lovely" class="label-lovely">Lovely</label>

<ul class="gallery">
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-1.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-1.gif"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-1.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-2.gif"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-2.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-2.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-3.gif"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-3.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-3.jpg"></li>
<li class="animals-item"><img alt="Animal Pic" src="http://Animal-4.jpg"></li>
<li class="Car-item"><img alt="Cars Pic" src="http://Car-4.jpg"></li>
<li class="lovely-item"><img alt="Lovely Pic" src="http://Lovely-4.gif"></li>
</ul>


Mungkin saat ini Anda banyak memiliki koleksi gambar, namun bingung akan menyusunnya seperti apa untuk ditampilkan dalam blog. Dengan Membuat Gallery Gambar Efek Filter Dengan CSS seperti ini akan membuat album gambar Anda terlihat lebih rapi dan menarik.
Selamat mencoba..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Gallery Gambar Efek Filter Dengan CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

28 komentar

  1. Wah bener, bisa keliatan lebih rapi... Tapi kalau ditayanginbanyak gambar gitu caranya biar nggak lemot gimana yaa?

    BalasHapus
    Balasan
    1. saya sudah responsivekan tampilan gambar dengan dimensi max-width=250px dan max-height=103px dimensi gambar lumayan kecil untuk membantu agar loading blog tidak terlalu berat.

      upload terlebih dahulu gambar pada picasa-album untuk mendapatkan format png, lalu ubah nilai /s1600 menjadi /s200. selanjutnya link URL-gambar itulah yang kita sisipkan disana. (gunakan ukuran original size)

      Hapus
  2. cantik sekali... tapi sayangnya saya belum lagi sampai ke tingkat ini... masih dibawah aja

    BalasHapus
    Balasan
    1. secara bertahap KK belajarnya, sama kok Devy juga masih banyak belajar.

      Hapus
  3. Bagus sekali nih mbk,tp kalau gsmbarnya diklik,tidak bisa muncul gambar besar ya? Ijin copy dulu scriptnya,lumayan bisa buat nampilin foto koleksi.

    BalasHapus
    Balasan
    1. bisa saja mas, kita tambahkan efek scale pada CSS-image, namun perintahnya hanya jika gambar di KLIK seperti yang mas inginkan menjadi zoom seperti ini:

      DEMO SHOW

      .click img {
      display: block;
      width: 300px;
      margin: 1em auto;
      border: 10px solid white;
      border-radius: 5px;
      box-shadow: 0 0 0 1px #ccc;
      -webkit-transition: all .15s ease-in-out;
      transition: all .15s ease-in-out;
      }


      Lalu kita tambahkan sedikit perintah JavaScript untuk mengangkat gambar kehalaman baru dalam satu wilayah body seperti ini:

      function openstage($elem,$stage){
      $elem.each(function(){
      var $this = $(this);
      $this.click(function(event){
      event.preventDefault();
      $stage.addClass('state--active');
      $('body').addClass('centerstage--active');
      });
      });}

      function closestage($elem,$stage){
      $elem.click(function(){
      $stage.removeClass('state--active');
      $('body').removeClass('centerstage--active');});}
      function centerstage($elem){
      var stageprops = {
      stage : $('.centerstage'),
      closebtn: $('.centerstage-close')}
      fillstage($elem,stageprops.stage);
      closestage(stageprops.closebtn,stageprops.stage);
      openstage($elem,stageprops.stage);}
      centerstage($('a:has(img)'));

      Hapus
    2. Mbk Dev, need help, saya sudah coba pasang di halaman page blog foto.
      saya pasangnya :
      code css yang atas, saya tambah css yang dikolom komentar, trus sebelum Style ditutup, saya tuliskan script yang dikomenter, trus ditutup syle, trus baru kumpulan foto2, tapi kok gak bisa diklik ya, dimanakah salahnya? atau bgmn harusnya urutannya memasang?
      maap nih saya tulis link foto saya di sini :
      http://ilmudesphoto.blogspot.com/p/all-photo-album-ilmudes-photo.html

      Hapus
    3. Devy sudah lihat tampilannya mas, sudah cukup rapi dan keren, tapi masalahnya gambar tidak bisa di KLIK begitu toh, hehe..!!
      begini mas, sebuah link bisa diKLIK karena ada URL pada teksnya, sama seperti gambar, ada URL-gambar dan ada URL-link. URL lengkap gambar umumnya seperti ini:

      <a href="http://2.bp.blogspot.com/pic-1.jpeg"><img src="http://2.bp.blogspot.com/pic-1.jpeg" alt="Sample"/>

      Coba perhatikan kode HTML diatas, pada gambar saya tidak menyertakan tag <a href=... dan pada tag img tidak saya sertakan elemen class pemanggil CSS. karena kita ingin menambahkan CSS KLIK disana dengan atribut class. maka tambahkan atribut pemanggilnya pada pengaturan HTML image. maka akan menjadi seperti ini susunannya:

      <div class="click">
      <a href="http://2.bp.blogspot.com/pic-1.jpeg"><img src="http://2.bp.blogspot.com/pic-1.jpeg" alt="Sample"/>
      </div>


      Untuk Lengkapnya mas bisa pelajari kodenya disini:

      EDIT KODE jsfiddle

      Hapus
    4. Ok, terima kasih banyak, sekarang sudah jadi, bagian galery saya ganti dengan yang "click", cuma <div class="click'> dan penutupnya saya hilangkan, jadi bagian <img alt='Animal Pic" dst, saya ganti dengan itu, dan ternyata bisa :)
      Terima kasih banyak ya mbk :)

      Hapus
  4. kebetulan saya duah bikin kak posting dengan format galery di blog saya. Tapi nggak pakai kode css dan script, karena di theme wordpress nya sudah ada fitur image galery :D

    BalasHapus
    Balasan
    1. bukannya mau membedakan kedua aplikasi ini, memang jika gambar ataupun gallery lebih sulit membuat efek-efek tertentu jika kita menggunakan blogspot, karena tataan efeknya gallery menggunakan CSS, HTML dan js support, berbeda dengan WP yang sudah menyediakan sebuah plugin untuk mengatur tampilan gambar yang kita inginkan.

      Hapus
  5. aplikasi penggunaan select label dan menggunakan blur effect untuk membedakan label yang tidak dipilih ya nov...sederhana tapi hasilnya bagus dan simple...alias mempunyai nuansa baru untuk galeri foto. jadi ini juga mengpalikasi efek transisi juga ya sista? begitukah cara kerjanya? saya pelajari dulu sementara nunggu pencerahan. makasih ya.

    BalasHapus
    Balasan
    1. benar mbah, membuat tampilan gambar menjadi samar pada label yang tidak terpilih, sedangkan transition untuk mengatur kecepatan efek filternya.

      Hapus
  6. Keren devy!! Pengen nyoba tapi mau ngrapiin label dulu, msh semrawut. Hehe..

    BalasHapus
  7. mau coba keren banget kalo bisa gitu :D ..

    BalasHapus
  8. efek filternya lmbut ,,,
    tpi bingung ,,ehehe

    BalasHapus
    Balasan
    1. kira-kira dibagian mana neh yang membuat mas fiu bingung.?

      Hapus
    2. Biasa praktek penerapannya ...hehe
      kekny butuh bimbingan lngsung nih dri devy ... hehehe :D

      Hapus
  9. Tips ini neh yang cocok buat yang gemar upload gambar di postingan, saya masih harus belajar banyak neh...

    BalasHapus
    Balasan
    1. untuk mengkategorikan gambar-gambar yang sejenis, walau dalam satu frame tetapi bisa kita pilih dengan Tombol KLIK, jadi terlihat lebih rapi dan menarik.

      Hapus
  10. tengkyu..Vy..!
    ada bahan lagi buat variasi di postingan..
    tetap semangat..!

    BalasHapus
    Balasan
    1. sama-sama mas Al, biar mas bisa membedakan tempat yang seharusnya pantes diletakkan dimana gambar mas FIU, Mbah DINAN dan sahabat-sahabat lainnya dalam satu album gallery gambar.hehe..!!

      Hapus
    2. Oya... Gmbar sy di letakin aja di ruang belakang, lumayan buat nakut2in tikus mas al....hehe

      Hapus
  11. pengen nyoba tapi takut salah,tar ga bisa bnerin lagi kalo sdh salah :-d

    BalasHapus
  12. pengen segera nyoba, tp perlu dipelajari dulu nich,,,

    BalasHapus
  13. Keren banget mbak, makasih banyak .!!! akan saya coba nanti :)

    BalasHapus
  14. bagus banget mba lihat hasilnya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK