次のぎこちないスライダーを使用して、記事の画像を表示しています(リンク)。CSS を変更してデザインを変更し、HTML ページとして使用すると同じように機能します。
しかし、asp.net Web フォームで使用しようとすると、何らかの理由で機能しません。過去数時間から把握できない小さな何かが欠けている可能性があります。
.aspx ページの HTML ソースをアップロードし、オンライン スクリプトのパスとダミー画像のソース コード例をjsFiddle Linkに変更しました
実際には動作していないAsp.netユーザーコントロールとして使用する必要があるため、画像と画像キャプションなどを読み取るためのユーザーリピーターコントロールを備えた単純なtest.aspxページを作成しました..
HTML コードは問題ないように見えますが、何らかの理由でスクリプトがホールとして機能しません。
この点で助けていただければ幸いです。
xyz.html ページのスクリーン ショットで見栄えがします
シンプルな .aspx ページからの実際の出力..
<!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">
<head><title>
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link href="../styles/english_css.css" rel="stylesheet" type="text/css" /><link href="../styles/english-article-images.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.aw-showcase.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showcase").awShowcase(
{
content_width: 500,
content_height: 333,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: false,
transition: 'fade', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onload', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
custom_function: null /* Define a custom function that runs on content change */
});
});
</script>
</head>
<body>
<form method="post" action="test.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=1&aid=17" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkzOTY1NzA2MmRkXNTZuzSOi9aAjH5HEUpSpesn2ls=" />
</div>
<div>
<div id="article-gallery-wrapper" style="width: 500px; margin: auto;">
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<img id="rptArticleGallery_imgArticle2x3Image_0" class="showcase-image" src="../images/article/92b2298b-b2bb-446a-91c9-449c10053dcc.png" />
</div>
<div class="showcase-caption">
<span id="rptArticleGallery_lblImageCaption_0">Belarus is open for business</span>
</div>
</div>
</div>
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<img id="rptArticleGallery_imgArticle2x3Image_1" class="showcase-image" src="../images/article/gallery/4543a290-6472-4e55-a1d9-6ad5be90802d.jpg" />
</div>
<div class="showcase-caption">
<span id="rptArticleGallery_lblImageCaption_1">Caption of image</span>
</div>
</div>
</div>
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<img id="rptArticleGallery_imgArticle2x3Image_2" class="showcase-image" src="../images/article/gallery/79a30652-26ee-4cbf-a991-0f23fa7a33f5.jpg" />
</div>
<div class="showcase-caption">
<span id="rptArticleGallery_lblImageCaption_2">Caption of image</span>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>