https://github.com/matthisk/respify

Respify responsive image library
https://github.com/matthisk/respify

javascript jquery responsive-images

Last synced: 3 months ago
JSON representation

Respify responsive image library

• Host: GitHub
• URL: https://github.com/matthisk/respify
• Owner: matthisk
• License: mit
• Created: 2014-01-09T14:53:45.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2017-06-13T12:28:15.000Z (over 7 years ago)
• Last Synced: 2024-10-11T12:02:58.887Z (3 months ago)
• Topics: javascript, jquery, responsive-images
• Language: JavaScript
• Size: 394 KB
• Stars: 13
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Respify

=======

Respify responsive image library

A simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images.

## Example

This is an example of how to use Respify. You can view a working example on the [example page](http://matthisk.github.io/Respify/)

Respify can either be used on an image tag, or any other tag but then the background option should be set to ```true```. Respify wil pop from the array of span child nodes, this means that the last node in the list will be parsed first. If Respify finds one matching media query it will use the corresponding image and stop the search.

```html



	

	

	

	

	

	



```

Set up the Javascript like this:

```javascript

$('#responsive').respify();

```

Respify is a spin off from the picture tag specification, the major difference is that it can set background image of the parent tag. Using child ```span``` tags you can supply different size images. Set the data-media tag to specify a media query and use the data-src tag to specify a src image.

Pass options to respify as an object:

```javascript

$('img').respify({

	background : true

});

```

Respify adds an event listener to the resize event and will recalculate the image it has to use.

## Options

### background

type: boolean, default: ```false```

wether to place the selected image as a background-image css property or as a img src attribute.

### dryRun

type: boolean, default: ```false```

If set to true the plugin will only return the set of matched images and not actually place them on the tags. This can be usefull if you want to supply the selected image to some other piece of code which can not implicitly handle responsive images.

### callback

type: Function, default: ```undefined```

Here you can supply a function to Respify, this function will be called whenever a new image is calculted at resize. This is especially usefull in combination with the dryRun setting where the image is not actually set on the picture tag.