Javascript无法加载？

时间：2016-02-12 15:03:31

标签： javascript jquery html css grid

我目前正在研究this网格。我已经按照所有步骤进行操作，据我所知，我找不到任何错误（但这可能只是因为我已经查看了太久的代码）。

CSS和HTML似乎工作正常，但javascript / jquery将无法在我的文件中运行，尽管该演示工作正常。

以下是相关代码：

# send expire headers
location ~* ^.+\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
    access_log off; # optional
    log_not_found off; # optional
    expires max;
}

location = ^/favicon.ico {
    access_log off;
    log_not_found off;
}

# robots noise...
location = ^/robots.txt {
    log_not_found off;
    access_log off;
    allow all;
}

# block access to hidneen files (.htaccess per example)
location ~ /\. { access_log off; log_not_found off; deny all; }

javascript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Noah Skullestad</title>
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grid.css" rel="stylesheet" type="text/css" />
<link href="../CSS/overgang.css" rel="stylesheet" type="text/css" />
<link href="../CSS/animsition.min.css" rel="stylesheet" type="text/css"/>
<link href="../fonts/font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="../CSS/normalize.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>

<!--- Scripts -->
<script type="text/javascript" src="../scripts/overganger.js"></script>
<script type="text/javascript" src="../scripts/animsition.min.js"></script>
<script type="text/javascript" src="../scripts/modernizr-custom.js"></script>
<script type="text/javascript" src="../scripts/jquery.kinetic.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../scripts/jquery.tmpl.min.js">  </script>
<script type="text/javascript" src="../scripts/grid.js"></script>

<script id="previewTmpl" type="text/x-jquery-tmpl">
        <div id="ib-img-preview" class="ib-preview">
            <img src="${src}" alt="" class="ib-preview-img"/>
            <span class="ib-preview-descr" style="display:none;">${description}</span>
            <div class="ib-nav" style="display:none;">
                <span class="ib-nav-prev">Previous</span>
                <span class="ib-nav-next">Next</span>
            </div>
            <span class="ib-close" style="display:none;">Close Preview</span>
            <div class="ib-loading-large" style="display:none;">Loading...</div>
        </div>      
    </script>
    <script id="contentTmpl" type="text/x-jquery-tmpl"> 
        <div id="ib-content-preview" class="ib-content-preview">
            <div class="ib-teaser" style="display:none;">{{html teaser}}</div>
            <div class="ib-content-full" style="display:none;">{{html content}}</div>
            <span class="ib-close" style="display:none;">Close Preview</span>
        </div>
    </script>   

<div id="ib-main-wrapper" class="ib-main-wrapper">
<div class="ib-main">
    <a href="#">
        <img src="../images/Grid/Thumbs/01.jpg" data-largesrc="../images/Grid/Originals/01.jpg" alt="image01" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/02.jpg" data-largesrc="../images/Grid/Originals/02.jpg" alt="image02" />
        <span> test</span>
    </a>
    <a href="#" class="ib-content">
        <div class="ib-teaser">
            <h2> Webdesign <span> av topp kvalitet</span></h2>
        </div>
        <div class="ib-content-full">
            <!--- Innhold --->
        </div>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/03.jpg" data-largesrc="../images/Grid/Originals/03.jpg" alt="image03" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/04.jpg" data-largesrc="../images/Grid/Originals/04.jpg" alt="image04" />
        <span> test</span>
    </a>
    <a href="#">
        <img src="../images/Grid/Originals/05.jpg" data-largesrc="../images/Grid/Originals/05.jpg" alt="image05" />
        <span> test</span>
    </a>
</div>
</div>

CSS：

var $ibWrapper  = $('#ib-main-wrapper'),

