jQuery Awkward Slider Не работает при использовании с веб-формой asp.net

Question

Я использую следующий ползунок Awkward для отображения изображений для статьи (ссылка). Я изменил CSS, чтобы изменить дизайн, и то же самое работает, когда я использую его в качестве HTML-страницы.

Но когда я пытаюсь использовать его с веб-формой asp.net, по какой-то причине он не работает. Может быть, мне не хватает чего-то небольшого, что я не могу понять за последние несколько часов.

Я загрузил исходный код HTML-страницы .aspx с некоторым изменением пути для онлайн-скрипта и примера исходного кода фиктивных изображений на 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&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>

jquery asp.net html css jquery-slider

2

Learning 16 Янв 2013 в 15:51

1

РЕШЕНО: проблема решена. Я использовал

внутри элемента управления повторителем, в то время как мне пришлось использовать его вне элемента управления повторителем. догадаться...

–

Learning

16 Янв 2013 в 16:05

Вы можете ответить на свой собственный ответ. Добавьте свой ответ с кодом, чтобы будущие пользователи также могли получить некоторую помощь.

–

Himanshu Jansari

27 Фев 2013 в 09:42

1 ответ

Лучший ответ

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>

0

Learning 27 Фев 2013 в 17:22

jQuery Awkward Slider Не работает при использовании с веб-формой asp.net

1 ответ

Похожие вопросы

Новые вопросы

jquery