1
私は私のウェブサイトの作成にHTML 5ボイラープレートを使用しています。私はJQueryのスライドデッキプラグインとJQueryのきれいな写真のプラグインを使用しています。ボイラープレートのjavascritファイルはページの下部に配置されていますが、これによりスライドデッキプラグインが停止します。私のウェブページのスライドデッキが機能しないのはなぜですか？
ページの上部にプラグインを含めると正しく動作しますが、下部に配置するとプラグインは停止します。インクルードは両方の場合で同じ順序になります.Jqueryがプラグインよりも最初にロードされます。これに続くHTMLが動作しています。ページの一番下には、作業コードなしのコメントがあります。
HTML5ボイラープレートには、すべてのスクリプト開始コード用のスクリプトファイルと、すべてのプラグインコード用のプラグインファイルがあります。しかし、私はこれらのファイルにそれらを置くことによって使用したプラグインをまだ入手していません。どんな助けも素晴らしいだろう。
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basics - A blog and magazine template</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/prettyPhoto.css">
<link rel="stylesheet" href="css/slidedeck.css">
<link rel="stylesheet" href="css/slidedeck.ie.css">
<script src="js/libs/modernizr-1.7.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<!--<script src="js/plugins.js"></script>
<script src="js/script.js"></script>-->
<script src="js/functions.js"></script>
<script src="js/slidedeck.js"></script>
<!-- end scripts-->
</head>
<body>
<div id="container">
<!-- Slider -->
<div id="sliderSection">
<div class="cAlign">
<div id="slidedeckFrame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1 name</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more about this</a></p>
</dd>
<dt>Slide 2</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more</a></p>
</dd>
<dt>Slide 3</dt>
<dd>
<h1>This is slide 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
<dt>Slide 4</dt>
<dd>
<h1>This is slide 4</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
</dl>
<!-- Activate the slider -->
<script>
$('.slidedeck').slidedeck();
</script>
</div> <!-- end skin-slidedeck -->
</div> <!-- end cAlign -->
</div> <!-- end of sliderSection -->
</div> <!-- end of #container -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>-->
<!-- scripts concatenated and minified via ant build script-->
<!--<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/functions.js"></script>
<script src="js/slidedeck.js"></script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
基本的に、我々はとにかく、ここで何をするか、NERFすることである（ちなみに、これはあなたが不要なものからコードをNERF方法です）コードダウン。不必要なものを取り出して、より明確なことを見てください。だからとにかくそれをしなければならないのであれば、自分でやってみませんか？私たちが必要とするものだけを問題のために残してください。また、「img/mypicture.jpg」のようなローカルファイルをすべて削除または置き換えてください。私たちにはアクセスできません。私はアイデアを持っていますが、問題はありますが、現時点では私たちにあなたにプログラムを依頼しています。私たちの時間を尊重し、コードを守ります。 –
私はHTMLをスライドデッキだけに分離しています。私は、スライドのデッキJSがアクションに最初にCSSを呼び出すと、DOMが構築された後にJSが呼び出された場合、それはうまくいかないが、私はJSを知っているわけではないという点で、それはそのままです。私はあなたにスライドデッキのJSコードも提供する必要がありますか？インクルードの配置は、私が問題を抱えているものです。プラグインの機能が終了します。私が最後にやってみたいのは、HTML5ボイラープレートに付属のプラグインファイル内のすべてのJSファイルの直後です。 – tanktery
もう少し多くのコードが必要です（例：google analytics）。しかし、状況はより明確になりつつあります。もちろん、JSを提供する必要があります。わかっている限り、問題はJSにあるからです。しかし、私は本当に、最高のライブデモを提供することだと思う？すべてのローカルファイル。私はあなたの答えが80％速くなるだろうと確信しています:) –