CODEWITHSUNDEEP
jqueryslick.js
Xin Rampelt
Xin Rampelt

Reputation: 11

JQuery plugin Slick, only 1 photo is shown when dynamically created

I am using slick on a jQuery dialog. On the main page is a list of small photos, when a user click on one of photos a dialog should be shown with all the photos in this group.

Here is my html part for the dialog:

<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>

Here is my 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();
    }

I got two problems here:

  1. Only one photo is shown when the dialog is open. After clicking on the next button, the other photos are shown probably.
  2. the buttons (prev, next) only created when I got 5 or more photos in that group, ontherwise they are not created.

Can someone help me on these issues? Thanks very much.

And b.t.w I'm using jQuery .empty() method to clear the slider because the remove slide method seems also not working in my case.

Xin

Upvotes: 1

Views: 2584

Answers (1)

unnamedfeeling
unnamedfeeling

Reputation: 121

  1. You should consider using some timeout before opening each dialog - so that slick slider makes all needed calculations (to prevent FOUC) and first image loads
  2. Consider using lazyload for all images
  3. If you are using more than 1 group of photos - you should unslick unused slider after dialogs are closed and then remove it content after dialog has closed

To summarize everything you should end with something like this:

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

Upvotes: 1

Related Questions