Question

我正在尝试将两个jquery库一起使用，并且遇到了一些困难。我想让FancyZoom弹出窗口（http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery /）包含一个循环滚动条（http://jquery.malsup.com/cycle/）

要按预期测试/查看滚动条的工作，可以将fancyZoom_LoadComplete（）添加到$（document）.ready函数中。完美无缺，直到它包含在fancyzoom中。

调试窗口中没有js错误。

我的代码如下 - 注意：fancyZoom_LoadComplete（）函数是我添加到fancyZoom js文件的自定义回调函数。它按预期工作，但如果你想真正重新创建它，你需要添加

if（options.callback == true）{fancyZoom_LoadComplete（）; }

到fancyZoom.js文件中show函数的结尾。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

    <script type="text/javascript" src="js/fancyzoom.js"></script>

    <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function() {
            $('#medium_box_link').fancyZoom({ height: 250, width: 550, callback: true });
        });

        function onAfter(curr, next, opts) {
            var index = opts.currSlide;
            $("#ddlImageSelect").val(index + 1);
        }

        function fancyZoom_LoadComplete() {
            $('.slideshow').cycle({
                fx: 'fade',
                timeout: 0,
                prev: '#prev',
                next: '#next',
                after: onAfter
            })
            $("#ddlImageSelect").change(function() {
                var selvalue = parseInt($(this).val()) - 1;
                $('.slideshow').cycle(selvalue);
                return false;
            })
        }
    </script>

</head>
<body>
    <a href="#medium_box" id="medium_box_link">Launch a slideshow</a>
    <div id="medium_box" style="display: none;">
        <div class="cycleNav">
            <a href="#" class="prev" id="prev">
                <img alt="" src="images/slideshow-previous-button.png" /></a>
            <select id="ddlImageSelect">
                <option selected="selected" value="1">Slide 1</option>
                <option value="2">Slide 2</option>
                <option value="3">Slide 3</option>
            </select>
            <a href="#" class="next" id="next">
                <img alt="" src="images/slideshow-next-button.png" /></a>
        </div>
        <div class="slideshow" id="slideshow">
            <div class="slide">
                <div class="slideLeft">
                    Some Text 1</div>
                <div class="slideRight">
                    Some image 1</div>
            </div>
            <div class="slide">
                <div class="slideLeft">
                    Some Text 2</div>
                <div class="slideRight">
                    Some image 2</div>
            </div>
            <div class="slide">
                <div class="slideLeft">
                    Some Text 3</div>
                <div class="slideRight">
                    Some image 3</div>
            </div>
        </div>
    </div>
</body>
</html>

jquery Cycle＆amp; Fancyzoom在一起？

0 个答案: