Question

我使用resizeContents：false选项设置了AnythingSlider，因此内容在滑块内部处于正常大小。它适用于页面加载的内容（内容是图像和包含在div中的文本字段）。但是当我尝试在Javascript中更新幻灯片的内容时，它没有调整大小。

JS部分：

$('#media-slider').anythingSlider({
    buildStartStop: false,
    infiniteSlides: false,
    hashTags: false,
    resizeContents: false,
    enableKeyboard: false,
    stopAtEnd: true
});
$('#add-button').click(function() {
    var current_index = $('#media-slider').data('AnythingSlider').currentPage;
    $('#media-slider li:nth-child(' + current_index + ')').removeClass('empty-slide-item');
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').unbind('load').load(function() {
        $('#media-slider').anythingSlider();
    });
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').attr('height', 320).attr('src', 'http://dummyimage.com/350x320');
});

HTML部分：

<link rel="Stylesheet" type="text/css" href="http://css-tricks.com/examples/AnythingSlider/css/anythingslider.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="http://css-tricks.com/examples/AnythingSlider/js/jquery.anythingslider.js"></script>

<ul id="media-slider">
  <li class="media-slide empty-slide-item">
    <div class="empty-slide"> 
      <input type="button" id="add-button" value="Set image" />
    </div>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="" src="" />
      </div>
      <div class="slide-text">
        <input type="text" value="new image" />
      </div>
    </div>
  </li>
  <li>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="420" src="http://dummyimage.com/350x420" />
      </div>
      <div class="slide-text">
        <input type="text" value="image 1" />
      </div>
    </div>
  </li>
  <li>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="280" src="http://dummyimage.com/350x280" />
      </div>
      <div class="slide-text">
        <input type="text" value="image 2" />
      </div>
    </div>
  </li>
</ul>

CSS部分：

.media-slide .slide-content{display:block;}
.media-slide .empty-slide{display:none;}
.media-slide.empty-slide-item{height:230px;}
.media-slide.empty-slide-item .slide-content{display:none;}
.media-slide.empty-slide-item .empty-slide{display:block; width:300px; height:200px;}

我设置了一个jsfiddle来说明：http://jsfiddle.net/YEmM5/。

幻灯片2和3都可以。

在幻灯片1中，如果单击该按钮，它会伪造图像上传并将图像放入幻灯片中（它也会假定服务器响应的图像大小，因此显式设置），它不会调整大小和其他人一样。

我试图等待加载图像以调用AnythingSlider更新，但没有任何反应。

我应该以其他方式更新滑块还是错误？

谢谢！

Answer 1

根据documentation（其中很多似乎是jsFiddle演示），您可以使用中的下拉菜单调整任何高度。 demo显示使用单独的函数重新计算高度。

所以将此功能添加到您的演示中：

adjustHt = function(tar) {
    // animate the slider height to match the accordion height
    var panel = tar.closest('.panel'),
        newHt = 0,
        // target page index
        num = panel.index(),
        // calculate height of all visibile panel contents
        hts = panel.children().children(':visible').map(function(i, e) {
            return (newHt += $(e).outerHeight(true));
        }).get();
    // change height for plugin to prevent height jumping when changing slides
    $('#media-slider').data('AnythingSlider').panelSize[num][3] = newHt;
    // animate height of slider and panel
    $('.anythingSlider, .panel:eq(' + num + ')').animate({
        height: newHt
    }, 600);
};

并通过移除unbind/load（不必要地重新初始化AnythingSlider）并调用高度调整函数来调整您的点击处理程序

$('#add-button').click(function() {
    var current_index = $('#media-slider').data('AnythingSlider').currentPage;
    $('#media-slider li:nth-child(' + current_index + ')').removeClass('empty-slide-item');
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').attr('height', 320).attr('src', 'http://dummyimage.com/350x320');
    adjustHt($('.empty-slide'));
    return false;
});

创建所需效果 - 请参阅demo。

jQuery Anything滑块：幻灯片内容更新后未调整滑块大小

1 个答案: