jQueryプラグイン Isotopeの使い方について

###前提・実現したいこと
こちらを参考に、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, "ＭＳ ゴシック", 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さん、ご指摘ありがとうございます。見づらくなってしまい申し訳ありませんでした。

kei344

2016/05/19 10:25

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Lhankor_Mhy

2016/05/19 10:32

『フィルタリングがだめみたい』とは具体的にはどんな感じにダメでしたか？　エラーメッセージなどは出ましたか？

行動規範の内容に同意します

回答1件

ベストアンサー

多分ですが、

<script>を無意味に分けてしまっている
$containerが宣言されていない為undifindが返ってるんじゃないでしょうか？

まずは

「フィルタリング機能を有効に」のscript要素と内容を削除。※内容が重複しているのでいりません
「Isotopeの初期化設定」と書かれているscript要素の$(function() { });の中へ1以外のすべてのscript要素の記述内容をまとめる
var $container = $('.isotope');を2の一番はじめに追加

してみてください。

投稿2016/05/19 10:47

編集2016/05/19 10:48

manabufukai

総合スコア700

rokusan

2016/05/19 13:36

おっしゃる通りの手順で無事動きました！！一人じゃなにもわからなかったので本当に助かりました…！ありがとうございました！！

manabufukai

2016/05/19 14:03 編集

無事解決できたようで何よりです。エラーメッセージをちゃんと確認されてらっしゃるので、あとはその意味を理解するだけでご自身でも解決できるようになりますよ！・index.html:(Number) は「index.htmlの（Number行目で）」・ReferenceError は「存在しない変数が参照された場合のエラー」・SyntaxError は「構文エラー」なので『index.html:59 Uncaught ReferenceError: $container is not defined』だと、『index.htmlの59行目で存在しない変数が参照された場合のエラー（内訳）：変数「$container」が未定義』という意味ですね。直訳でもほぼほぼそのままなので、分からないエラーならGoogle翻訳してみるだけでもだいたい分かったりします。エラーメッセージを元に、これらのエラーが消えるまで修正を重ねていく、というところから始めてみると上達していくのも早いかなと思いますよ！

行動規範の内容に同意します