jquery Cycle & Fancyzoom together?_问答_开发者

开发者 https://www.devze.com 2023-03-20 17:02 出处：网络

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

相关专题：cycle jquery

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开发者_Python百科 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>