我已经让我的网站正常工作了,还有很多错误需要解决,尽管当我在本地构建网站时,并使用“类别”按钮过滤画廊,它根本没有滞后,如果你切换回来并与过滤器按钮,你会看到我在说什么。我不知道如何复活这个:(
我正在使用 quicksand.js 插件,这实际上定义了我的画廊,我已经包含了评论,所以你不必阅读太多!:( :(
http://shannonhochkins.v5.cloudsvr.com.au/
//Gallery
$(document).ready(function(){
var limit = 28
var items = $('#stage li'),
itemsByTags = {};
// Looping though all the li items:
$('#stage li').each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
// Creating the "Everything" option in the menu:
createList('Everything',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#galleryNav a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('#stage').quicksand(link.data('list').find('li').slice(0, limit).show().animate({opacity:1.0}, 300));
e.preventDefault();
});
$('#galleryNav a:first').click();
var high_performance = true;
var $performance_container = $('#performance-toggle');
var $original_html = $performance_container.html();
$performance_container.find('a').live('click', function(e) {
if (high_performance) {
$preferences.useScaling = false;
$performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
high_performance = false;
} else {
$preferences.useScaling = true;
$performance_container.html($original_html);
high_performance = true;
}
e.preventDefault();
});
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):
var a = $('<a>',{
href:'#',
id: text +'li',
data: {list:ul}
}).appendTo('#galleryNav');
}
$("#galleryNav #Animationli").append("<span class='Animation'></span>");
$("#galleryNav #Modellingli").append("<span class='Modelling'></span>");
$("#galleryNav #Environmentli").append("<span class='Environments'></span>");
$("#galleryNav #Riggingli").append("<span class='Rigging'></span>");
$("#galleryNav #Pluginsli").append("<span class='Plugins'></span>");
$("#galleryNav #Websitesli").append("<span class='Websites'></span>");
$("#galleryNav a").live('mouseenter',function() {
$(this).find('span').stop(true).animate({opacity: 1.0, marginTop: -50}, 400);
});
$("#galleryNav a").live('mouseleave',function() {
$(this).find('span').animate({opacity: 0.5, marginTop: 0}, 400);
});
$(".stage li img").live('mouseenter',function() {
$(this).stop(true);
$(this).animate({width: "80%",opacity: 0.45}, 500);
});
$(".stage li img").live('mouseleave',function() {
$(this).animate({width: "94%", opacity: 1.00}, 500);
});
$('#Animationli,#Riggingli,#Environmentli,#Modellingli,#Pluginsli,#Websitesli').live('click', function(event){
var x = event.pageX,
y = event.pageY;
$('#cloudNavGallery').stop(true).animate({
top:y,
left:x
},600);
});
initRoulette();
});