Photo Corners headlinesarchivemikepasini.com


A   S C R A P B O O K   O F   S O L U T I O N S   F O R   T H E   P H O T O G R A P H E R

Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.

How To Modify Lytebox Graphics Share This on LinkedIn   Share This on Google   Tweet This   Forward This

25 March 2014

You may have noticed we've updated the graphics on the version of Lytebox we use to display slide shows here. We use the site highlight color (a teal) in Helvetica Neue. Here's the story.

LYTEBOX

Markus Hay's Lytebox is a JavaScript library which is free, easy to install and plays nice with other libraries. It lets us show you larger images than our page format easily accommodates but doesn't force them on you either.

When we were done, we had updated all our slide shows (since they all call the same code) to a style that reflected our site design more closely than the default theme.

But we never liked either the available color schemes (which are not subtle) or the graphics (same problem) that ship with the Lytebox download.

So one evening, we did a little code and artwork surgery to update the look.

VERSIONS

The current version of Lytebox is v5.5 and it adds lots of features to the older version we run on the site. We're running v3.22 from Oct. 2007. It does everything we want and is more compact than the current version, so we're standing pat.

But it shouldn't be any trouble to make the same modifications (perhaps a few more) to v5.5.

INSTALLATION

It's simpler to just follow the documentation's instructions to install the Lytebox files but we have our own subdirectory arrangement on our server, which we plugged Lytebox's art and code into, updating the code so it could find the new locations.

We're not recommending that approach to you, but we want to mention it.

There are three pieces to the Lytebox library: CSS styling code, artwork and the JavaScript code.

A quick peek at any of them shows you the library includes several different color schemes or themes: grey (the default), red, green, blue and gold.

To select a theme, you open the lytebox.js JavaScript code, zip down to the this.theme variable in the global configuration and type the name in single quotes.

We set 'blue' as our theme. Which meant the library would call the blue versions of the Pause, Previous, Next, Play and Close graphics and use the .blue styles in the Lytebox style sheet.

CSS

Except we didn't want to use Lytebox blue. We wanted to use our teal. So we looked around for the blue color citations in the CSS file and changed them to our teal using #rrggbb notation.

We also made a few other style changes while we were at it, making the caption larger and the details a light gray. We also kept the gray overlay and outer container because they're really annoying in the theme color.

The styles we changed included: #lbOverlay.blue, #lbOuterContainer.blue, #lbDetailsContainer.blue, #lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue, #lbPrev2_Off.blue, #lbNext2_Off.blue, #lbDetailsData.blue.

So we had a mix of the gray theme with our own highlight color.

GRAPHICS

We opened each of the blue graphics, whether PNG and GIF, in Photoshop and created a new layer to work in. That helped with alignment and content. The Next and Previous buttons align a little differently from the Play, Pause and Close buttons.

We simply used ASCII characters for the symbols (>, ||, <) and an underline for the Next and Previous buttons which respond to N and P keypresses.

When we had what we wanted, we flattened the layers and Saved for Web in the same format we started with.

CLEANUP

We also took a moment to strip the Javascript of themes other than blue and gray (because we just won't ever use them), the CSS code of references to those themes and to delete those graphics from the library.

We're paying for the space on the server, after all.

USING THE LIBRARY

Using Lytebox is the best way to test your customized installation. And using it is very, very easy.

You simply have to reference the JavaScript and CSS files in the header of your HTML page and then add a rel="lyteshow[name]" and title="Your Caption" option to a link and then list each image as an empty link with the same rel="lyteshow[name]" in it.

The documentation gives you all the details, but it's pretty straightforward.

CONCLUSION

When we were done, we had updated all our slide shows (since they all call the same code) to a style that reflected our site design more closely than the default theme. And with bigger captions, it's easier to read, too. As any of our slide shows now demonstrates.


BackBack to Photo Corners