2

我已经让我的网站正常工作了,还有很多错误需要解决,尽管当我在本地构建网站时,并使用“类别”按钮过滤画廊,它根本没有滞后,如果你切换回来并与过滤器按钮,你会看到我在说什么。我不知道如何复活这个:(

我正在使用 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();
});
4

0 回答 0