Membuat Image Gallery Menggunakan jQuery Filters

Pernahkah anda mencoba membuat sebuah web gallery yang terdiri dari bermacam-macam kategori dan kemudian ingin mengelompokannya secara cepat ?

belajarweb-postfilters

Dalam postingan ini akan saya jelaskan bagaimana mengelompokan sebuah gallery menggunakan jQuery Filters yang ringan dan sangat mudah dalam penggunaannya.

Pertama,kita siapkan beberapa image yang berbeda kategori.

Kedua,kita buat file javascript untuk animasinya

$('.filters').filters({

filter: {
 name: 'filter', // (string) class name for links container
 element: 'a', // (string) HTML selector
 active: 'active' // (string) class name for active element
 },
 container: {
 name: 'container', // (string) class name for items container
 element: 'li' // (string) HTML selector
 },
 css3: {
 init: true, // (bool) use CSS3 transitions
 children: 'a', // (string) HTML selector (children of filter.element)
 property: 'all 1s ease', // (string) CSS3 property for transitions
 transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
 scale: '0'
 }
 },
 move: {
 init: true, // (bool) set the true if you want fixed position of elements
 easing: 'linear', // (string) set the easing of the animation,
you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
 duration: 500 // (int) set the speed of the easing animation in milliseconds
 },
 fade: {
 duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
 opacity: [0, 1] // (array) set the opacity of elements
 },
 fixed: false, // (bool) setthe true if you want adjust height of the container
 onclick: function(filter, element){}</em>

});

Javascript diatas merupakan settingan default animasi yang akan kita gunakan dalam sort image gallery kita.

Baca Juga:  PHP Function : Integer To Alphabet

Ketiga,kita buat file html yang terintegrasi dengan javascript tersebut


<div class="filters">
	<div class="filter">
		<a href="#" rel="collection_name_1">Collection #1</a>
		<a href="#" rel="collection_name_2">Collection #2</a>
		<a href="#" rel="all">All</a>
	</div>
	<div class="container">
		<ul>
			<li class="collection_name_1"> .. </li>
			<li class="collection_name_2"> .. </li>
			<li class="collection_name_1"> .. </li>
			<!-- etc. -->
		</ul>
	</div>
</div>

Untuk download script dan dokumentasi lengkap nya bisa disini. Contoh penggunaannya bisa dilihat disini

Selamat mencoba !

Komentar

comments

Damarrama

A realist dreamer and overthinker for short, an anomaly for cause , I make attractive website but still can't make you attracted to me

grain storage instagram türk takipçi satın al