Replace image in justified gallery.

[plugowski]

Hi,

My problem is that I display justified gallery, but user has possibility to manipulate image in gallery (crop, rotate). Unfortunately after that operation, when I destroy object and initialize it again, DOM remebered original size of container and it looks terible.

Any suggestions?

var $photos = $('div.photos');
$.post('/crop_photo/' + $imageId + '.json', {crop: cropData}, function(data){

if (typeof data.photo_url != 'undefined') {
    $photos.justifiedGallery('destroy');
    $relatedTarget.closest('.image').find('img').attr('src', data.thumb_url);
    $relatedTarget.closest('.image').find('[data-action="crop"]').attr('data-image', data.photo_url);
    $photos.justifiedGallery(justifiedGalleryOptions);
}
});

data.thumb_url and data.photo_url contains url with timestamp to prevent browser to get it from cache.

[biziclop]

Maybe JustifiedGallery.prototype.rewind()?

[plugowski]

rewind didn't work in that case... or, can you tell me how to use it?

[biziclop]

JustifiedGallery.prototype.init sets

              $entry.data('jg.width', width);
              $entry.data('jg.height', height);

but JustifiedGallery.prototype.destroy doesn't seem to remove them. so maybe running

$('div.photos > photo').data({
  'jg.width': undefined,
  'jg.height': undefined
});

before rebuilding the gallery helps.

Also:

/* If we have the height and the width, we don't wait that the image is loaded, but we start directly
 * with the justification */
          if (that.settings.waitThumbnailsLoad === false) {
            var width = parseInt($image.attr('width'), 10);
            var height = parseInt($image.attr('height'), 10);

Do you have width/height attr on your images?

OK, I shut up now, I'm just browsing the source.

[plugowski]

I tried to:

• setting waitThumbnailsLoad: false
• add to destroy method: $entry.data('jg.width', undefined); $entry.data('jg.height', undefined);
• $relatedTarget.closest('.image').data({ 'jg.width': undefined, 'jg.height': undefined });

Nothing works as I want to..

[biziclop]

What if you do this unspeakable horror (just for debugging):

var html = $photos.html();
$photos.empty().append( $.parseHTML( html ));

[plugowski]

Well, that works :P

[biziclop]

Hmm, you change img src: $relatedTarget.closest('.image').find('img').attr('src', data.thumb_url); Then you immediately rebuild the gallery. Maybe poor img tag still remembers the old size. Maybe you should replace just the img to a fresh one. Maybe you could img.width = undefined; img.height = undefined

[plugowski]

I tried also to remove whole img tag and put the new one with no result... Maybe jg puts something to cache, local storage or something (i'm not advanced js developer so that is not obvious for me).

[biziclop]

I'm out of ideas. JG seems to clean up everything nicely. Could you put it online, maybe a simplified version? Also, you could ask it on StackOverflow too.

[plugowski]

I'll try put it tomorrow :)

[miromannino]

Dear all!

JG can't clean up just everything, it resets the old values, so it is normal if they are changed in the meanwhile.

Seems more that you just need to call justifiedGallery again, also without any option, because it remembers them. Something like:

if (typeof data.photo_url != 'undefined') {
    $relatedTarget.closest('.image').find('img').attr('src', data.thumb_url);
    $relatedTarget.closest('.image').find('[data-action="crop"]').attr('data-image', data.photo_url);
    $photos.justifiedGallery();
}

Have you tried that?

As @biziclop have said, if you provide a working example (send me an email if it is a kind of private), I can debug that better.

Thank you