Изотоп не может получить заказ на работу

Question

Изотоп не может получить заказ на работу

0

Поэтому я использую изотоп для отображения и заказа серии "предметов". Пока элементы отображаются так, как я хочу, чтобы их порядок не работал вообще. Я пытаюсь заказать их с помощью простого parseInt, и я вытягиваю свои волосы, пытаясь понять, что я делаю неправильно. Любая помощь приветствуется!

Предварительный просмотр того, над чем я работаю, можно увидеть здесь: http://tinyurl.com/jwz94pn

Javascript для Isotope:

    var loadIsotope = function () {
       var $container = $('#social-feed');
       $container.isotope({
          // options
          itemSelector: '.item',

          masonry: {
            gutter: '.gutter-sizer'
          },
          getSortData: {
            number: '.order parseInt',
          },

          sortBy: 'number'

       });
    };

HTML выглядит примерно так:

    <div id="social-feed">
       <div class="item">
          <p>item 3</p>
          <p class="order">3</p>
       </div>
       <div class="item">
          <p>item 1</p>
          <p class="order">1</p>
       </div>
       <div class="item">
          <p>item 2</p>
          <p class="order">2</p>
       </div>
    </div>

user3591941 01 май 2014, в 10:12

Источник

0

jsFiddle пожалуйста
martynas 01 май 2014, в 07:28
0

Я только что воссоздал упрощенную версию этого в jFiddle, что делает меня еще более обостренным, потому что он работает здесь: jsfiddle.net/nFK5F Может ли кто-нибудь взглянуть на страницу, на которую я ссылался выше, и предложить предложения о том, где я заложенный?
user3591941 01 май 2014, в 07:46

Теги:

javascript

jquery

jquery-isotope

1 ответ

Ещё вопросы

Я только что воссоздал упрощенную версию этого в jFiddle, что делает меня еще более обостренным, потому что он работает здесь: jsfiddle.net/nFK5F Может ли кто-нибудь взглянуть на страницу, на которую я ссылался выше, и предложить предложения о том, где я заложенный?

martynas · Answer 1 · 2014-05-01T05-48-00.000Z

Поместите код jQuery внутри document.ready или window.load следующим образом:

$(document).ready(function() {
    // All code goes here
});

Это должно работать:

<script>
    $(window).load(function(){
        // init
        loadInstagram().done(loadIsotope);

        var loadInstagram = function () {
          // create a deferred object
          var r = $.Deferred();
          var amount = 10;          

         // instagram feed script
          var userFeed = new Instafeed({
            get: 'user',
            userId: 538920369,
            accessToken: '538920369.467ede5.7ee1e8e2079e4daabd4284614c98479c',
            limit: amount,
            resolution: 'low_resolution',
            template: '<div class="item photo instagram"><img src="{{image}}" class="image" onClick="window.open(\'{{link}}\',\'_blank\'); return false;" /><div class="content-float"><p class="message">{{caption}}</p></div><div class="base-content"><a href="javascript:fbShare(\'{{link}}\', \'Fb Share\', \'{{caption}}\', \'{{image}}\', 520, 350)" class="action">Share</a><img src="images/instagram.png" class="social-icon" \></div></div>'/*,
            filter: function(image) {
                return image.caption.text.indexOf('Trim') < 0;
              }*/
          });
          userFeed.run();

          setTimeout(function () {
            // and call 'resolve' on the deferred object, once you're done

            for (var i = 0; i < instaFeed.length; ++i) {
                document.getElementById('social-feed').appendChild(instaFeed[i]);
                console.log("loop " + i);
            }
            console.log("after loop");
            r.resolve();
            orderItems();
          }, 2500);

          // return the deferred object
          return r;
        };

        var loadIsotope = function () {
          var $container = $('#social-feed');
          $container.isotope({
            // options
            itemSelector: '.item',

            masonry: {
              gutter: '.gutter-sizer'
            },
            getSortData: {
                number: '.order parseInt',
              },

            sortBy: 'number'

          });

        };

    function orderItems() {
        /* TWITTER ORDER */
        var order_twitter = new Array(1,6,7,10,13,15,17);

        var elems = document.getElementsByClassName('twitter');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_twitter[i] + '</p>');
        }

        /* FACEBOOK ORDER */
        var order_facebook = new Array(3,5,8,12,19,20);

        var elems = document.getElementsByClassName('facebook');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_facebook[i] + '</p>');
        }

        /* INSTAGRAM ORDER */
        var order_instagram = new Array(2,4,9,11,14,16,18);

        var elems = document.getElementsByClassName('instagram');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_instagram[i] + '</p>');
        }
    }

    function fbShare(url, title, descr, image, winWidth, winHeight) {
        var winTop = (screen.height / 2) - (winHeight / 2);
        var winLeft = (screen.width / 2) - (winWidth / 2);
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width='+winWidth+',height='+winHeight+'&profile_id=38691411169');
    }

    //getElementsByClassName function
    if (!document.getElementsByClassName) {
            document.getElementsByClassName=function(cn) {
                var allT=document.getElementsByTagName('*'), allCN=[], i=0, a;
                while(a=allT[i++]) {
                    a.className==cn ? allCN[allCN.length]=a : null;
                }
                return allCN;
            }
        }

    }); 



</script>