Hack WordPress Gallery to Work with Lightview

Richard Testani / JavaScript, lightview, WordPress / 0 Comment

Current versions of WordPress offer a simple built-in image gallery which makes it easy to create a collection of images that you can browse through. Nice, simple implementation, except you cannot access the advanced links settings when working with a gallery (for some strange reason).

With a little Javascript and the help of Prototype, you can fix this.

There are 2 issues at hand, the first is we need to apply a class name to the anchor tag, which triggers Lightview and optionally apply a rel tag to allow pagination. Here is the target HTML.

Here is the Javascript to run against it.

function addLightView(className) {
	this.aClass	=	className;
	this.allLinks	=	document.getElementsByTagName('dt');
	this.numItems	=	this.allLinks.length;

	for(i=0; i

Click here to try it out.

The above assume you haven't changed the default structure of WP gallery which is set as a definition list. With the code in place, a new instance of addLightView is created, and you just pass it the class name you want to target. The function looks for all your dt elements, then looks down a single node and checks if its an 'a' element. If that checks, we add the classname 'lightview' to the anchor tag - here I'm using Nick Steinbergs great Lightview script. I also write a new rel attribute so you can go through the set of images instead of one-by-one.

This could work with Lightbox as well, since it uses the same implementation.

To use, put the code into a .js file, and load it before your lightview script and after Prototype.
Enjoy.