StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Okay guys, in case anyone else runs into this problem:</p> <p>jCrop kinda gets messed up if the actions of loading an image and applying jCrop to it are queued too fast after eachother. I still find it strange that a second attempt works perfect, but I think that has something to do with cached image dimensions which are recognized by the DOM of the page or something.</p> <p>The solution I came up with was by creating a function that converts the #cropbox into a jCrop area and then setting a 2 second interval, just to give jCrop some time to recognize the image and it's dimensions and then convert the element.</p> <p>This is the part of html I used (with a preloader):</p> <pre><code><div id="cropper-loading" style="display: none;"><img src="images/analytics/ajax-loader.gif" /></div> <img id="cropbox" src="images/placeholder.png" style="display: none;" /> </code></pre> <p>As you can see both the cropbox image and cropper-loading div are hidden as they are not needed instantly. You could display the placeholder if you wanted though.. Then this HTML form is used:</p> <pre><code><input name="image2" id="img2" type="text" readonly="readonly" onclick="openKCFinder(this)" value="click here to select an image" style="width: 285px;" /> <button class="button button-blue" type="submit" name="load" id="selectimg">Load Image in cropper</button> </code></pre> <p>In my case I've been using KCFinder to load the images (it's part of CKEditor, really worth watching into!), KCFinder handles uploads, renaming etc and after choosing it returns the chosen image path (relative/absolute is configurable) to the input field.</p> <p>Then when clicking #selectimg this code is called:</p> <pre><code>jQuery('#selectimg').click(function(e) { e.preventDefault(); jQuery('#cropper-loading').css('display', 'block'); var newsrc = jQuery('#img2').val(); jQuery('#cropbox').attr('src', newsrc); jQuery('#img').val(newsrc); function createJcropArea() { jQuery('#cropper-loading').css('display', 'none'); jQuery('#cropbox').css('display', 'block'); var jcrop_api = jQuery.Jcrop('#cropbox', { boxWidth: 700, boxHeight: 700, onSelect: updateCoords, onChange: updateCoords }); clearInterval(interval); } var interval = setInterval(createJcropArea, 2000); }); </code></pre> <p>At first I prevent the link too be followed as it normally would (or button action) and after that the loading div is displayed (that's my reason for hiding the placeholder image, otherwise it would look messed up).</p> <p>Then the image location is being loaded from the input field and copied into another (#img), this field is used to process the image afterwards (PHP uses the value of #img to load this image). Also simultaneously the #cropbox src is being set to the new image.</p> <p>And here comes the part which solved my problem:</p> <p>Instead of directly activating jCrop, I've made a function that:</p> <pre><code>1) hides the loading icon 2) displays the image 3) converts #cropbox into a jCrop area 4) clean the interval (otherwise it would loop un-ending) </code></pre> <p>And after this function you can see that, just to be save, I took 2 seconds delay before the jCrop area is being converted.</p> <p>Hope it helps anyone in the future!</p> <p>Cheers and thanks for thinking @vector and whoever else did ;-)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload