-2
我目前正在研究this电网。我已经遵循了所有步骤，并且据我所见，我找不到任何错误（但这可能仅仅是因为我查看了代码太久）。Javascript将不加载？
CSS和HTML似乎工作正常，但javascript/jquery不会在我的文件中运行，虽然演示工作正常。
这是相关代码：
<!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>
的JavaScript：
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();
CSS：
}
.ib-main-wrapper{
width: 100%;
overflow: hidden;
margin-top: 40px;
outline: none;
/*height dynamic*/
}
.ib-main{
position: relative;
width: 2546px;
}
.ib-main a{
float: left;
width: 210px;
height: 210px;
position: relative;
overflow: hidden;
margin: 0px 0px 2px 2px;
cursor: move;
background: #fcfcfc url(../images/Grid/annet/thumb_bg.jpg) no-repeat center center;
background-size: 110% 110%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
background: #fff url(../images/Grid/annet/ajax-loader.gif) no-repeat center center;
background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
opacity: 0.5;
}
.ib-main > a.ib-loading > span,
.ib-main a.ib-loading > span{
display: none;
}
.ib-main a img{
opacity: 0.95;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main > a > span{
display: block;
position: absolute;
width: 100%;
height: 20px;
line-height: 22px;
text-align: center;
font-size: 11px;
bottom: -20px;
left: 0px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-main a:hover > span{
bottom: 0px;
}
.ib-main a:hover img{
opacity: 0.8;
}
.ib-main a:hover{
background-size: 100% 100%;
}
.ib-content{
background: #f9f9f9;
}
.ib-content .ib-teaser{
text-align: center;
background: #333;
width: 100%;
height: 100%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.ib-teaser h2{
color: #fff;
font-size: 26px;
line-height: 26px;
padding-top: 40%;
text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-teaser h2 span{
text-transform: none;
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
display: block;
}
.ib-content .ib-teaser:hover{
background: #000;
}
.ib-content-preview{
position: absolute;
top: 44px;
left: 0px;
background: #000;
width: 100%;
height: 630px; /*dynamic*/
display: none;
}
.ib-content-preview .ib-teaser h2{
font-size: 50px;
padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
padding: 20px 0px 0px 5px;
font-size: 22px;
}
.ib-content-full{
font-family: 'Oswald';
text-transform: none;
line-height: 26px;
margin: 0px 40px;
border-top: 1px solid #333;
padding: 20px 0px;
font-size: 16px;
}
.ib-content-full p{
padding: 5px 0px;
}
.ib-preview{
overflow: hidden;
position: absolute;
top: 40px;
display: none;
}
.ib-preview-descr{
position: absolute;
bottom: 30px;
left: 10px;
z-index: 999;
font-size: 50px;
text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-preview img{
position: absolute;
}
.ib-nav span{
width: 53px;
height: 87px;
position: absolute;
top: 50%;
margin-top: -43px;
cursor: pointer;
text-indent: -9000px;
opacity: 0.6;
z-index: 999;
background: transparent url(../images/Grid/annet/nav.png) no-repeat top right;
right: 10px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.ib-nav span.ib-nav-prev{
background-position: top left;
left: 10px;
right: auto;
}
.ib-close{
top: 7px;
right: 7px;
background: transparent url(../images/close.png) no-repeat center center;
position: absolute;
width: 24px;
height: 24px;
cursor: pointer;
opacity: 0.2;
z-index: 999;
text-indent: -9000px;
}
.ib-nav span:hover, .ib-close:hover{
opacity: 1;
}
.ib-loading-large{
text-indent: -9000px;
width: 60px;
height: 60px;
background: #fff url(../images/ajax-loader.gif) no-repeat center center;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
z-index: 999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
opacity: 0.9;
}
谢谢！
尝试打开你的浏览器开发者工具或检查员看到实际的错误是什么 –
你可以展示Java脚本的一部分？有一些JavaScript来实现看文档。 – Laurent
@Lauent我编辑它:) –