###前提・実現したいこと
こちらを参考に、Isotopeで要素のフィルタリングをしたいのですが、どうしてもうまくいきません。
ウィンドウ幅を拡縮したときの並び替えの動作はうまくいきましたが、フィルタリングがだめみたいです。
追記:フィルタリングがだめ、とは、切り替えのボタンを押しても動作しなかったということでした。
Lhankor_Mhyさん、ご指摘ありがとうございます。
エラーメッセージ(指しているものがあっているかさえ不安なのですが)は以下の内容でした。
index.html:59 Uncaught ReferenceError: $container is not defined
index.html:80 Uncaught SyntaxError: Unexpected token }
jqueryの知識が浅く、コピペしかできないため、困っております。何卒よろしくお願いします…
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FROM ME TO "?"</title> <link rel="stylesheet" type="text/css" href="css/portfolio.css"> <style type="text/css"> html,body{ margin: 0; } body{ font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS ゴシック", sans-serif; text-align: center; color: #6c5e66; } .side img{ margin: 50px 0 ; width:150px; } li{ list-style:none; margin-bottom:30px; color: white; } li a{ color: white; text-decoration: none; } .wrapper { overflow: hidden; } .main { float: right; width: 100%; margin: 0 0 0 -250px; } .side { float: left; width: 250px; height: 100vh; background-color: #f1c21c; text-align: center; } .content { margin: 100px 0 0 270px; } h1{ margin-top: 50px; } .title{ position: absolute; top: 100px; left: 15%; font-size: 30px; font-weight: bolder; } .item { width: 25%; } /*他と違う幅の要素を入れたい場合も、下記のように指定すればIsotopeが並べ変えてくれます*/ /*.item.w2 { width: 50%; }*/ .item img { width: 100% } /*なめらか表示*/ .isotope .item { -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -ms-transition-duration:0.2s; -o-transition-duration:0.2s; transition-duration:0.2s; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> </head> <body> <!-- main --> <div class="wrapper"> <div class="main"> <div class="content"> <!-- フィルタリングされる要素 --> <div class="isotope"> <div class="item filter-1"><img src="images/icon.png" alt="" /></div> <div class="item filter-2"><img src="images/icon.png" alt="" /></div> <div class="item filter-3"><img src="images/icon.png" alt="" /></div> </div> </div> </div> <!-- サイドバー --> <div class="side"> <img src="images/icon.png" alt="" /> <!-- フィルターきりかえボタン --> <div class="filter"> <ul> <li><a href="#" data-filter=".filter-1">FROM ME TO ...</a></li> <li><a href="#" data-filter=".filter-2">WEB</a></li> <li><a href="#" data-filter=".filter-3">ILLUSTRATION</a></li> <li><a href="#" data-filter=".filter-4">OTHER</a></li> <li><a href="#" data-filter="*" class="current">ALL</a></li> <li><a href="#">PROFILE</a></li> </ul> </div> </div> </div> <script> // Isotopeの初期化設定 $(function() { $('.isotope').isotope({ itemSelector: '.item', masonry: { columnWidth: 100 } }); }); </script> <script> // フィルタリング機能を有効に $container.isotope({ filter: '.selector' }); </script> <script> // フィルタリングさせる $('.filter a').click(function(){ $('.filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); </script> </body> </html>
追記:kei344さん、ご指摘ありがとうございます。見づらくなってしまい申し訳ありませんでした。
回答1件
あなたの回答
tips
プレビュー