2

我正在使用以下 Awkward 滑块来显示文章的图像(链接)。我已经修改了 CSS 来改变设计,当我将它用作 HTML 页面时效果也很好。

但是当我尝试将它与 asp.net 网络表单一起使用时,由于某种原因它不起作用。可能是我错过了一些小东西,我无法从过去几个小时中弄清楚。

我已经上传了 .aspx 页面的 HTML 源代码,并对 jsFiddle 链接上的在线脚本和虚拟图像源代码示例的路径进行了一些更改

我实际上需要将它用作无法正常工作的 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&amp;Language=en-US&amp;ParID=5&amp;Issue=5&amp;cid=1&amp;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>
4

1 回答 1

0

已解决:我在错误的地方使用了下面的 div,通过将潜水移到中继器控制之外来修复它。这是基本的 HTML 错误

<div id="showcase" class="showcase">

最终代码应如下所示

 <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 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 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>
于 2013-02-27T13:22:51.017 回答