更新到jQuery 1.5后，jQuery Slider Gallery(带有滚动条的滑块)停止工作 [英] jQuery Slider Gallery (slider with Scrollbar) stopped working after Update to jQuery 1.5

问题描述

我喜欢 http://jqueryfordesigners.com/slider-gallery/上的Slider Gallery，但不幸的是，在我更新了jquery + jqueryUI之后，它停止了工作.有任何想法，如何改进代码[或类似的教程/脚本]，以使其恢复正常工作? javascript看起来像这样:

I love the Slider Gallery on http://jqueryfordesigners.com/slider-gallery/, but unfortunately it stopped working after I updated jquery + jqueryUI. Any Ideas, how to improve the code [Or an similar Tutorial/Script], to get it back to work? The javascript looks like this:

window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };

HTML/CSS非常简单；一个具有隐藏的溢出和100％宽度的容器(div.SliderGallery)，一个内部包含Content的ul，一个div中的滚动条.在旧的jQuery版本(1.3或更高版本)上可以正常工作，但在V1.5上却无法执行任何操作.

The HTML/CSS is pretty simple; An Container (the div.SliderGallery) with hidden Overflow and 100% width, an ul with the Content inside and the Scrollbar in a div. Works fine with an old jQuery-Version (1.3 or something), but doesn't do anything with V1.5.

非常感谢您

最诚挚的问候

卢卡斯

推荐答案

我遇到了完全相同的问题，并且存在完全相同的问题-最新的jQuery版本在主asp.net页上被调用，并且我需要包含jQuery 1.2.6在带有滑块的页面中...这里有很多关于使用noConflict()的文章.带此完全相同的代码的参数.无论如何，这就是我所做的:

I had the exact same problem with the exact same problem - The newest version of jQuery is called on the master asp.net page, and I needed to include jQuery 1.2.6 in a page with the slider...There's lots of posts on here about using the noConflict(); argument w/ this exact same code. Anyways, here's what I did:

<script type="text/javascript" src="includes/js/jquery.nyroModal.js"></script>//This was my conflicting code - lightboxes weren't working any more with the slider implemented
<script src="includes/js/slider.js" type="text/javascript"></script>//This is jQuery 1.2.6 that I renamed for organizational purposes
<script src="includes/js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>//Here's the UI that the slider requires
<script type="text/javascript">
var jqSlider = $.noConflict(true);//You MUST use the noConflict method directly after loading the preferred library
    jqSlider(function(){ // Replace all $ as follows
        var container = jqSlider('div.sliderGallery');
        var ul = jqSlider('ul', container);
        var itemsWidth = ul.innerWidth() - container.outerWidth();
        jqSlider('.slider', container).slider({
            min: 0,
            max: 5800,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500, 'linear');
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    });
</script>// After this the rest of my functions follow, using the normal $ and jQuery 1.5

现在为我工作-棘手的部分只是正确安排脚本调用和函数.希望这会有所帮助.

Works for me now - the tricky part is just arranging the script calls and your function correctly. Hope this helps.

这篇关于更新到jQuery 1.5后，jQuery Slider Gallery(带有滚动条的滑块)停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！