2

所以我有这个网站，我在其中使用 ajax 将另一个 .html 中的内容加载到容器中。我一直面临的问题是使用名为“mosaic.js”的脚本的画廊加载的内容不起作用。奇怪的是 getScript 确实适用于另一个脚本。

这是我用于内容替换器的脚本。

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

$(document).ready(function() {

var hash = window.location.hash.substr(1); var href = $('#nav a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-4)){  var toLoad = hash+'.php #projectcontainer4';  $('#projectcontainer4').load(toLoad) }    });

$('#nav a').live('click', function () {

var toLoad = $(this).attr('href')+' #projectcontainer4'; $('#projectcontainer4').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('LOADING...'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);

$('#projectcontainer4').empty();

function loadContent() { $('#projectcontainer4').load(toLoad,'',showNewContent)  } 

function showNewContent() {      $.getScript("mosaic.js"); $('#projectcontainer4').show('normal',hideLoader()); }

function hideLoader() { $('#load').fadeOut('normal');


$('html, body').animate({scrollTop : 200},800);


}

return false;   

});

});

这是在加载的内容中不起作用的脚本

(function($){

    if(!$.omr){
        $.omr = new Object();
    };

    $.omr.mosaic = function(el, options){

        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("omr.mosaic", base);

        base.init = function(){
            base.options = $.extend({},$.omr.mosaic.defaultOptions, options);

            base.load_box();
        };

        // Preload Images
        base.load_box = function(){
            // Hide until window loaded, then fade in           if (base.options.preload){
                $(base.options.backdrop, base.el).hide();
                $(base.options.overlay, base.el).hide();

                $(window).load(function(){
                    // IE transparency fade fix
                    if(base.options.options.animation == 'fade' && $(base.options.overlay, base.el).css('opacity') == 0 ) $(base.options.overlay, base.el).css('filter', 'alpha(opacity=0)');

                    $(base.options.overlay, base.el).fadeIn(200, function(){
                        $(base.options.backdrop, base.el).fadeIn(200);
                    });

                    base.allow_hover();
                });             }else{
                $(base.options.backdrop, base.el).show();
                $(base.options.overlay , base.el).show();
                base.allow_hover();             }
        };

        // Initialize hover animations
        base.allow_hover = function(){
            // Select animation             switch(base.options.animation){

                // Handle fade animations
                case 'fade':
                    $(base.el).hover(function () {
                        $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, base.options.opacity);
                    },function () {
                        $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, 0);
                    });

                    break;

                // Handle slide animations
                case 'slide':
                    // Grab default overlay x,y position
                    startX = $(base.options.overlay, base.el).css(base.options.anchor_x) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_x) : '0px';
                    startY = $(base.options.overlay, base.el).css(base.options.anchor_y) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_y) : '0px';;

                    var hoverState = {};
                    hoverState[base.options.anchor_x] = base.options.hover_x;
                    hoverState[base.options.anchor_y] = base.options.hover_y;

                    var endState = {};
                    endState[base.options.anchor_x] = startX;
                    endState[base.options.anchor_y] = startY;

                    $(base.el).hover(function () {
                        $(base.options.overlay, base.el).stop().animate(hoverState, base.options.speed);
                    },function () {
                        $(base.options.overlay, base.el).stop().animate(endState, base.options.speed);
                    });

                    break;          };
        };

        // Make it go!
        base.init();
    };

    $.omr.mosaic.defaultOptions = {
        animation   : 'fade',
        speed       : 150,
        opacity     : 1,
        preload     : 0,
        anchor_x    : 'left',
        anchor_y    : 'bottom',
        hover_x     : '0px',
        hover_y     : '67px',
        overlay     : '.mosaic-overlay',    //Mosaic overlay        backdrop    : '.mosaic-backdrop'    //Mosaic backdrop
    };

    $.fn.mosaic = function(options){
        return this.each(function(){
            (new $.omr.mosaic(this, options));
        });
    };
     })(jQuery);

这是当我用相同的方法加载它时实际工作的脚本。

// JavaScript Document

$('.ppt li:gt(0)').hide(); $('.ppt li:last').addClass('last'); $('.ppt li:first').addClass('first'); $('#play').hide();

var cur = $('.ppt li:first'); var interval;

$('#fwd').click( function() {   goFwd();    showPause(); } );

$('#back').click( function() {  goBack();   showPause(); } );





function goFwd() {  stop();     forward();  start(); }

function goBack() {     stop();     back();     start(); }

function back() {   cur.fadeOut( 500 );     if ( cur.attr('class') == 'first' )         cur = $('.ppt li:last');    else        cur = cur.prev();   cur.fadeIn( 500 );}function forward() {cur.fadeOut( 500 );if ( cur.attr('class') == 'last' )cur = $('.ppt li:first');else cur = cur.next();cur.fadeIn( 500 );}function showPause() {$('#play').hide();$('#stop').show();}function showPlay() {$('#stop').hide();$('#play').show();}function stop() {clearInterval( interval );}$(function() {start();} );
4

0 回答 0