画像用の 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>