【发布时间】:2013-01-16 11:51:15
【问题描述】:
我正在使用以下 Awkward 滑块显示文章 (link) 的图像。我已经修改了 CSS 来改变设计,当我将它用作 HTML 页面时效果也很好。
但是当我尝试将它与 asp.net 网络表单一起使用时,由于某种原因它不起作用。可能是我错过了一些小东西,我在过去几个小时内无法弄清楚。
我已经上传了 .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>
【问题讨论】:
-
已解决:问题已解决,我在中继器控制内部使用而我不得不在中继器控制外部使用它。想通了……您可以自己回答。请使用代码添加您的答案,以便未来的用户也可以获得一些帮助。
标签: jquery asp.net html css jquery-slider