jquery循环&想一起变焦吗？

发布于 2024-11-23 16:04:56 字数 3698 浏览 1 评论 0原文

我正在尝试一起使用两个 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>

原文

I am trying to use two jquery libraries together and am having some difficulty. I am trying to have a FancyZoom popup (http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/) contain a cycle scroller (http://jquery.malsup.com/cycle/)

To test/see the scroller work as expected you can add fancyZoom_LoadComplete() to the $(document).ready function. Works perfectly until it is contained in the fancyzoom.

There are no js errors in the debug window.

My code is below -
NOTE: The fancyZoom_LoadComplete() function is a custom callback that I added to the fancyZoom js file. It works as expected, but if you want to truly recreate it you'll need to add

if (options.callback == true) { fancyZoom_LoadComplete(); }

to the end of the show function in the fancyZoom.js file.

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

分享到QQ

分享到微博