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!

Simple jQuery Slider Simple jQuery Slider
Text Size Modifier jQuery Tip 4 Text Size Modifier
jQuery Tip 14 Testimonial Slideshow jQuery Tip 14 Testimonial Slideshow
Leave a comment

Leave a Reply