个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:35:53 27 4
gpt4 key购买 nike

我正在使用以下笨拙的 slider 来显示文章 ( link) 的图像。我已经修改了 CSS 以更改设计，当我将它用作 HTML 页面时，同样的效果很好。

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

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

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

HTML 代码看起来不错，但由于某些原因，脚本无法正常工作。

在这方面，我将不胜感激。

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

enter image description here

简单 .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>

最佳答案

已解决:我在错误的地方使用了下面的 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 一起使用时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14357798/

27 4 0
文章推荐： c++ - 从 .in 文件读取对象
文章推荐： javascript - d3.js 折线图工具提示内容未显示
文章推荐： css - 我可以从我的打印 css 中删除 URL，这样网址就不会打印出来了吗？
文章推荐： web - 如何为网站创建 Facebook 测试用户？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com