Get $500+ of the best After Effects files, video templates and music for only $20!
Using the jCrop Plugin
videos

Working with the jCrop Plugin

jCrop is a fantastic jQuery plugin that allows your users to easily crop their photos to the exact dimensions that they choose. Setting up such a system is easier than you might think. Brenley will show us how!

Runner-Up: Brenley Dueck

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Tags: Videos
Add Comment

Discussion 66 Comments

Comment Page 1 of 21 2
  1. Gareth says:

    Great screencast!If this is an example of the quailty of screencasts to follow I am very excited!

  2. insic says:

    as expected. this tutorial is awesome.

  3. Patrik says:

    Broken link on the “Demo”.

  4. Javiro says:

    It’s nice. It’s similar to MCImageManager of TinyMCE

  5. I use this plugin and I hae to say it is the most handy and easist plugin to install. I have it flawlessly working with Amazon S3.

  6. Nice tutorial, this could be of great use for my cms.

  7. Great Screencast, Nice Work on It. A deserving runner up :)

    One thing for Jeff or another of the NetTuts team, the demo for this isn’t working.

  8. DKumar M. says:

    Nice info Brenley… Thanks for sharing !!

  9. M.A.Yoosuf says:

    great stuff, more and more jQuery pls

  10. John says:

    seems like the source-code belongs to an other tut. could you fix it, please?

  11. “demo” link is broken please check.

  12. Sanne says:

    Great tutorial!
    Definitely gonna use this in my new project :)

  13. Devin says:

    Very nice tutorial!

  14. Muneef says:

    Nice tut
    btw has any one used Aptana IDE ?, just curious

  15. Texo says:

    Please fix demo link

  16. rachid says:

    Nice tuts !!

  17. Kristien says:

    I get this error when I try and view the live demo..

    “AccessDeniedAccess Denied510BA3D30E0F655DArm3v6GRs7c8H9ZLmnTZdl5iUFu4kHfxro4pvUAXBwNj4c07TGq8pm2S3yW5S42e”

  18. Blaž says:

    Same for me, demo broken. Nice tutorial

  19. Jeffrey Way says:
    Staff

    Sorry about the demo. Brenley, please email the demo that you used.

  20. windir says:

    Nice tut! :) I’ll probably use this in a currently ongoing project :)

    I also need to place a logo on top of the image, and i need to drag and drop the logo to place it to fit.

    Anyone know a way to do it? A jquery plugin who can do this natively or something?

  21. Nice tutorial. I can definitely see the potential with this plugin. Thanks :)

  22. Brenelz says:
    Author

    @Jeff

    I emailed it to you yesterday afternoon, but I guess didn’t get through? I tryed again so let me know that you received it

  23. Brenelz says:
    Author

    For those of you that want a live demo, you can check it out here for now:

    http://www.brenelz.com/jcropdemo/

  24. Kevin Martin says:

    @Brenelz, nice tut. I have this plugin installed on a project I’m working on. Really easy to use.

    @Muneef, Aptana IDE is OK, not the best of IDE’s though. It is pretty big and loads a bit slow. If you’re a beginner, Aptana is the way to go, but I just use notepad++ since it faster and doesn’t have anything more than I need.

  25. Brenelz says:
    Author

    Aptana definately requires a ton of resources, but at times can be handy as it compiles your code as you type it similar to Eclipse so syntax errors are caught instantly…

  26. Philsbury says:

    I’ve used something similar before and found that I needed to chmod the images to 777 straight after saving otherwise their ‘owner’ is php/apache and can’t be changed, might be one to keep in mind.

  27. Madger Badger says:

    Insic looks hot!! :p

  28. trs21219 says:

    nice tutorial here. ill be using it on a site im working on right now with codeigniter. thanks!

  29. Jack says:

    Cool screencast Brenley, jCrop, I like it a lot :)

    I think the source files have been mixed up with another screencast.

    Anyone else notice this?

  30. Brenelz says:
    Author

    @Philsbury I think I briefly mention in there that the images will need to be chmoded to work on the server. In my example I was just using a local server so it didn’t matter

    @Jack yes… the source and demo files have not yet been posed – http://www.brenelz.com/jcropdemo

  31. Leon says:

    Source code link is broken, fix please.
    The video tutorial is awesome though!

  32. Jack says:

    @Brenelz looks like it’s all setup now.

    Great work on the screencast!

    Cheers.
    -Jack

  33. Well done Brenelz a brilliant screencast! I can see this plugin having many uses in different projects.

    I would warn that this code shouldn’t be used live on the internet “as is” because it does contain some security vulnerabilities. For example the filename isn’t sanitized leading to xss vulnerabilities and the script doesn’t check filenames or paths are valid when opening files leading to much more serious vulnerabilities. There are quite a few modifications I would make to your code if anyone is interested I can email the changes to them.

  34. Brenelz says:
    Author

    @thomas thanks for the compliments! I do realize I didn’t totally lock the code down and kept things as basic as I could as it is already almost a 45 min screencast ;)

    Passing filenames with a get string is always scary ;)

  35. Dani says:

    You guys really need to add an iPhone d/l link for times like this; when I’m we are stranded.

  36. Navdeep says:

    We just released a Drupal module based on this here http://drupal.org/project/avatarcrop

  37. good tutorial i hope other too come soon, thanks for it

  38. Brenelz says:
    Author

    You will see plenty more great screencasts this week! Looking forward to James’ ImgPreview jQuery plugin!!

  39. themisfit says:

    nice tutorial, now I have to learn jQuery.

  40. Great screencast, looks like a powerful plugin.

  41. Melvin Walls says:

    Great work! I can’t wait to see all of the other winners

    this is just what i was looking for my current project btw :D

  42. Ariyo says:

    SWEET. Thanks a lot.

  43. Shane says:

    I think it’s fantastic that a plugin such as this makes it so easy to incorporate advanced functionality in our web apps.

    Good screencast too! :)

  44. Andris says:

    Man, that was awesome and exactly what I needed right now. I’m gonna improve my cms with that. Thanx a lot!

  45. Doug says:

    The jCrop plugin is a very useful tool. We use it on our website to crop the images to create thumbnails. It has saved us a ton of time.

    I’m sure this tutorial will help beginners out a lot.

  46. shin says:

    Is there any way I can add some size options or custom size input?

  47. Chad says:

    Looking for a wordpress plugin of this…

  48. Brenelz says:
    Author

    I am glad you all liked the above screencast. Check out my blog as their will be more great content there as well..

    Thanks Jeffery for this opportunity!

Comment Page 1 of 21 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.