Question

我在jQuery对话框上使用了slick。在主页面上是一张小照片列表，当用户点击其中一张照片时，应该显示一个对话框，其中包含该组中的所有照片。

这是我对话框的html部分：

<div id="divPhotoDetails">
    <table cellpadding="0" cellspacing="10px" style="font-size: 0.8em">
        <tr>
            <td style="width: 640px;" id="tdPhotos"></td>
            <td class="photo-details">
                <h3><label id="lbCakeTitle" /></h3>
                <p><label id="lbCakeDescription" /></p><br />
                <h4><asp:label ID="lbCakeOccasions" runat="server" meta:resourcekey="lbCakeOccasions" /></h4>    
                <ul id="ulCakeOccasions"></ul>
                <div class="button-order">
                    <asp:Button ID="btnOrder" runat="server" meta:resourcekey = "btnOrder" CssClass="button"/>
                </div>
            </td>
        </tr>
    </table>
</div>

这是我的javascript：

    $(function () {
        $("#divPhotoDetails").dialog({
           autoOpen: false,
           title: "taart",
           modal: true,
           width: 1100,
           close: ClosePhotoDetails
        });
    });

    function InitPhotoSlicks(photo) {
        $('#tdPhotos').append('<div class="slider-nav" style="float: left; width: 610px;"></div>');

//Init the slider navigator
$('.slider-nav').slick({
    // # of slides to show at a time
    slidesToShow: 5,
    // # of slides to scroll
    slidesToScroll: 1,
    // Enable Next/Prev arrows
    arrows: true,
    // Enables centered view with partial prev/next slides.
    // Use with odd numbered slidesToShow counts.
    centerMode: true,
    // Side padding when in center mode. (px or %)
    centerPadding: '4px',
    focusOnSelect: true,
    //asNavFor: '.slider-show'
});

    for (var i = 0; i < photo.PhotoNames.length; i++) {
        $('.slider-nav').slick('slickAdd', '<div><h1><img src="' +  photo.ThumbnailPhotoPath + photo.PhotoNames[i] + '" alt="" /></h1></div>');
    }
}

    function CloseCakeDetails() {
        $('#tdPhotos').empty();
    }

我在这里遇到两个问题：

对话框打开时，只显示一张照片。点击下一个按钮后，可能会显示其他照片。
按钮（上一个，下一个）仅在我在该组中获得5张或更多照片时创建，否则它们不会被创建。

有人可以帮我解决这些问题吗？非常感谢。

并且b.t.w我使用jQuery .empty()方法来清除滑块，因为删除幻灯片方法在我的情况下似乎也不起作用。

辛

Answer 1

在打开每个对话框之前，您应该考虑使用一些超时 - 这样光滑的滑块可以进行所有需要的计算（以防止FOUC）和第一次图像加载
考虑对所有图像使用lazyload
如果您使用的是一组以上的照片 - 关闭对话框后应忽略未使用的滑块，然后在对话框关闭后将其删除

总结一下你应该用这样的东西结束的一切：

 $(function () {
   $("#yourTriggerElement").on('click', function(event, photo){
     event.preventDefault();
     $('#tdPhotos').append('<div class="slider-nav" style="float: left; width: 610px;"></div>');
     for (var i = 0; i < photo.PhotoNames.length; i++) {
       $('.slider-nav').slick('slickAdd', '<div><h1><img src="/path/to/placeholder/image.gif" data-lazy="' +  photo.ThumbnailPhotoPath + photo.PhotoNames[i] + '" alt="" /></h1></div>');
     }
     $('.slider-nav').slick({
       slidesToShow: 5,
       slidesToScroll: 1,
       arrows: true,
       centerMode: true,
       lazyLoad: ondemand,
       infinite: true,
       centerPadding: '40px', //the bigger this value is, the more side images overlap is
       focusOnSelect: true,
     });
     setTimeout(function(){
       $('#divPhotoDetails').dialog({
         autoOpen: false,
         title: "taart",
         modal: true,
         width: 1100,
         close: CloseCakeDetails
       });
     }, 300);
  })
});
function CloseCakeDetails() {
  $('.slider-nav').slick('unslick');
  $('.slider-nav').remove();
}

JQuery插件Slick，动态创建时只显示1张照片

1 个答案: