我目前正在研究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();
谢谢！
答案 0 :(得分：0)
好像你有jQuery加载的问题。您使用//并在localhost中运行它并且未指定协议 - 路径更改为file://。这不是问题 - 它可以在生产服务器上运行。
当您测试和开发应用时，您可以将http:添加到src，这将解决它（在制作时您可以再次添加//。）
所以你的jQuery脚本标签应如下所示：
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>