TEST TEST

CSS Lightbox Overlay

iaian7 » code » webcode   John Einselen, 20.06.18 (updated 3.07.20)    

Designed as a more modern and much lighter-weight alternative to the antiquated mediaboxAdvanced. While this relies exclusively on simple HTML and CSS for layout and animation, it does require Javascript to allow for automated play and pause when opening or closing video layers, and override default :target behaviour to set states. This stops the browser history from filling up with endless anchor links, but if javascript is disabled, the :target behaviour still works as expected and videos can be manually played or paused as desired (they just won’t stop playing automatically when the layer is closed).

image 1image 2image 3Vimeo video image 1 image 2 image 3

YouTube and Vimeo API scripts are loaded in the header, while the iframes include onload actions to initialise the APIs, and the anchor elements include onclick actions for setting status. This system includes none of the media titles or content detection of mediaboxAdvanced, and there are some limitations to this mostly-CSS approach, but in general it’s pretty usable. Check out the CodePen.io page for more details and the source code.

1CSS lightbox overlay source

You can also check out a demo using next/previous buttons to navigate through groups of overlays. This would require a bit more development to make it useful (especially developing the CMS integration to make it automatic), but is a starting point for further investigation.

1CSS lightbox overlay navigation
bookmark  

CSS Looping Fader

iaian7 » code » webcode   John Einselen, 20.05.18 (updated 20.10.18)    

This is based on an example by Jonathan Snook, but has been updated to fade seamlessly between images without cross fading (which reveals the background). This is achieved by animating the z-index while simultaneously delaying the fade out of each layer until the replacing layer is fully visible.

While the animation timeline does depend on a set number of images, it would be possible to set up classes for each variation needed (for example, 4, 5, and 6 image rotations). (fade duration + visible duration) * number of images = total duration which can be used to set up the percentages for the animation timeline. More details can be found in the Jonathan Snook article linked above.

This version uses CSS backgrounds (defined in the HTML by an assumed CMS) instead of <img> tags to provide a more seamless and responsive (depending on your CSS setup) end result. Loading images as backgrounds also prevents them from being selected by accident.

1CSS fader source code

bookmark  

Modicon

iaian7 » code » dashboard   John Einselen, 14.02.12 (updated 16.02.12)    

Modicon is designed to use the LibICNS utilities and ImageMagick to batch process .icns format icons with simple levels and HSL adjustments.

read more

Alchemist

iaian7 » code » dashboard   John Einselen, 14.02.12 (updated 1.03.12)    

Simplifies the batch processing of videos, either preparing DSLR footage for editing in Final Cut Pro (conversion of MP4 or AVCHD media to ProRes422), or creating the necessary formats for HTML5 video playback (scaled MP4, OGG, and WebM formats).

read more

Crusher

iaian7 » code » dashboard   John Einselen, 14.02.12 (updated 16.02.12)    

A simple batch processing interface for the PNGquant command line utility, Crusher helps quickly manage high quality 24-bit PNG compression by preserving full transparency while still greatly reducing file size.

read more

Iconifer

iaian7 » code » dashboard   John Einselen, 12.01.11 (updated 12.03.12)    

Helpful OSX Dashboard widget for converting images into iOS, Mac, and/or Windows icon formats. Automatically generates iTunes, iPhone 4, iPad, and iPhone PNG files, or outputs ICNS or ICO files with all necessary sizes.

read more

mediaboxAdvanced

iaian7 » code » webcode   John Einselen, 28.09.09 (updated 6.12.19)    

1

Based on Lightbox, Slimbox, and the Mootools javascript library, mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.

This script is no longer being developed, but remains online for reference.

read more

Chroma

iaian7 » code » dashboard   John Einselen, 13.09.09 (updated 22.05.13)    

Chroma is an OS X Dashboard utility for converting colours between HSV, RGB, and HEX formats. Favourites can be saved to the swatch library, and are easily copied to the system clipboard for use anywhere else.

Version 4.0 includes an all new library system, support for multiple types of data (256 integer, percentage, and floating point values), updated copy/paste, and many other updates.

read more

Sheets

iaian7 » code » dashboard   John Einselen, 6.09.09 (updated 16.02.12)    

Sheets is an OS X widget that automates the process of building sprite sheets from image sequences. Using ImageMagick, animations can be output in strips, sheets, or with custom settings for scale and tiling. Large collections are even automatically paginated when necessary.

read more

Prowler

iaian7 » code » dashboard   John Einselen, 3.09.09 (updated 16.02.12)    

Prowler is a simple OS X widget that lets you send messages to any iPhone or iPod Touch running Prowl, delivered immediately using push notifications. A fast and easy solution for delivering URLs to your handheld, or any other info or notices you might want to push.

read more