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
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:
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
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:
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..!!
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:
BACA JUGA
Tampilkan Foto Kecil Saat Gambar Utama DihoverSebenarnya 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.
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 >>
Wah bener, bisa keliatan lebih rapi... Tapi kalau ditayanginbanyak gambar gitu caranya biar nggak lemot gimana yaa?
BalasHapussaya 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.
Hapusupload 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)
cantik sekali... tapi sayangnya saya belum lagi sampai ke tingkat ini... masih dibawah aja
BalasHapussecara bertahap KK belajarnya, sama kok Devy juga masih banyak belajar.
HapusBagus sekali nih mbk,tp kalau gsmbarnya diklik,tidak bisa muncul gambar besar ya? Ijin copy dulu scriptnya,lumayan bisa buat nampilin foto koleksi.
BalasHapusbisa saja mas, kita tambahkan efek scale pada CSS-image, namun perintahnya hanya jika gambar di KLIK seperti yang mas inginkan menjadi zoom seperti ini:
Hapus► 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)'));
Mbk Dev, need help, saya sudah coba pasang di halaman page blog foto.
Hapussaya 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
Devy sudah lihat tampilannya mas, sudah cukup rapi dan keren, tapi masalahnya gambar tidak bisa di KLIK begitu toh, hehe..!!
Hapusbegini 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
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 :)
HapusTerima kasih banyak ya mbk :)
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
BalasHapusbukannya 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.
Hapusaplikasi 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.
BalasHapusbenar mbah, membuat tampilan gambar menjadi samar pada label yang tidak terpilih, sedangkan transition untuk mengatur kecepatan efek filternya.
HapusKeren devy!! Pengen nyoba tapi mau ngrapiin label dulu, msh semrawut. Hehe..
BalasHapusmau coba keren banget kalo bisa gitu :D ..
BalasHapusefek filternya lmbut ,,,
BalasHapustpi bingung ,,ehehe
kira-kira dibagian mana neh yang membuat mas fiu bingung.?
HapusBiasa praktek penerapannya ...hehe
Hapuskekny butuh bimbingan lngsung nih dri devy ... hehehe :D
Tips ini neh yang cocok buat yang gemar upload gambar di postingan, saya masih harus belajar banyak neh...
BalasHapusuntuk mengkategorikan gambar-gambar yang sejenis, walau dalam satu frame tetapi bisa kita pilih dengan Tombol KLIK, jadi terlihat lebih rapi dan menarik.
Hapustengkyu..Vy..!
BalasHapusada bahan lagi buat variasi di postingan..
tetap semangat..!
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..!!
HapusOya... Gmbar sy di letakin aja di ruang belakang, lumayan buat nakut2in tikus mas al....hehe
Hapusartikel bagus
BalasHapuspengen nyoba tapi takut salah,tar ga bisa bnerin lagi kalo sdh salah :-d
BalasHapuspengen segera nyoba, tp perlu dipelajari dulu nich,,,
BalasHapusKeren banget mbak, makasih banyak .!!! akan saya coba nanti :)
BalasHapusbagus banget mba lihat hasilnya
BalasHapus