2013/09/14

Improving Image Layout with JQuery

Image Scale Icon

I recently decided to start pushing more of my code onto GitHub to help other people speed up. I haven't done much in the open source space for a while so it feels good to be pushing some changes.

This morning I was reviewing JQuery plugins to align pictures for in the page of my latest project. The brief was pretty straight forward but getting CSS to work in all situations was getting very frustrating. Given images of any size and aspect, fit them as best as possible into four different layout sizes. the issue was that they were four very different layouts so had very little commonality in css.

The obvious solution presented it's self of finding a jQuery plugin that does the job. I did find some but they didn't do exactly what I wanted. I found some examples and it looked like I could probably do it in about fifty lines so I created a new project on github and away I went, reinventing the wheel.

This is a quick post just to let people know about the key features of the plugin: image zoom, like css background cover, and aligning the image with centring so that you see the middle of the picture. The github project is jquery-image-scale if you are interested in using or contributing to the project. Comments are also welcome. Please raise issues in the github issue tracker.

Happy coding.

No comments:

Post a Comment