🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Image Replacer is a minimalist jQuery plugin that helps you deal with responsive image delivery depending on the custom breakpoints.

responsive-image

Documentation

jQuery Image Replacer

##Description

Replaces images at defined breakpoints. A great way to add responsive loaded images to your site. Its small, ~900Bytes minified, and a little flexible flexible.

##Usage

###Set your HTML

<img src="/path/to/image.jpg" data-xl="/path/to/xl/image.jpg" data-lg="/path/to/lg/image.jpg" data-md="/path/to/md/image.jpg" />  

###Activate Plugin

	$(window).imageReplacer(); 

###Customize Breakpoints (optional)

	$(window).imageReplacer( 		{ 		    xl: { 		    	min:1600 		    }, 		    lg: { 		    	min:1024, 		    	max:1599 		    }, 		    md: { 		    	min: 800, 		    	max: 1023 		    }, 		    sm: { 		    	max: 799 		    }, 		    default: 'xl' 		} 	) 

##Further Usage

###Run On Load

Run the javascript on load to detect if already at a smaller size. Default = true

	$(window).imageResizer({onload:true}) 

##Let Me Know

Let me know if there are any bugs. I built this in just under 20 minutes so I have not thuroughly tested it. I will be very happy to fix any bugs you have :) Email Me


You May Also Like