LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

jQuery Tip 16 Crop an Image

*Set the video to HD for best viewing experience.
Written by Posted on February 4th, 2014 No Comments
Share This

jQuery Tip 16 Crop an Image

So what were going to do is take a collection of photos and crop them regardless if there portrait or landscape using jQuery to dynamically set the class depending on the width and height of the image.

With jQuery we are wrapping each image in a div and then using an if statement to check if the width is greater then the height and if it is, we are going to add a class of landsape and if it is not, we are going to add class of portrait.

Markup

CSS

jQuery

Thanks to MEST Photo for the usage of these photos.

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

jQuery Tip 13 Modal Window jQuery Tip 13 Modal Window
jQuery Tip 10 Scroll To Top jQuery Tip 10 Scroll To Top
jQuery Tip 11 Simple AJAX .load jQuery Tip 11 Simple AJAX .load
Leave a comment

Leave a Reply