javascript - aspdotnetstorefront Javascript が機能しない

Question

ストアフロント内で動作する Javascript および jQuery コードで問題が発生しています。スライダーを作成するために 2 つの異なる方法を使用しようとしましたが、どちらもストアフロントでは機能しませんが、ストアの外では問題なく機能します。ファイルの場所を変更し、カスタム ファイル用に新しいディレクトリを作成するのに疲れましたが、何も機能していないようです。問題は私の仕事だと思って、すぐに使用できる無料のダウンロードをサイト外で再度試みましたが、一度 ASPDOTNETSTOREFRONT プログラムに入るとすべてが表示されますが、スクリプトは機能しなくなります。何かアイデアや助けはありますか？

Answer 1

JavaScript を使用するよりも簡単な場合は、このようなものを見ることができます。

管理者内で新しいトピックを作成し、newhomebanner のような名前を付けます

コードの例

<div id="slides">
  <div class="slides_container">
    <div class="slide"><a href="/c-1-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image.jpg" /></a></div>
    <div class="slide"><a href="/c-2-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image2.jpg" /></a></div>
    <div class="slide"><a href="/c-3-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image3.jpg" /></a></div>
    <div class="slide"><a href="/c-4-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image4.jpg" /></a></div>
  </div>
</div>

ホームページ テンプレートで、終了ヘッダー タグの直後にこれを追加します

<!-- Main Banner Start -->
<div class="main_banner clearfix">
  <asp:Literal runat="server" Text="<%$ Tokens: Topic, newhomebanner%>" />
</div><!-- Main Banner End -->

App_Themes/Skin1 の style.css 内に追加

/* Homepage Slides */
#slides {height:340px;}
.slides_container{width:930px; overflow:hidden; position:relative; display:none; border:4px solid #e1e1e1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px;}
.slides_container .slide{width:930px; height:320px;}
.slides_container .slide img{display:block;}

.pagination{margin:-20px 11px 0 0;  float:right; z-index:48; position:relative;}
.pagination li{float:left; margin:0 1px; list-style:none;}
.pagination li a{display:block; width:12px; height:0; padding-top:12px; background-image:url(images/pagination.png); background-position:0 0; float:left; overflow:hidden; outline:none;}
.pagination li.current a{background-position:0 -12px;}

次に、これら 2 つの jscript をスクリプト ライブラリに追加し、このコードをマスター テンプレートに追加します。

<!--JQUERY BANNER START -->

<script src="jscripts/jquery.easing.1.3.js"></script>
<script src="jscripts/slides.min.jquery.js"></script>
<script>
  $(function(){
    $('#slides').slides({
      preload: true,
      preloadImage: 'images/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: true
    });
  });
</script>    

<!--JQUERY BANNER END -->

明らかに、これはカテゴリにリンクする回転バナーを取得する例にすぎませんが、これが機能する場合は、速度、バナーの数などを変更できます.