ImgReplacer on GitHub - Simple jQuery Plugin for Responsive image selection

In: Jquery Javascript

28 March 2012 | No Comments

I recently came in contact with another web designer/developer and he asked me if I could develop a jQuery slideshow/gallery plugin like Flexslider but with a way to choose which image to display, dependent on the browsers width.

Enter ImgReplacer. An ultra simple, lightweight and easy to use jQuery plugin to choose which image should be displayed depending on the browser's width. That way, you can serve a small image for mobile users and avoid the use of extra bandwidth, etc.

ImgReplacer is based on the simplest breakpoint selection for responsive web design. Under 480px, under 767 and above 768. As simple as it gets.

You can check out how it works, on its GitHub page

For each image you have, you need to have 3 separate versions. One for under 480px width, one with 767px width and one for higher resolutions (your choice of maximum width). Then create a div with like the one below.

Finally call ImgReplacer, in a document.ready() fashion, on the divs you want replaced with images.

$('div.imgreplace').imgreplacer();

And depending on the browser's (viewport) width, the script will generate the image it should.

Fallback for browsers without javascript, just use an img tag inside a noscript tag for each image and you should be more than ok.

To tell you the truth, I have no plans on improving it currently. So feel free to fork it, update it, and let me know what you make of it. You can easily change the breakpoints (or add more) if you know a bit of javascript and jQuery.

If you need any help with it, do not hesitate to ask.

Share This:

Comments

Add a Comment