Template    = (function() {
    var kinetic_moving              = false,
// current index of the opened item
current                     = -1,
// true if the item is being opened / closed
isAnimating                 = false,
// items on the grid
$ibItems                    = $ibWrapper.find('div.ib-main > a'),
// image items on the grid
$ibImgItems                 = $ibItems.not('.ib-content'),
// total image items on the grid
imgItemsCount               = $ibImgItems.length,

init                        = function() {

    // add a class ib-image to the image items
    $ibImgItems.addClass('ib-image');
    // apply the kinetic plugin to the wrapper
    loadKinetic();
    // load some events
    initEvents();

},

loadKinetic                 = function() {

setWrapperSize();

$ibWrapper.kinetic({
    moved   : function() {

        kinetic_moving = true;

    },
    stopped : function() {

        kinetic_moving = false;

    }
});

},

setWrapperSize              = function() {

var containerMargins    = $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
$ibWrapper.css( 'height', $(window).height() - containerMargins )

},

initEvents                  = function() {

// open the item only if not dragging the container
$ibItems.bind('click.ibTemplate', function( event ) {

    if( !kinetic_moving )
        openItem( $(this) );

    return false;   

});

// on window resize, set the wrapper and preview size accordingly
$(window).bind('resize.ibTemplate', function( event ) {

    setWrapperSize();

    $('#ib-img-preview, #ib-content-preview').css({
        width   : $(window).width(),
        height  : $(window).height()
    })

});

},
openItem                    = function( $item ) {

if( isAnimating ) return false;

// if content item
if( $item.hasClass('ib-content') ) {

    isAnimating = true;
    current = $item.index('.ib-content');
    loadContentItem( $item, function() { isAnimating = false; } );

}
// if image item
else {

    isAnimating = true;
    current = $item.index('.ib-image');
    loadImgPreview( $item, function() { isAnimating = false; } );

}

},

loadImgPreview              = function( $item, callback ) {

var largeSrc        = $item.children('img').data('largesrc'),
    description     = $item.children('span').text(),
    largeImageData  = {
        src         : largeSrc,
        description : description
    };

// preload large image
$item.addClass('ib-loading');

preloadImage( largeSrc, function() {

    $item.removeClass('ib-loading');

    var hasImgPreview   = ( $('#ib-img-preview').length > 0 );

    if( !hasImgPreview )
        $('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
    else
        $('#ib-img-preview').children('img.ib-preview-img').attr( 'src', largeSrc );

    //get dimentions for the image, based on the windows size
    var dim = getImageDim( largeSrc );

    $item.removeClass('ib-img-loading');

    //set the returned values and show/animate preview
    $('#ib-img-preview').css({
        width   : $item.width(),
        height  : $item.height(),
        left    : $item.offset().left,
        top     : $item.offset().top
    }).children('img.ib-preview-img').hide().css({
        width   : dim.width,
        height  : dim.height,
        left    : dim.left,
        top     : dim.top
    }).fadeIn( 400 ).end().show().animate({
        width   : $(window).width(),
        left    : 0
    }, 500, 'easeOutExpo', function() {

        $(this).animate({
            height  : $(window).height(),
            top     : 0
        }, 400, function() {

            var $this   = $(this);
            $this.find('span.ib-preview-descr, span.ib-close').show()
            if( imgItemsCount > 1 )
                $this.find('div.ib-nav').show();

            if( callback ) callback.call();

        });

    });

    if( !hasImgPreview )
        initImgPreviewEvents();

} );

},

loadContentItem             = function( $item, callback ) {

var hasContentPreview   = ( $('#ib-content-preview').length > 0 ),
    teaser              = $item.children('div.ib-teaser').html(),
    content             = $item.children('div.ib-content-full').html(),
    contentData         = {
        teaser      : teaser,
        content     : content
    };

if( !hasContentPreview )
    $('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );

//set the returned values and show/animate preview
$('#ib-content-preview').css({
    width   : $item.width(),
    height  : $item.height(),
    left    : $item.offset().left,
    top     : $item.offset().top
}).show().animate({
    width   : $(window).width(),
    left    : 0
}, 500, 'easeOutExpo', function() {

    $(this).animate({
        height  : $(window).height(),
        top     : 0
    }, 400, function() {

        var $this   = $(this),
            $teaser = $this.find('div.ib-teaser'),
            $content= $this.find('div.ib-content-full'),
            $close  = $this.find('span.ib-close');

        if( hasContentPreview ) {
            $teaser.html( teaser )
            $content.html( content )
        }

        $teaser.show();
        $content.show();
        $close.show();

        if( callback ) callback.call();

    });

});

if( !hasContentPreview )
    initContentPreviewEvents(); 

},

// preloads an image
preloadImage                = function( src, callback ) {

$('<img/>').load(function(){

    if( callback ) callback.call();

}).attr( 'src', src );

},

initImgPreviewEvents        = function() {

var $preview    = $('#ib-img-preview');

$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {

    navigate( 'prev' );

}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {

    navigate( 'next' );

}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {

    closeImgPreview();

});

//resizing the window resizes the preview image
$(window).bind('resize.ibTemplate', function( event ) {

    var $largeImg   = $preview.children('img.ib-preview-img'),
        dim         = getImageDim( $largeImg.attr('src') );

    $largeImg.css({
        width   : dim.width,
        height  : dim.height,
        left    : dim.left,
        top     : dim.top
    })

});

},

initContentPreviewEvents    = function() {

$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {

    closeContentPreview();

});

},

// navigate the image items in fullscreen mode
navigate                    = function( dir ) {

if( isAnimating ) return false;

isAnimating     = true;

var $preview    = $('#ib-img-preview'),
    $loading    = $preview.find('div.ib-loading-large');

$loading.show();

if( dir === 'next' ) {

    ( current === imgItemsCount - 1 ) ? current = 0 : ++current;

}
else if( dir === 'prev' ) {

    ( current === 0 ) ? current = imgItemsCount - 1 : --current;

}

var $item       = $ibImgItems.eq( current ),
    largeSrc    = $item.children('img').data('largesrc'),
    description = $item.children('span').text();

preloadImage( largeSrc, function() {

    $loading.hide();

    //get dimentions for the image, based on the windows size
    var dim = getImageDim( largeSrc );

    $preview.children('img.ib-preview-img')
                    .attr( 'src', largeSrc )
                    .css({
        width   : dim.width,
        height  : dim.height,
        left    : dim.left,
        top     : dim.top
                    })
                    .end()
                    .find('span.ib-preview-descr')
                    .text( description );

    $ibWrapper.scrollTop( $item.offset().top )
              .scrollLeft( $item.offset().left );

    isAnimating = false;

});

},

closeImgPreview             = function() {

if( isAnimating ) return false;

isAnimating = true;

var $item   = $ibImgItems.eq( current );

$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
                .hide()
                .end()
                .animate({
                    height  : $item.height(),
                    top     : $item.offset().top
                    }, 500, 'easeOutExpo', function() {

                    $(this).animate({
                        width   : $item.width(),
                        left    : $item.offset().left
                        }, 400, function() {

                            $(this).fadeOut(function() {isAnimating = false;});

                    } );

                });

},

// closes the fullscreen content item
closeContentPreview         = function() {

if( isAnimating ) return false;

isAnimating = true;

var $item   = $ibItems.not('.ib-image').eq( current );

$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
                        .hide()
                        .end()
                        .animate({
                            height  : $item.height(),
                            top     : $item.offset().top
                        }, 500, 'easeOutExpo', function() {

                            $(this).animate({
                                width   : $item.width(),
                                left    : $item.offset().left
                            }, 400, function() {

                                $(this).fadeOut(function() {isAnimating = false;});

                            } );

                        });

},

getImageDim                 = function( src ) {

var img         = new Image();
img.src         = src;

var w_w = $(window).width(),
    w_h = $(window).height(),
    r_w = w_h / w_w,
    i_w = img.width,
    i_h = img.height,
    r_i = i_h / i_w,
    new_w, new_h,
    new_left, new_top;

if( r_w > r_i ) {

    new_h   = w_h;
    new_w   = w_h / r_i;

}   
else {

    new_h   = w_w * r_i;
    new_w   = w_w;

}

return {
    width   : new_w,
    height  : new_h,
    left    : (w_w - new_w) / 2,
    top     : (w_h - new_h) / 2
};

};

})();

Template.init();

谢谢！

1 个答案:

答案 0 :(得分：0)

好像你有jQuery加载的问题。您使用//并在localhost中运行它并且未指定协议 - 路径更改为file://。这不是问题 - 它可以在生产服务器上运行。

当您测试和开发应用时，您可以将http:添加到src，这将解决它（在制作时您可以再次添加//。）

所以你的jQuery脚本标签应如下所示：

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
相关问题
最新问题