2

我使用 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 更新，但没有任何反应。

我应该以另一种方式更新滑块还是一个错误？

谢谢 ！

4

1 回答 1

1

根据文档（其中很多似乎是 jsFiddle 演示），您可以使用内部下拉菜单调整任何滑块的高度。该演示展示了使用单独的函数来重新计算高度。

因此，将此功能添加到您的演示中：

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（这是不必要地重新初始化 AnySlider）并调用高度调整函数来调整您的点击处理程序

$('#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;
});​

创建所需的效果 - 参见演示。

于 2012-11-15T14:12:13.530 回答