Jquery 在 <object> 内休息

Question

我在实施 jquery 内容轮播时遇到问题（作者：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/）

在这里它按预期工作： http://www.sophiadeboer.nl/carousel/carousel.php

在这里用对象标签调用：根目录/#services

问题是当我使用 html 对象标签时，轮播在打开 div 的内容后中断。

<object width="500" height="400" data='carousel/carousel.php'></object>

没有对象是不可能的，因为 jquery 版本不同。为什么同一个内容在另一个带有object标签的页面调用后会中断？

代码：

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">


<div class="container">
    <div id="ca-container" class="ca-container">
        <div class="ca-wrapper">
            <? foreach ($carousel as $carouselrow) { ?>
                <div class="ca-item ca-item-<? echo $carouselrow['ID']; ?>">
                    <div class="ca-item-main">
                        <div class="ca-icon" style="background-image:url('<? echo $carouselrow['Image']; ?>')"></div>
                        <h3><? echo $carouselrow['Title']; ?></h3>
                        <h4>
                            <span class="ca-quote">&ldquo;</span>
                            <span><? echo $carouselrow['Subtitle']; ?></span>
                        </h4>
                        <a href="#" class="ca-more">Lees meer...</a>
                    </div>
                    <div class="ca-content-wrapper">
                        <div class="ca-content">
                            <h6><? echo $carouselrow['Title']; ?></h6>
                            <a href="#" class="ca-close">Sluit</a>
                            <div class="ca-content-text">
                                <p><? echo $carouselrow['Content']; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <? } ?>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">

    $('#ca-container').contentcarousel({
        // speed for the sliding animation
        sliderSpeed: 500,
        // easing for the sliding animation
        sliderEasing: 'easeOutExpo',
        // speed for the item animation (open / close)
        itemSpeed: 500,
        // easing for the item animation (open / close)
        itemEasing: 'easeOutExpo',
        // number of items to scroll at a time
        scroll: 1,
        // if it loops (true/false)
        infinite: false
    });
</script>

以及来自 jquery.contentcarousel.js 的代码：

