Isotope — работает на jsFiddle, но не на сайте

Я начал экспериментировать с Isotope на jsFiddle, на который наткнулся, а затем скопировал точный код в text/edit, чтобы создать очень простую тестовую страницу. Вот моя проблема: jsFiddle и тестовая страница, которую я сделал, не совпадают.

Моими желаемыми эффектами являются макет каменной кладки, три столбца и процентная ширина, чтобы они изменяли размер с помощью браузера.

Похоже, моя тестовая страница подчиняется только CSS, а не JavaScript.

Я использовал JavaScript, но не jQuery, и я понимаю, что Isotope — это подключаемый модуль jQuery. (Есть ли какой-то шаг, который я здесь пропустил, или я могу просто добавить этот код на свой сайт?)

Также есть «Внешний ресурс», который, как я теперь думаю, является кодом для оригинального jsFiddle, который я нашел, но в то время (около часа назад) я думал, что он был сгенерирован для меня, когда я писал скрипт, и что я должен был прикрепить это сохраняется под тем же именем, что и «jquery.isotope.min.js». (Никогда раньше не использовал jsFiddle, ха-ха) Однако удаление ссылки на код не влияет на сайт.

Код jsFiddle на моей странице test.html, запрашивающий JavaScript и CSS:

<link rel="stylesheet" href="teststyle.css">
<script type="text/javascript" src="jquery.isotope.min.js"></script>
<script type="text/javascript" src="js.js"></script>

person Emily Ryder    schedule 27.07.2013    source источник


Ответы (2)


ваши теги script не закрыты должным образом

<link rel="stylesheet" href="teststyle.css">
<script type="text/javascript" src="jquery.isotope.min.js"></script>
<script type="text/javascript" src="js.js"></script>

оставление незакрытым тега script может помешать правильному включению следующего тега script на страницу.

Другими словами: это не jsfiddle проблема.

person Arun P Johny    schedule 27.07.2013
comment
Эй, спасибо, однако я заметил это всего за несколько минут до того, как вы прокомментировали! Но на сайте ничего не изменилось :( - person Emily Ryder; 27.07.2013
comment
@EmilyRyder, можете ли вы попробовать те же настройки, что и в примере plnkr.co/edit/xix4dTo9ar8zKZNOMNQH?p =предварительный просмотр - person Arun P Johny; 27.07.2013
comment
@EmilyRyder, можете ли вы воспроизвести тот же код на своей тестовой странице - сохранить ту же структуру, что и файлы и стили? - person Arun P Johny; 27.07.2013

вы должны прикрепить файл jquery, а также функцию обратного вызова, вам не хватает обеих частей

использовать этот

<link rel="stylesheet" href="teststyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="jquery.isotope.min.js">
<script>
$(document).ready(function(){
var $container = $('#container');

$container.load(function () {
    $container.isotope({
        // options...
    });
});


$(function () {
    var $container = $('#container'),
        $items = $('.item');

    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 0
        },
        resizesContainer: false,
        getSortData: {
            fitOrder: function ($item) {
                var order,
                index = $item.index();

                if ($item.hasClass('large') && index % 2) {
                    order = index + 1.5;
                } else {
                    order = index;
                }
                return order;
            }
        },
        sortBy: 'fitOrder'
    });

    $items.click(function () {
        var $this = $(this);
        // nothing to change if this already has large class
        if ($this.hasClass('large')) {
            return;
        }
        var $previousLargeItem = $items.filter('.large');

        $previousLargeItem.removeClass('large');
        $this.addClass('large');
        $container
        // update sort data on changed items
        .isotope('updateSortData', $this)
            .isotope('updateSortData', $previousLargeItem)
        // trigger layout and sort
        .isotope();
    });
});
});
</script>
person Hushme    schedule 27.07.2013
comment
Я просмотрел функции обратного вызова, и мне они не нужны. Кроме того, третий скрипт точно такой же, как мой скрипт js.js. Наконец, вы включили какой-то другой jquery ajax с кодом, который выглядит как мошенничество. Так что я так не думаю. Почему ты говоришь мне это делать? - person Emily Ryder; 27.07.2013
comment
Я только что попытался вызвать файл js.js, как вы рекомендовали, но он выглядит так же. Я действительно хочу знать, почему вы хотите, чтобы я вызывал этот код ajax.googleapis.com - person Emily Ryder; 27.07.2013
comment
@EmilyRyder вы не включили библиотеку jQuery, если вы посмотрите на консоль, она выдает ошибку, включите библиотеку до того, как будет включена библиотека изотопов <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> - person Arun P Johny; 27.07.2013
comment
@ArunPJohny Теперь я понимаю. Извините, что подумал, что это мошенничество, ха-ха. ПОЭТОМУ Я ДОБАВИЛ ЭТУ БИБЛИОТЕКУ.... но теперь она вообще не загружается. Вот новая ссылка emilyryder.com/test/test2.html - person Emily Ryder; 27.07.2013
comment
@EmilyRyder работает, но элементы скрыты из-за некоторых проблем, связанных со стилем. - person Arun P Johny; 27.07.2013
comment
@ArunPJohny Думаю, это подводит нас к моему следующему вопросу ... откуда вы знаете, что это связано со стилем, и есть ли у вас предложения? (кстати, ты такой классный, что помог мне с этим, ха-ха) - person Emily Ryder; 27.07.2013
comment
@EmilyRyder, возможно, вы можете взглянуть на plnkr.co/edit/xix4dTo9ar8zKZNOMNQH?p=preview - person Arun P Johny; 27.07.2013
comment
@ArunPJohny Думаю, у меня все та же проблема, когда я вижу ее в редакторе, но когда я загружаю файлы или просматриваю их в своем браузере, они не отображаются. - person Emily Ryder; 27.07.2013
comment
@ArunPJohny Я имею в виду - изображения отображаются, но javascript все еще не работает. - person Emily Ryder; 27.07.2013