filterJSON ожидает массив элементов в результате JSON, тогда как Flickr предоставляет один родительский объект в результате, который содержит массив элементов внутри свойства items этого родительского объекта.
Это внутреннее ограничение в filterJSON, которое нельзя исправить, не изменив сам плагин следующим образом:
24a27
> itemsLocation: null,
39a43,49
> if (options.itemsLocation && $.isArray(options.itemsLocation)) {
> // extract the items from the object hierarchy
> $.each(options.itemsLocation, function () {
> r = r[this];
> });
> }
>
Затем можно указать массив имен свойств (например, itemsLocation: ['items'] для результата Flickr), чтобы извлечь элементы, с которыми нужно работать filterJSON.
Рабочая демоверсия
http://jsbin.com/enudu3 (редактируется через http://jsbin.com/enudu3)
Полный источник
https://gist.github.com/290420
/*
* filterJSON v.9.1 - http://www.jeffrey-way.com
* Last Updated: January 29, 2009
* When you attach a JSON file, it will parse it with getJSON, and then allow you to filter through and display the items on the page according to
* a specified limit, delay, transition, etc.
* Developed by Jeffrey Way
* http://jeffrey-way.com/filterjson-a-jquery-plugin/
* jeffrey@effrey-way.com
* Modified by Brian Peiris
* http://twitter.com/brianpeiris
*/
(function($) {
$.fn.filterJson = function(options) {
var defaults = {
anchorWrap : '<p>',
complete : null,
data : null,
delay : 500,
limit : 5,
index : 0,
transition : 'fade',
itemsLocation: null,
nextId : 'next',
nextText : 'More',
prevId : 'prev',
prevText : 'Last'
},
options = $.extend(defaults, options);
this.each(function() {
var $this = $(this);
$.getJSON(options.data, function(r) {
if (options.itemsLocation && $.isArray(options.itemsLocation)) {
// extract the items from the object hierarchy
$.each(options.itemsLocation, function () {
r = r[this];
});
}
// add the NEXT button
$this
.after(options.anchorWrap)
.next()
.append('<a></a>')
.children()
.attr('href', '#')
.attr('id', options.nextId)
.text(options.nextText);
// Get first set of items
options.index = getItems(r);
// when the user clicks the NEXT button
$('a#' + options.nextId).live('click', function() {
// If a previous button doesn't exist, create it!
if($('a#' + options.prevId).length == 0) {
$this
.after(options.anchorWrap)
.next().append('<a></a>')
.children()
.attr('href', '#')
.attr('id', options.prevId)
.text(options.prevText);
}
// If the user chose the "slide" transition, slideUp...otherwise fadeOut.
if(options.transition === 'slide') $this.slideUp(options.delay, emptyAndContinue);
else $this.fadeOut(options.delay, emptyAndContinue);
// remove the current items and get the next set, passing in the json file - represented by "r"
function emptyAndContinue() {
$this.empty();
options.index = getItems(r);
}
return false;
}); // end nextId click
// When the previous button is clicked, add the NEXT button if one doesn't exist.
$('a#' + options.prevId).live('click', function() {
if($('a#' + options.nextId).length == 0) {
$this
.after(options.anchorWrap)
.next().append('<a>')
.children()
.attr('href', '#')
.attr('id', options.nextId)
.text(options.nextText);
}
// If the user chose the "slide" transition, slide up...oitherwise fadeOut
if(options.transition === 'slide') $this.slideUp(options.delay, emptyAndContinue);
else $this.fadeOut(options.delay, emptyAndContinue);
// remove the current items and get the next set, passing in the json file - represented by "r"
function emptyAndContinue() {
$this.empty();
options.index = getPreviousItems(r);
}
return false;
});
return this;
}); // end getJSON
// Acccepts the parsed JSON file as a parameter "r", and then gets the next set of items.
function getItems(r) {
var i = options.index, // the current index, or offset.
dataLength = r.length; // total # objects in the JSON file.
(function append() {
if(i === dataLength) {$('a#' + options.nextId).remove(); return; } // if the index is equal to total # of items in JSON file, remove the "next" link and exit.
if(i >= options.limit + options.index) return; // if index is gte to the current index + the limit, return because reached the max.
options.complete(i, r); // call userdefined "complete" function, which appends necessary html to the page.
// If the user chose the "slide" transition, slide up...oitherwise fadeOut
if(options.transition === 'slide') $this.slideDown(options.delay);
else $this.fadeIn(options.delay);
i++;
append(); // Rinse and repeat until i equals the limit
})();
// Increase INDEX by current offset to allow for the next grouping.
return options.index + options.limit;
} /// end getItems
// Used when the PREVIOUS BUTTON is clicked.
function getPreviousItems(r) {
// Need to reduce the current options.index back to what it would have been on the previous page. A bit confusing...
var i = options.index - options.limit * 2;
(function append() { // if the user has chosen to delay the appearance of each new image...
if(i === 0) $('a#' + options.prevId).remove(); // If i = 0, we don't need a previous button.
if(i >= options.index - options.limit) return;
options.complete(i, r); // call userdefined "complete" function, which appends necessary html to the page.
if(options.transition === 'slide') $this.slideDown(options.delay);
else $this.fadeIn(options.delay);
i++;
append(); // Rinse and repeat until i equals the specified options.limit.
})();
// REDUCE index by the limit, because "PREVIOUS BUTTON" was clicked
return options.index - options.limit;
} /// end getPreviousItems
}); // end this.each
}; // end plugin. Go eat some cake.
})(jQuery);