Prideify.js : jQuery Rainbow Stripes Image Effect

Inspired by facebook.com/celebratepride - a super-lightweight library (< 100 lines of code) to “prideify” any image using the <canvas> element. Licensed under MIT.

There are no external dependencies, although it does integrate with jQuery when it's present ☺️.

Live Demo

http://alexpeattie.com/projects/prideify

Usage

The library does its magic using the <canvas> API - no trickery with CSS semi-transparent <div>s or anything like that 😄. After being processed, the image is turned back to a normal <img> element.

Quickstart

<img src='/dave.jpg' class='profile-pic'> <img src='/jenny.jpg' class='profile-pic'>  <script src='prideify.js'></script> <script>   Prideify('.profile-pic'); </script>

With jQuery

<img src='/dave.jpg' class='profile-pic'> <img src='/jenny.jpg' class='profile-pic'>  <script src='jquery.js'></script> <script src='prideify.js'></script> <script>   $('.profile-pic').prideify(); </script>

More examples

If you call Prideify without any arguments, any image with the data-prideify attribute set will be processed:

<img src='/jenny.jpg' data-pridefied> <script>   Prideify(); </script>

If you are trying to call Prideify with an image not hosted on your server, you'll probably need to set the crossOriginProxy option to true, to avoid browser restrictions regarding the canvas element (see more under Configuration options):

<img src='http://example.com/jenny.jpg'> <script>   Prideify('img', { crossOriginProxy: true }); </script>

By default Prideify will add a CSS class 'prideify' after the image is rendered. You can use a different CSS class by setting the renderedClass option:

Prideify('img', { renderedClass: 'some-custom-class' });

If you want something to happen after the image has been rendered, you can use the afterRender option. The newly rendered image will be passed into the callback function:

Prideify('#jenny', { afterRender: function(image) {   console.log("Image rendered") } });

The first argument passed to Prideify can be a selector, image element, array of elements or jQuery collection:

Prideify('img.profile-pic'); Prideify($('img.profile-pic')); Prideify(document.getElementById('jenny'));

Arguments

Pridefy(target, [options]);

target (optional)

Default: '[date-prideify]'

The image or collection of images you want to prideify. Alternatively you can pass a selector, in which case anything matching the selector will be prideified.

If left blank, all images with data-prideify attributes (e.g. it defaults to the CSS selector '[data-prideify]').

options (optional)

Default: {}

Additional configuration options - see below.

Configuration options

renderedClass

Default: 'prideified'

A class that will be added the the <img> element after the image has been rendered successfully.

crossOriginProxy

Default: false

Due to browser restrictions, you won't be able to use prideify normally with most image that are not hosted on your domain (unless the image host has been kind enough to set Access-Control-Allow-Origin to *). You can learn more about cross-origin security and the <canvas> in this MDN article.

Setting crossOriginProxy to true will load the image via http://crossorigin.me, thereby avoid cross-origin restrictions. If you want to use a different proxy, you can pass its URL as a string.

customStripes

Default: undefined

If you don't want to use the default colors, or want extra or fewer stripes, you can set use a customStripes array. This is a nested array of arrays, each containing the RGB values of each stripe:

Prideify('.profile-pic', {    customStripes: [[0, 0, 0], [255, 255, 255]]  });

The above would overlay two stripes - a black one, and a white one - admittedly not very exciting!

afterRender

Default: undefined

A callback function that will run after the image has been rendered. The new image will be passed as the sole argument to the callback function.

Todo

Better error handling 😇, bookmarklet.

Credits

Thanks to Facebook and the LGBT community for the inspiration and to @technoboy10 for the awesome CORS proxy. Example photo credit Jose Antonio Navas.

Sent into the world with the blessing of Peg 😀.