2013-04-21 1 views
1

У меня проблема с созданием Jquery Masonry от Desandro для работы на локальном компьютере.JQuery Masonry не работает локально, хотя работает отлично на jsFiddle

Что я имею в виду: вещь отлично работает в jsFiddle (http://jsfiddle.net/pozvolte/dwA5G/14/), но при попытке запустить HTML-файл с одним и тем же кодом локально - ну, это не так. Я попытался открыть его с Chrome 26 и Firefox 20.

HTML

<div id="container"> 
<div class="item"> 
    <a href="#bosco"> 
    <img src="http://www.promisedlandblog.com/wp-content/uploads/2010/05/noam_chomsky.jpg"> 
    </a> 
</div> 
<div class="item"> 
    <a href="#berez"> 
    <img src="http://metrouk2.files.wordpress.com/2013/03/ay_106888896.jpg"> 
    </a> 
</div> 
<div class="item"> 
    <a href="#headcrab"> 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQAu_KOgafFo71gN5pV3UBGfxUVclnC8vZuZYnGDK0uaD0PNK7L"> 
    </a> 
</div> 
<div class="item"> 
    <a href="#nrktk"> 
    <img src="http://assets2.lookatme.ru/assets/event_image-image/72/c0/981165/article_image-image-article.jpg"> 
    </a> 
</div> 
<div class="item"> 
    <a href="#utekai"> 
    <img src="http://www.budyon.org/wp-content/uploads/2012/02/mumiitroll.jpg"> 
    </a> 
</div> 
<div class="item"> 
    <a href="#troll"> 
    <img src="http://rusrep.ru/images/texts/1002/10023053_pic1.jpeg"> 
    </a> 
</div> 

CSS

div#container { 
    width:100%; 
    margin:25px; 
} 

div.item { 
    width:240px; 
    margin:10px; 
    float:left; 
} 

div.item img { 
    width:240px; 
} 

Javascript

$(function(){ 
    $('#container').masonry({ 
     itemSelector: '.item' 
    }); 
    }); 

(Конечно, там также есть JQuery 1,6 и сценарий кладки, загружается из desandro.com.)

Любая помощь очень ценится.

Update

Сценарий, как показано в HTML-файл.

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
//<![CDATA[ 
$(window).load(function(){ 
$(function(){ 

    $('#container').masonry({ 
     itemSelector: '.item' 
    }); 

    }); 
});//]]> 
</script> 
+0

Опубликовать код, который включает в себя скрипт. – Kaloyan

+0

@KaloyanIvanov Это на http://masonry.desandro.com/jquery.masonry.min.js –

+0

Плохая формулировка на моей стороне, я думаю. Я имел в виду ваш HTML для включения скриптов .. вы знаете '' и т. Д. Там может быть какая-то опечатка или что-то не так, если она работает на jsfiddle. – Kaloyan

ответ

3

Вы включаете кладовую перед jQuery. Включите их в таком порядке:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script> 

Поскольку это плагин JQuery требует JQuery быть загружен до него, чтобы работать.

+0

Большое спасибо! Ты буквально сделал свой день. :) –

+0

Добро пожаловать. :) Легко пропустить такие вещи, потому что jsfiddle включает все правильно. Могу ли я беспокоить вас, чтобы принять мой ответ, если он решил проблему? – Kaloyan

+0

сделано. Спасибо еще раз. –