(function ($) {
var aux = {
    // navigates left / right
    navigate: function (dir, $el, $wrapper, opts, cache) {

        var scroll = opts.scroll,
                factor = 1,
                idxClicked = 0;

        if (cache.expanded) {
            scroll = 1; // scroll is always 1 in full mode
            factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
            idxClicked = cache.idxClicked; // the index of the clicked item
        }

        if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) {
            cache.isAnimating = false;
            return;
        }
        if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) {
            cache.isAnimating = false;
            return;
        }

        // clone the elements on the right / left and append / prepend them according to dir and scroll
        if (opts.infinite) {
            if (dir === 1) {
                $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function (i) {
                    $(this).clone(true).css('left', (cache.totalItems - idxClicked + i) * cache.itemW * factor + 'px').appendTo($wrapper);
                });
            }
            else {
                var $first = $wrapper.children().eq(0);

                $wrapper.find('div.ca-item:gt(' + (cache.totalItems - 1 - scroll) + ')').each(function (i) {
                    // insert before $first so they stay in the right order
                    $(this).clone(true).css('left', -(scroll - i + idxClicked) * cache.itemW * factor + 'px').insertBefore($first);
                });
            }
        }

        // animate the left of each item
        // the calculations are dependent on dir and on the cache.expanded value
        $wrapper.find('div.ca-item').each(function (i) {
            var $item = $(this),
                    $left = (dir === 1) ? '-=' + (cache.itemW * factor * scroll) + 'px' : '+=' + (cache.itemW * factor * scroll) + 'px';

            $item.stop().animate({
                left: $left
            }, opts.sliderSpeed, opts.sliderEasing, function () {
                if ((dir === 1 && $item.position().left < -idxClicked * cache.itemW * factor) || (dir === -1 && $item.position().left > ((cache.totalItems - 1 - idxClicked) * cache.itemW * factor))) {
                    // remove the item that was cloned
                    if (opts.infinite)
                        $item.remove();
                }
                cache.isAnimating = false;
            });
        });

    },
    // opens an item (animation) -> opens all the others
    openItem: function ($wrapper, $item, opts, cache) {
        cache.idxClicked = $item.index();
        // the item's position (1, 2, or 3) on the viewport (the visible items)
        cache.winpos = aux.getWinPos($item.position().left, cache);
        $wrapper.find('div.ca-item').not($item).hide();
        $item.find('div.ca-content-wrapper').css('left', cache.itemW + 'px').stop().animate({
            width: cache.itemW * 2 + 'px',
            left: cache.itemW + 'px'
        }, opts.itemSpeed, opts.itemEasing)
                .end()
                .stop()
                .animate({
                    left: '0px'
                }, opts.itemSpeed, opts.itemEasing, function () {
                    cache.isAnimating = false;
                    cache.expanded = true;

                    aux.openItems($wrapper, $item, opts, cache);
                });

    },
    // opens all the items
    openItems: function ($wrapper, $openedItem, opts, cache) {
        var openedIdx = $openedItem.index();

        $wrapper.find('div.ca-item').each(function (i) {
            var $item = $(this),
                    idx = $item.index();

            if (idx !== openedIdx) {
                $item.css('left', -(openedIdx - idx) * (cache.itemW * 3) + 'px').show().find('div.ca-content-wrapper').css({
                    left: cache.itemW + 'px',
                    width: cache.itemW * 2 + 'px'
                });

                // hide more link
                aux.toggleMore($item, false);
            }
        });
    },
    // show / hide the item's more button
    toggleMore: function ($item, show) {
        (show) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
    },
    // close all the items
    // the current one is animated
    closeItems: function ($wrapper, $openedItem, opts, cache) {
        var openedIdx = $openedItem.index();

        $openedItem.find('div.ca-content-wrapper').stop().animate({
            width: '0px'
        }, opts.itemSpeed, opts.itemEasing)
                .end()
                .stop()
                .animate({
                    left: cache.itemW * (cache.winpos - 1) + 'px'
                }, opts.itemSpeed, opts.itemEasing, function () {
                    cache.isAnimating = false;
                    cache.expanded = false;
                });

        // show more link
        aux.toggleMore($openedItem, true);

        $wrapper.find('div.ca-item').each(function (i) {
            var $item = $(this),
                    idx = $item.index();

            if (idx !== openedIdx) {
                $item.find('div.ca-content-wrapper').css({
                    width: '0px'
                })
                        .end()
                        .css('left', ((cache.winpos - 1) - (openedIdx - idx)) * cache.itemW + 'px')
                        .show();

                // show more link
                aux.toggleMore($item, true);
            }
        });
    },
    // gets the item's position (1, 2, or 3) on the viewport (the visible items)
    // val is the left of the item
    getWinPos: function (val, cache) {
        switch (val) {
            case 0                  :
                return 1;
                break;
            case cache.itemW        :
                return 2;
                break;
            case cache.itemW * 2    :
                return 3;
                break;
        }
    }
},
methods = {
    init: function (options) {

        if (this.length) {

            var settings = {
                sliderSpeed: 500, // speed for the sliding animation
                sliderEasing: 'easeOutExpo', // easing for the sliding animation
                itemSpeed: 500, // speed for the item animation (open / close)
                itemEasing: 'easeOutExpo', // easing for the item animation (open / close)
                scroll: 1, // number of items to scroll at a time
                infinite: true          //  tells carousel wether or not to clone items and/or continue scroll past first and last
            };

            return this.each(function () {

                // if options exist, lets merge them with our default settings
                if (options) {
                    $.extend(settings, options);
                }

                var $el = $(this),
                        $wrapper = $el.find('div.ca-wrapper'),
                        $items = $wrapper.children('div.ca-item'),
                        cache = {};

                // save the with of one item
                cache.itemW = $items.width();
                // save the number of total items
                cache.totalItems = $items.length;

                // add navigation buttons
                if (cache.totalItems > 3)
                    $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')

                // control the scroll value
                if (settings.scroll < 1)
                    settings.scroll = 1;
                else if (settings.scroll > 3)
                    settings.scroll = 3;

                var $navPrev = $el.find('span.ca-nav-prev'),
                        $navNext = $el.find('span.ca-nav-next');

                // hide the items except the first 3
                $wrapper.css('overflow', 'hidden');

                // the items will have position absolute
                // calculate the left of each item
                $items.each(function (i) {
                    $(this).css({
                        position: 'absolute',
                        left: i * cache.itemW + 'px'
                    });
                });

                // click to open the item(s)
                $el.find('a.ca-more').live('click.contentcarousel', function (event) {
                    if (cache.isAnimating)
                        return false;
                    cache.isAnimating = true;
                    $(this).hide();
                    var $item = $(this).closest('div.ca-item');
                    aux.openItem($wrapper, $item, settings, cache);
                    return false;
                });

                // click to close the item(s)
                $el.find('a.ca-close').live('click.contentcarousel', function (event) {
                    if (cache.isAnimating)
                        return false;
                    cache.isAnimating = true;
                    var $item = $(this).closest('div.ca-item');
                    aux.closeItems($wrapper, $item, settings, cache);
                    return false;
                });

                // navigate left
                $navPrev.bind('click.contentcarousel', function (event) {
                    if (cache.isAnimating)
                        return false;
                    cache.isAnimating = true;
                    aux.navigate(-1, $el, $wrapper, settings, cache);
                });

                // navigate right
                $navNext.bind('click.contentcarousel', function (event) {
                    if (cache.isAnimating)
                        return false;
                    cache.isAnimating = true;
                    aux.navigate(1, $el, $wrapper, settings, cache);
                });

                // adds events to the mouse
                $el.bind('mousewheel.contentcarousel', function (e, delta) {
                    if (delta > 0) {
                        if (cache.isAnimating)
                            return false;
                        cache.isAnimating = true;
                        aux.navigate(-1, $el, $wrapper, settings, cache);
                    }
                    else {
                        if (cache.isAnimating)
                            return false;
                        cache.isAnimating = true;
                        aux.navigate(1, $el, $wrapper, settings, cache);
                    }
                    return false;
                });

            });
        }
    }
};

$.fn.contentcarousel = function (method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.contentcarousel');
    }
};

})(jQuery);

Answer 1

您是否尝试使用 <embed> 和 src 属性来加载您的页面，而不是 <object data=？ See object/embed tag reference here.

Answer 2

它不起作用背后的原因必须是 3 个冲突的 jquery 版本。我现在已经通过使内容与另一个 jquery 版本一起成功实现它，所以我只有 2 个版本运行 jquery 无冲突模式。

Jquery 在 <object> 内休息

Jquery breaks within <object>

javascript

jquery

circular-content-carousel