こちらのテンプレートを使用してページを制作しているのですが、
http://www.alessioatzeni.com/blog/brushed-template/
デモページの「our works」にあたる部分だけをいくつも設置して
カテゴリー毎に分けられたギャラリーを作ろうとしています。
section毎に $('ほげほげ').mixitup(); のような記述を指定しなければ
いけないことはなんとなくわかるのですが、この記述がこのテンプレートの
どこにあるのかわからず、困っております。
Our works の塊をひとつ増やすたびに、CSSとJSはどの箇所を増やせばよいのでしょうか。
どうぞ宜しくお願い致します。
最初の塊はfilterも順調に動作をするのですが、
2つめの塊(HTML上でコピーしたものをそのまま次に貼りつけただけ)
からは動かすことが出来ない状態です。
<!-- Our Work Section --> ... <!-- End Our Work Section -->
↑の部分を複数設置したいのであれば、#work, #options, #project, #filters, #thumbs などがユニーク属性になっていますので、単純にコピペしても動かないだろう、と思います。
idをそれぞれ変えるかclassで記述するかして、これらの要素に係わっている js css などをすべて書きかえることが必要になるかと思います。Grepした感じ、CSSでの影響は少なめだと思いますが、スクリプトはあまり融通の効く形になってないように思います。修正には結構手間がかかるのではないかな、と思いました。
<!-- Our Work Section --> ... <!-- End Our Work Section -->
↑の部分を複数設置したいのであれば、#work, #options, #project, #filters, #thumbs などがユニーク属性になっていますので、単純にコピペしても動かないだろう、と思います。
idをそれぞれ変えるかclassで記述するかして、これらの要素に係わっている js css などをすべて書きかえることが必要になるかと思います。Grepした感じ、CSSでの影響は少なめだと思いますが、スクリプトはあまり融通の効く形になってないように思います。修正には結構手間がかかるのではないかな、と思いました。
一応、やってみました。
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; }); } }
ただ、小手先の変更なので個人的には好きなやり方じゃないです。
御丁寧にありがとうございました。
急場凌ぎなのでこれでやってみたいと思います。
一応、やってみました。
HTMLはコピペして、main.jsの以下の部分を変更。で、動くと思う。
ただ、小手先の変更なので個人的には好きなやり方じゃないです。
2013/10/24 19:39:58御丁寧にありがとうございました。
2013/10/25 14:15:46急場凌ぎなのでこれでやってみたいと思います。