design makes life richly.

Published: 5年 ago

ギャラリーページ作りました


この土日の2日で、前からやりたかったギャラリーページの制作をしていました。
機能として付けてみたかったのがソート機能で、やっぱこれあると使い勝手全然違いますよね!

前に紹介したjQueryの『Isotope』というプラグインを使ってソートさせているんですが、導入も割とすんなりいけて、結構活用性あるなって印象です!
ただ、商用で使う際は金銭発生しちゃいますが><;

ソート機能付きレイアウトプラグイン『Isotope』

仕組みとしてはナビに付けたクラスと同じクラス、カテゴリを認識して ソートしてくれるような仕組みになってます!
なんで、レイアウト作って組んじゃえば、後は画像とクラス変えて行く何で、更新性も簡単で満足な出来ですね!

今回使用した『Isotope』の コードはこんな感じ⬇

jQuery(function($){

var $container = $('#container');

$container.isotope({
itemSelector : '.element'
});

var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');

// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}

return false;
});
});

あとはCSS transitionsで動きの制御してるという感じですね!!
ここら辺のソースはIsotopeのオフィシャルそのまんまですが、CSSでこんか軽やかに動き作れるんだなーと感動!
ここら辺のコードもっと勉強したいなー!
実用性、応用性あると思いますし、CSSで動的表現出来ると結構便利ですしね!

そんな感じで、週一更新とかでギャラリーページも運営して行こう!!!

4 Comments.
  1. What i don’t realize is in truth how you are now not actually a lot more neatly-liked than you might be now. You’re very intelligent. You recognize thus significantly in the case of this matter, produced me for my part consider it from numerous numerous angles. Its like women and men are not interested except it’s something to do with Woman gaga! Your personal stuffs nice. At all times handle it up!

  2. Russell Olmeda より:

    Very good post, I’ll bookmark ギャラリーページ作りました | toybox.

  3. ギャラリーページ作りました | toybox was put into my own bookmarks. I can not wait to read even more about this topic.

  4. Hello, how are you? I hope you are doing well. I needed to say that I like this post.

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK