jQueryのfilter機能について



こちらのテンプレートを使用してページを制作しているのですが、
http://www.alessioatzeni.com/blog/brushed-template/

デモページの「our works」にあたる部分だけをいくつも設置して
カテゴリー毎に分けられたギャラリーを作ろうとしています。


section毎に $('ほげほげ').mixitup(); のような記述を指定しなければ
いけないことはなんとなくわかるのですが、この記述がこのテンプレートの
どこにあるのかわからず、困っております。

Our works の塊をひとつ増やすたびに、CSSとJSはどの箇所を増やせばよいのでしょうか。
どうぞ宜しくお願い致します。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/10/25 14:15:51
id:minomusi00

最初の塊はfilterも順調に動作をするのですが、

2つめの塊(HTML上でコピーしたものをそのまま次に貼りつけただけ)

からは動かすことが出来ない状態です。

ベストアンサー

id:Lhankor_Mhy No.1

回答回数813ベストアンサー獲得回数232

<!-- Our Work Section -->
...
<!-- End Our Work Section -->

 ↑の部分を複数設置したいのであれば、#work, #options, #project, #filters, #thumbs などがユニーク属性になっていますので、単純にコピペしても動かないだろう、と思います。
 idをそれぞれ変えるかclassで記述するかして、これらの要素に係わっている js css などをすべて書きかえることが必要になるかと思います。Grepした感じ、CSSでの影響は少なめだと思いますが、スクリプトはあまり融通の効く形になってないように思います。修正には結構手間がかかるのではないかな、と思いました。

id:Lhankor_Mhy

 一応、やってみました。
 HTMLはコピペして、main.jsの以下の部分を変更。で、動くと思う。

BRUSHED.filter = function (){
	if($('[id="projects"]').length > 0){		//changed
		var $container = $('[id="projects"]');		//changed
		
		$container.imagesLoaded(function() {
			$container.isotope({
			  // options
			  animationEngine: 'best-available',
			  itemSelector : '.item-thumbs',
			  layoutMode : 'fitRows'
			});
		});
	
		
		// filter items when filter link is clicked
		var $optionSets = $('[id="options"] .option-set'),		//changed
			$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
			  $this.parents('.row').find('[id="projects"]').isotope( options );		//changed
			}
			
			return false;
		});
	}
}

 ただ、小手先の変更なので個人的には好きなやり方じゃないです。

2013/10/24 19:39:58
id:minomusi00

御丁寧にありがとうございました。
急場凌ぎなのでこれでやってみたいと思います。

2013/10/25 14:15:46

その他の回答0件)

id:Lhankor_Mhy No.1

回答回数813ベストアンサー獲得回数232ここでベストアンサー

<!-- Our Work Section -->
...
<!-- End Our Work Section -->

 ↑の部分を複数設置したいのであれば、#work, #options, #project, #filters, #thumbs などがユニーク属性になっていますので、単純にコピペしても動かないだろう、と思います。
 idをそれぞれ変えるかclassで記述するかして、これらの要素に係わっている js css などをすべて書きかえることが必要になるかと思います。Grepした感じ、CSSでの影響は少なめだと思いますが、スクリプトはあまり融通の効く形になってないように思います。修正には結構手間がかかるのではないかな、と思いました。

id:Lhankor_Mhy

 一応、やってみました。
 HTMLはコピペして、main.jsの以下の部分を変更。で、動くと思う。

BRUSHED.filter = function (){
	if($('[id="projects"]').length > 0){		//changed
		var $container = $('[id="projects"]');		//changed
		
		$container.imagesLoaded(function() {
			$container.isotope({
			  // options
			  animationEngine: 'best-available',
			  itemSelector : '.item-thumbs',
			  layoutMode : 'fitRows'
			});
		});
	
		
		// filter items when filter link is clicked
		var $optionSets = $('[id="options"] .option-set'),		//changed
			$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
			  $this.parents('.row').find('[id="projects"]').isotope( options );		//changed
			}
			
			return false;
		});
	}
}

 ただ、小手先の変更なので個人的には好きなやり方じゃないです。

2013/10/24 19:39:58
id:minomusi00

御丁寧にありがとうございました。
急場凌ぎなのでこれでやってみたいと思います。

2013/10/25 14:15:46
  • id:Lhankor_Mhy
    ざっと見た感じ、テンプレートの中で使われているプラグインは MixItUp ではなくて isotope.js のような気がします。
  • id:Lhankor_Mhy
    isotope.js を適用している部分が、一意セレクタの #projects だから、複数設定できないのでは?
    main.js の BRUSHED.filter あたりのコードを読んでみると何か分かるのでは。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません