AN7effects is a collection of simple MooTools scripts for adding link effects and content toggles to a website.
linkFade, contentFade, and contentSlideiaian7 » code » webcode John Einselen, 20.06.18 (updated 3.07.20)
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 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.
This script has been replaced by mediaboxAdvanced.iaian7 » code » webcode John Einselen, 28.09.09 (updated 6.12.19)
This script is no longer being developed, but remains online for reference.iaian7 » code » webcode John Einselen, 17.02.09 (updated 10.04.11)