I’ve been toying around with the idea of a light box that didn’t us JS to center the image and finally got it all sorted out. Of course you know it’s got to be more than a basic light box, so I added a couple features and tried to make it as easy as possible to use.
First, in it’s default configuration, you can make any element trigger a lightbox by simply adding the attribute data-fullsize to it. If you want to do something a little different thats completely customizable, including using a function to get the larger version of the image.
It also have a few extra buttons in the lightbox view, the first of which is the open-in-new-window button in the top left which does exactly what you think it would, usefully for when the image is actually really large and there no way to see it all and see it at 100%.
On the side it has a couple arrows that light to navigate through all the images on the page that have the light box attached to them. Simple and something I would except to see more of in light box plugins. Both the arrows and the new-window button can be disabled in the plugins settings.
You can see it in action here: https://rawgit.com/pgooch/Matchbox/master/index.html and see the code, forkit it, and all that good stuff here: https://github.com/pgooch/Matchbox.
Back from a little vacation/job change/illness, lets get back to it.
While developing a web based app with some seriously smooth animations behind it I noticed that they would flicker every time they started. Initially I thought it was due to the animation enhancer I had installed. The jQuery animation enhancer seamlessly changes the traditional jQuery animations with the CSS3 animations. On a desktop browser this has mixed results, with safari being faster and chrome being slightly slower, but on an iOS device (in this case an iPad) it was much much faster. Continue reading “Mobile Safari Webkit Flicking Animation Fix”