search

rvera / image-picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
http://rvera.github.com/image-picker
Other
906 stars 216 forks source link

Strange behavior when adding photos to the list #52

Closed nunocgtt closed 7 years ago

nunocgtt commented 9 years ago

Hello,

For starters, great plugin. I have a situation where I'm using bootstrap and your plugin to show a bunch of photos. I have the ability to upload a new photo to that album that is refreshed via ajax.

The problem I have is intermittent (doesn't always happen), but sometimes the pictures are misplaced in the grid (i have a 4xN grid of photos) meaning sometimes a new row will add the first picture in slot no. 2.

problem

As you can see in the image, the second row starts off by 1 picture. Row 3 is ok as well. I've checked my css classes and nothing unusual is there. The list is

  • for last picture of row 1 and
  • for first picture in row 2 meaning no html no gaps and no padding occur between them.

    Thank you for your time.

    • nunocgtt commented 9 years ago

    ... hello?

    Mahmoudz commented 9 years ago

    I'm having some troubles with this library as well, it does strange behavior when dynamically adding photos to it. Not only on the CSS side but as well it affects the end results with duplication.. Seems the contributors are not maintaining it anymore!

    rvera commented 9 years ago

    Sorry for the late reply. It was not in the original scope to handle dynamic photos, the current solution for this is to add the new options to the select object and call resync on the picker.

    It would be great if you could provide a jsfiddle of any issues you are seeing. Thanks.

    nunocgtt commented 9 years ago

    The resync was already being done. However the pictures intermitently appear misaligned to the right. Seems a js issue as the html is good clean and consistent.

    alana314 commented 8 years ago

    I got this working, by calling imagepicker() again once I've appended items, and also waiting for imagesLoaded (using desandro's imagesLoaded plugin) and then scrolling to the bottom of the div when they've loaded.

    $('#profilephotopicker').imagesLoaded(function(){
    $('#profilephotos').scrollTop($('#profilephotos')[0].scrollHeight);
});

    Edit: actually that scrolls to the bottom, if you want it to stay scrolled in the middle you can save the scrollHeight before appending the items, and then scroll to that height after they've appended, minus an offset.

    rvera commented 7 years ago

    From your original pic, that looks a browser css issue where floating items are not properly placed.

    Will close this for now but would love to hear how you solved this and if you have any generic solutions.