jquery Cycle и Fancyzoom вместе? - PullRequest
Новая
       3

jquery Cycle и Fancyzoom вместе?

1 голос
/ 15 июля 2011

Я пытаюсь использовать две библиотеки jquery вместе, и у меня возникли некоторые трудности.Я пытаюсь, чтобы всплывающее окно FancyZoom (http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/) содержало циклический скроллер (http://jquery.malsup.com/cycle/)

). Чтобы протестировать / увидеть работу скроллера, как ожидается, вы можете добавить fancyZoom_LoadComplete () к(document) .ready функция. Отлично работает до тех пор, пока она не будет включена в fancyzoom.

В окне отладки нет ошибок js.

Мой код находится ниже - ПРИМЕЧАНИЕ: fancyZoom_LoadComplete ()Функция - это пользовательский обратный вызов, который я добавил в js-файл fancyZoom. Он работает, как и ожидалось, но если вы хотите по-настоящему воссоздать его, вам нужно добавить

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

до конца функции show в файле fancyZoom.js. 

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