Question

我正在使用以下Awkward滑块来显示文章（link）的图像。我修改了CSS来改变设计和设计。当我将它用作HTML页面时，同样适用。

但是当我尝试将它与asp.net网络表单一起使用时，由于某种原因它不起作用。可能是我错过了一些我过去几个小时无法解决的问题。

我上传了.aspx页面的HTML源代码，并对在线脚本和路径的路径进行了一些更改。 jsFiddle Link

上的虚拟图像源代码示例

我实际上需要将它用作Asp.net用户控件，它不能正常工作，因此我创建了一个简单的test.aspx页面，其中包含用户转发器控件以读取图像和图片标题＆amp;等...... ..

HTML代码看起来不错，但由于某种原因，脚本不是一个漏洞。

我很感激这方面的帮助。

在xyz.html页面屏幕截图中看起来不错

enter image description here

来自简单.aspx页面的实际OUTPUT ..

<!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>

Answer 1

已解决：我在错误的地方使用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>

jQuery Awkward Slider与asp.net webform一起使用时不起作用

1 个答案: