Question

我在javascript标签面板的两个不同面板中有两个Flexsliders。它装载完美。但是，如果我通过将iPhone从纵向转为横向或调整Macbook Pro上的窗口大小来调整浏览器窗口的大小，则Flexsliders经常搞砸了。这不会一直发生，但如果我不断调整浏览器窗口大小，它最终会发生。通过将iPhone从纵向转为横向，然后单击包含其他Flexslider的其他选项卡，您可以看到最简单的操作，如下所述。

两个Flexsliders位于前两个标签中，“Commonweath＆amp; Council”和“Transmission Gallery”。如果该小组对Commonwealth＆amp; amp;理事会和我调整我的浏览器窗口大小，Flexslider将相应调整，并在开放面板中保持良好状态。但是，在我完成浏览器窗口大小调整后，单击包含第二个Flexslider的其他选项卡（在本例中为Transmission Gallery）时，Flexslider通常会搞砸。主滑块容器将更大，内部图像超大并裁剪。或者在某些情况下，主滑块变成一个旋转木马滑块，就像它下面的滑块一样。或者主滑块中的图像偏离中心。但是，如果我点击Macbook Pro上的浏览器窗口外部并单击浏览器窗口，它将弹回正确的显示。在我的iPhone上，我必须刷新网页才能正确显示。

我认为它与另一个选项卡中的Flexslider有关，该选项卡未打开，无法正确读取窗口大小变化和缩放？虽然有时它工作正常但有时它没有，所以也许它是Flexslider的一个错误？但可以肯定的是，第二次或第三次我会调整窗口大小或将我的iPhone从纵向转为横向。

http://jmoon.net/projects/phoenixrising/phoenixrising_p1.html

Answer 1

我最终使用Tweaky.com修复了我的Flexslider问题。以下是用于说明浏览器窗口大小调整的正确脚本。

<script defer src="../../scripts/jquery.flexslider.js"></script>
<script>
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
    case 0:

        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 80,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel"
        });

        //-----------------
        $(window).resize();
        //-----------------

        break;

    case 1:

        $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 80,
            itemMargin: 5,
            asNavFor: '#slider2'
        });

        $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel2"
        });

        //-----------------
        $(window).resize();
        //-----------------

    break;   
  }
}
});
})
</script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('.flex-caption').fadeToggle();
});

$('#slider2').hover(function() {
$('.flex-caption').fadeToggle();
});
});
</script>

浏览器窗口调整大小后，选项卡式面板中的Flexslider会搞乱

1 个答案: