jQueryのfilter機能についてこちらのﾃﾝﾌﾟﾚｰﾄを使用してﾍﾟｰｼﾞを制作しているのですが､ http://www.alessioatzeni.com/blog/brushed-template/ ﾃﾞﾓﾍﾟｰｼﾞの｢our wo…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

jQueryのfilter機能について

こちらのﾃﾝﾌﾟﾚｰﾄを使用してﾍﾟｰｼﾞを制作しているのですが､
http://www.alessioatzeni.com/blog/brushed-template/

ﾃﾞﾓﾍﾟｰｼﾞの｢our works｣にあたる部分だけをいくつも設置して
ｶﾃｺﾞﾘｰ毎に分けられたｷﾞｬﾗﾘｰを作ろうとしています｡

section毎に $('ほげほげ').mixitup(); のような記述を指定しなければ
いけないことはなんとなくわかるのですが､この記述がこのﾃﾝﾌﾟﾚｰﾄの
どこにあるのかわからず､困っております｡

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

●質問者: minomusi00
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

● 質問者から

最初の塊はfilterも順調に動作をするのですが､
2つめの塊(HTML上でｺﾋﾟｰしたものをそのまま次に貼りつけただけ)
からは動かすことが出来ない状態です｡

▽1 ● Lhankor_Mhy

ﾍﾞｽﾄｱﾝｻｰ

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

↑の部分を複数設置したいのであれば､#work, #options, #project, #filters, #thumbs などがﾕﾆｰｸ属性になっていますので､単純にｺﾋﾟﾍﾟしても動かないだろう､と思います｡
idをそれぞれ変えるかclassで記述するかして､これらの要素に係わっている js css などをすべて書きかえることが必要になるかと思います｡Grepした感じ､CSSでの影響は少なめだと思いますが､ｽｸﾘﾌﾟﾄはあまり融通の効く形になってないように思います｡修正には結構手間がかかるのではないかな､と思いました｡

Lhankor_Mhyさんのｺﾒﾝﾄ
一応､やってみました｡ HTMLはｺﾋﾟﾍﾟして､main.jsの以下の部分を変更｡で､動くと思う｡ >|javascript| 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さんのｺﾒﾝﾄ
御丁寧にありがとうございました｡急場凌ぎなのでこれでやってみたいと思います｡