Facelift - Refresh Images Plugin

RefreshImages will only work properly when the mode has been set to "wrap". The main reason for this plugin is for use with "liquid layouts" but also comes in handy if you plan on changing the size of text on your page on the fly via Javascript. » Back to all examples

This is a really long line of text that should only wrap when the window resizes.

This is a really long line of text that should only wrap when the window resizes.

The above examples result in a single image being generated by Facelift. Resize your window and the text will wrap to fit the parent element's boundaries.

RefreshImages does more than detect when wrapping needs to occur. Go ahead and zoom your page by using CTRL + Mousewheel Up/Down or CTRL + Plus Sign. You will notice that the text will be scaled properly up and down along with the rest of the text on the page. Press Ctrl + 0 (Zero), or go to View » Text Size to return your text size to normal

This is a really long line of text that should only wrap when the window resizes.

Use this text as an example. It is the same text used above only not replaced by Facelift.

You can force the images to refresh with the refreshReplacedImages() function.

If you are changing the size of the text on your site with Javascript, you can add FLIR_RefreshImages.refreshReplacedImages(); to the code. This will force RefreshImages to run and resize all generated images on the site.

Example:

function change_font_size() {
	document.body.style.fontSize 	= '1em'; 	// change the font size of the page
	FLIR_RefreshImages.refreshReplacedImages(); 	// call refreshReplacedImages to have the Facelift images resized
}