CODEWITHSUNDEEP
jqueryjquery-masonrymodernizr
Corey Trombley
Corey Trombley

Reputation: 136

Jquery Masonry animation not working

Ok so I am trying to use Masonry for the first time and I downloaded a demo from http://www.netmagazine.com/tutorials/get-started-jquery-masonry, the demo works and I followed all the directions. when I try to even just implement it into my own site the animation does not work.

errors

GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/modernizr-2.5.3.min.js          portfolio.html:26
GET file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js  portfolio.html:26
GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/jquery.masonry.min.js  portfolio.html:26
Uncaught ReferenceError: $ is not defined script.js:1
Uncaught TypeError: undefined is not a function bootstrap.min.js:6
GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/jquery-1.7.1.min.js  portfolio.html:135

script.js

$(document).ready(function() {
  // Initialize Masonry
  $('#content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
    $(this).masonry('reload');
  });
});

css

#content {
  /*width: 980px;*/
  /*width: 95%;*/
  width: auto;
  margin: 0 auto;
}

.item {
  display: block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}

.item img {
  width: 300px;
  height: auto;
}

html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>site</title>
    <!-- <meta name="description" content=""> -->
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>


    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <!-- <link rel="stylesheet" href="css/main.css"> -->
    <link rel="stylesheet" href="css/style.css">

    <script src="js/modernizr-2.5.3.min.js"></script>


</head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">site title</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="portfolio.html" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Retouching</a></li>
                                <li><a href="#">Design</a></li>
                                <li><a href="#">Print Design</a></li>
                            </ul>
                        </li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                    <!-- <form class="navbar-form pull-right">
                        <input class="span2" type="text" placeholder="Email">
                        <input class="span2" type="password" placeholder="Password">
                        <button type="submit" class="btn">Sign in</button>
                    </form> -->
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container">

       <header class="container">
        <h1>Masonry Demo by <a href="http://www.lukeshumard.com">Luke Shumard</a></h1>
      </header>

      <div id="content" class="container clearfix">

        <div class="item">
          <img src="img/single-1.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-2.jpg" alt="" />
        </div>

        <div class="item featured">
          <img src="img/double-1.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-3.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-4.jpg" alt="" />
        </div>

        <div class="item featured">
          <img src="img/double-2.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-5.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-6.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-7.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-8.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-9.jpg" alt="" />
        </div>

        <div class="item">
          <img src="img/single-10.jpg" alt="" />
        </div>

      </div>

        <hr>

        <footer>
            <p class='pull-right'><small>&copy; 2012</small></p>
        </footer>
    </div> <!-- /container -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

    <script src="js/jquery.masonry.min.js"></script>
    <script src="js/script.js"></script>


    <script src="js/vendor/bootstrap.min.js"></script>

</body>

Upvotes: 0

Views: 3306

Answers (2)

akbar khalilzadeh
akbar khalilzadeh

Reputation: 99

$(document).ready(function () {
     $('#content').imagesLoaded(function () {
      var container = document.querySelector('#content');
      var msnry = new Masonry( container, {   
            // options
            colWidth:320,
            itemSelector: '.item',
            isFitWidth: true,
            isAnimated: true,
             animationOptions: {
            duration: 1000,
            easing: 'linear',
            queue: false
          },
        isInitLayout: false
      });

      msnry._isLayoutInited = true;
      msnry.layout();
    });
    });

Upvotes: 0

user2331875
user2331875

Reputation: 134

$ is not defined means that you didn't include jQuery library. You can download it and include it to your project or use some of the CDN links that someone is providing

Upvotes: 1

Related Questions