Проблемы с изотопной фильтрацией

Я тестирую изотопную фильтрацию, используя пример здесь: http://jsfiddle.net/huxnL/

Однако моя изотопная фильтрация не работает. Я скопировал и вставил коды из примера. Вот мой пример: http://jsfiddle.net/74nYh/

Кто-нибудь может мне помочь, пожалуйста! Спасибо!

Мои коды, как показано ниже:

Скрипт -->

$(function () {

var $container = $('#container'),
    $select = $('#filters select');

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

$select.change(function () {
    var filters = $(this).val();;
    $container.isotope({
        filter: filters
    });
}); });

CSS -->

body {
font-family:'Helvetica Neue', Arial, sans-serif;}

#container {
border: 1px solid;
padding: 3px;
height:250px;}

.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;}

.red {
background: red;}

.blue {
background: blue;}

.green {
background: green;}

.yellow {
background: yellow;}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;}

/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;}

 .isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;}

 .isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;}

 /**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-      item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;}

/* End: Recommended Isotope styles */

Содержание -->

<div id="filters">
<select>
    <option value="*">All</option>
    <option value=".red">Red</option>
    <option value=".green">Green</option>
    <option value=".blue">Blue</option>
    <option value=".yellow">Yellow</option>
</select>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>

person reizel    schedule 13.04.2013    source источник


Ответы (1)


Я тоже новичок в этом, но я считаю, что вы забыли прикрепить свои ресурсы библиотеки Jquery. Вам нужно предоставить скрипту доступ к Jquery, Jquery UI и Isotope.

person user2278965    schedule 14.04.2013