Membuat Image Gallery Dengan jQuery Filters

Apakah anada pernah melihat sebuah website yang ber tema Image Gallery , yang berisi berbagai maca...

Apakah anada pernah melihat sebuah website yang ber tema Image Gallery, yang berisi berbagai macam kategori yang dikelompokan secara cepat? tentu anda pernah melihatnya, dan apakan anda ingin membuatnya? saya yakin pasti anda tertarik ingin membuatnya.

Saya akan memcoba membatu anda untuk meng implementasikanya. Kita akan belajar untuk mengelompokan bermacam-macam kategori menjadi sebuah Image Gallery, berikut hasilnya.

Image Gallery Dengan jQuery Filters

Dalam postingan ini akan saya jelaskan bagaimana mengelompokan sebuah gallery menggunakan jQuery Filters yang ringan dan sangat mudah dalam penggunaannya berikut langkahnya.
  • Kita siapkan beberapa image yang berbeda kategori.
  • 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.
  • 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 lengkapnya bisa anda Download disini. Contoh penggunaannya bisa dapat anda lihat disini.

Keyword: Cara mudah Membuat Image Gallery Dengan jQuery Filters.... meng applikasikan Image Gallery di blog atau website... penggunaan jquery Image Gallery di blog dan website... setting Image Gallery dengan jquery... membuat Image Gallery dengan jquery untuk blog... membuat Image Gallery di halam utama blog atau website... menampilkan Image Gallery di postingan...

COMMENTS

Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Membuat Image Gallery Dengan jQuery Filters
Membuat Image Gallery Dengan jQuery Filters
https://1.bp.blogspot.com/-dfPDkcYEZs4/Uoj1AP4AyJI/AAAAAAAAN58/1IghJRlJkGw/s1600/megafolio-gallery-jquery-plugin.jpg
https://1.bp.blogspot.com/-dfPDkcYEZs4/Uoj1AP4AyJI/AAAAAAAAN58/1IghJRlJkGw/s72-c/megafolio-gallery-jquery-plugin.jpg
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2013/11/image-gallery-jquery.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2013/11/image-gallery-jquery.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy