jQuery Roundup: Magnific Popup, blend.js

Note: You can send your plugins and articles in for review through our contact form.

Magnific Popup

Note: You can send your plugins and articles in for review through our contact form.

Magnific Popup

Magnific Popup (GitHub: dimsemenov / Magnific-Popup, License: MIT, jQuery: magnific-popup) by Dmitry Semenov is a responsive lightbox plugin that should work with mobile devices and also Zepto.js. It’s modular and has a build tool so you can generate a build that only includes the features you need. Sass is used for CSS, so you could easily customise the styles to suit your project.

Keyboard shortcuts are supported, the arrow keys and escape allow images to be navigated – see the gallery demo for an example of this.

A lot of the work is done by CSS, which means high DPI displays are supported:

Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.

Content other than images is supported as well. The documentation has examples of using Magnific Popup with Google Maps and videos. For more information, see the Magnific documentation.

blend.js

blend.js (GitHub: qur2 / blend.js, License: MIT) by Aurélien Scoubeau applies effects to images using Canvas. The effects themselves are functions that receive pixels. Processing is applied to sections of the image in a two-dimensional grid.

Custom parameters can be passed to blending functions:

// Create some effects that will use additional argumentsvarcolorfx=blend.cfx(function(color,context){returncontext;});varanglefx=blend.pfx(function(angle,radius,pixels){returnpixels;});blender.fx(colorfx,'rgb(255, 123, 123)').fx(anglefx,[Math.PI,.25]);blender.fx(colorfx,'#FFF','#AAA','#666','#111');// Null is used to skip zonesblender.fx(colorfx,'#FFF',null,null,'#111');// Update the imageblender.update();

There are some bundled effects as well: desaturate, neutralize, vignette, and contrast. These can be found under blend.fx.

The author has included Mocha tests which can be ran in a browser here: blend.js/test.html.