1

画像用の jQuery スライダーがあり、HTML バージョンでは正常に動作しますが、asp.net データリストでは動作しません。テーブルベースの構造に互換性のある jQuery を追加できますか? 実際、ASP.NET データリストはブラウザの画像の周りにTABLE、TR、およびTDタグをレンダリングし、jQuery の実装に問題を引き起こしています。

DATA リストコード

<asp:DataList ID="dlphoto" runat="server" BorderStyle="Solid" BorderWidth="0px" RepeatColumns="3" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:Image ID="Image" runat="server" CssClass="thumbnail"
            ImageUrl='<%# "~/Photos/RoomPhotos/" + Eval("Photourl") %>' />
    </ItemTemplate>
</asp:DataList>

データリストコードをレンダリングした後、以下のようになります

<table>
  <tbody>
    <tr>
      <td><img src="../Photos/RoomPhotos/337653939_1.jpg" id="ctl01"></td>
      <td><img src="../Photos/RoomPhotos/1167094800_4.jpg" id="ctl02"></td>
      <td><img src="../Photos/RoomPhotos/1901620528_profile1.jpg" id="ctl03"></td>
    </tr>
    <tr>
      <td><img src="../Photos/RoomPhotos/337653939_1.jpg" id="ctl04"></td>
      <td><img src="../Photos/RoomPhotos/1167094800_4.jpg" id="ctl05"></td>
      <td><img src="../Photos/RoomPhotos/1901620528_profile1.jpg" id="ctl06"></td>
    </tr>
  </tbody>
</table>

データリストに適用したいJQueryスライダー

<div id="slides">
  <img src="http://4hdwall.com/wp-content/uploads/2012/04/Valentines-Day-for-mobile-150x150.jpg">
  <img src="http://4hdwall.com/wp-content/uploads/2012/04/ws_Purple_Spring_and-class-nhe-dy-a-rhy-hn-150x150.jpg">
  <img src="http://4hdwall.com/wp-content/uploads/2012/04/animal_mobile_wallpapers-150x150.jpg">
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://slidesjs.com/js/jquery.slides.min.js"></script>
<script>
$(function() {
  $('#slides').slidesjs({
    width: 940,
    height: 528
  });
});
</script>
4

0 に答える 0