<commit_before>![imgix logo](https://assets.imgix.net/imgix-logo-web-2014.pdf?page=2&fm=png&w=200&h=200)

imgix.js
========

The Javascript client library for [imgix](http://www.imgix.com).

* [Getting Started](#getting-started)
* [Examples](#examples)
* [Documentation](#docs)
* [jQuery Plugin](#jquery)
* [Browser Support](#browser-support)
* [Polyfills](#polyfills)
* [Dependencies](#dependencies)

<a name="getting-started"></a>
Getting Started
---------------

If you don't already have an imgix account then signup at [imgix.com](http://www.imgix.com).

Once your imgix source is created then simply add `imgix.min.js` to your page:

    <script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>


`imgix.js` is dependency-free so it includes its own DOM `onready` method. Although if you're using additional libraries that include similar functionality than you can continue to use those.

    <script type="text/javascript">
        imgix.onready(function() {
            // ready to go
        });
    </script>


Please read the [examples](#examples) section below.

<a name="examples"></a>
Examples
--------

Check out the [imgix.js home page](http://www.imgix.com/imgix-js) for a big picture overview of everything you can do. Additionally there are __full__ examples in the [examples/](examples/) directory.


####Single fluid image (full)

This is the smallest full example of using imgix to provide a fluid image.


	<html>
	<head>
		<style>
			.imgix-fluid-bg {
				position:absolute;
				width:100%;
				height:100%;
				top:0;
				left:0;
				display:block;
			}
		</style>

		<!-- include imgix.js -->
		<script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>
		<script>
			imgix.onready(function() {
				imgix.fluid({
					updateOnResizeDown: true,
					pixelRounding: 5,
					autoInsertCSSBestPractices: true,
				});
			});
		</script>
	</head>
	<body>
		<div data-src="http://miguel.imgix.net/ex/katie.jpg?fit=crop&crop=faces" class="imgix-fluid imgix-fluid-bg"></div>
	</body>
	</html>

####Build URLs

A simple example of creating an imgix URL with param setters.

    var ix = new imgix.URL('http://assets.imgix.net/examples/butterfly.jpg');
    ix.setSepia(50);
    ix.setRotate(20);
    ix.getURL(); // equals http://assets.imgix.net/examples/butterfly.jpg?sepia=50&rot=20

####Build URLs and Attach to an Element
<commit_msg>tweak whitespace in README<commit_after>![imgix logo](https://assets.imgix.net/imgix-logo-web-2014.pdf?page=2&fm=png&w=200&h=200)

imgix.js
========

The Javascript client library for [imgix](http://www.imgix.com).

* [Getting Started](#getting-started)
* [Examples](#examples)
* [Documentation](#docs)
* [jQuery Plugin](#jquery)
* [Browser Support](#browser-support)
* [Polyfills](#polyfills)
* [Dependencies](#dependencies)

<a name="getting-started"></a>
Getting Started
---------------

If you don't already have an imgix account then signup at [imgix.com](http://www.imgix.com).

Once your imgix source is created then simply add `imgix.min.js` to your page:

    <script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>


`imgix.js` is dependency-free so it includes its own DOM `onready` method. Although if you're using additional libraries that include similar functionality than you can continue to use those.

    <script type="text/javascript">
        imgix.onready(function() {
            // ready to go
        });
    </script>


Please read the [examples](#examples) section below.

<a name="examples"></a>
Examples
--------

Check out the [imgix.js home page](http://www.imgix.com/imgix-js) for a big picture overview of everything you can do. Additionally there are __full__ examples in the [examples/](examples/) directory.


####Single fluid image (full)

This is the smallest full example of using imgix to provide a fluid image.


	<html>
	<head>
		<style>
			.imgix-fluid-bg {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: block;
			}
		</style>

		<!-- include imgix.js -->
		<script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>
		<script>
			imgix.onready(function() {
				imgix.fluid({
					updateOnResizeDown: true,
					pixelRounding: 5,
					autoInsertCSSBestPractices: true,
				});
			});
		</script>
	</head>
	<body>
		<div data-src="http://miguel.imgix.net/ex/katie.jpg?fit=crop&crop=faces" class="imgix-fluid imgix-fluid-bg"></div>
	</body>
	</html>

####Build URLs

A simple example of creating an imgix URL with param setters.

    var ix = new imgix.URL('http://assets.imgix.net/examples/butterfly.jpg');
    ix.setSepia(50);
    ix.setRotate(20);
    ix.getURL(); // equals http://assets.imgix.net/examples/butterfly.jpg?sepia=50&rot=20

####Build URLs and Attach to an Element

{'fraction_non_alphanumeric': 0.1645075056549455, 'fraction_numerical': 0.011515525395846186, 'mean_word_length': 3.5886792452830187, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4163094', 'n_tokens_mistral': 1835, 'n_tokens_neox': 1592, 'n_words': 411}