A Responsive Image jQuery Plugin
May 15, 2012
responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.
<img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />
If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D
Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ
- Can add as many breakpoints as needed.
- Breakpoints will automatically work for retina displays if a breakpoint that is big enough is specified. i.e. data-2000 would act as a retina image for a screen with a width of 1000px.
- Will always load the default images
- Takes no account of bandwidth available, and just assumes that bigger screens tend to be connected to better connections