Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

https://codepen.io/alexpeattie/full/RwrbRdr

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>

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'))

Cross origin restrictions

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.

If you need to use the plugin with an external image, you'll have to load the image via a CORS proxy, see https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141.

Arguments

Pridefy([target] [, options]);

target

  • Type: Element, Array[Element], jQuery collection or String (selector)
  • 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 will be targeted (e.g. it defaults to the CSS selector '[data-prideify]').

options

  • Type: Object

Configurations options to customize the rendering of the image (see below).

Configuration options

renderedClass

  • Type: String
  • Default: 'prideified'

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

customStripes

  • Type: Array[Array(Number, Number, Number)]
  • 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

  • Type: Function
  • 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.

About

Inspired by https://facebook.com/celebratepride - a super-lightweight library (< 100 lines of code) to “prideify” (add rainbow stripes to) any image using the <canvas> API.

Resources

License

Packages

No packages published