minomusi00回答ポイント なしウォッチ

jQueryのfilter機能について

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

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


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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• Lhankor_Mhy2013/10/24 18:47:15

  

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

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

  スター

  • 

    2件のコメントを見る

  • Lhankor_Mhy 2013/10/24 19:39:58

    　一応、やってみました。
    　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;
    		});
    	}
    }
    

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

    スター

  • minomusi00 2013/10/25 14:15:46

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

    スター

その他の回答

• minomusi00

  2013/10/24 15:58:24

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

  ２つめの塊（HTML上でコピーしたものをそのまま次に貼りつけただけ）

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

この質問へのコメント

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

質問の情報

登録日時

2013-10-24 15:55:24

終了日時

2013-10-25 14:15:51

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• youtubeの日本人向け日本語チャンネルにおいてある種の文化教養系ビデオを作っている人たちの素性・来歴が…minminjp20013220時間前
• 生命科学の理論的論文を自分が出したデータなしで投稿して、掲載するにはどのjournalのどのsectionがいいか…ttkayyuki79421時間前
• 海外に就職したいです。 だけど、自分はコミュ力が足りないのでぼっちになるのが不安です。 実際に行かれた…匿名質問者24時間前
• VRゴーグル（４K解像度ほど）で安く世界の風景を自由に見られれば、海外旅行に行かなくても十分だと思いま…匿名質問者24時間前
• ブレインストーミングしてくれるサイト、webサービスがあったら色々教えてください 特定少数の人がアイデア…tak112日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