How to use Lytebox

Note: lytebox appears to be discontinued by the author. See also Thickbox.

I was recently asked how to use lytebox in a gallery. The instructions at lyteboxes web page has several examples, but I guess they can seem a little overwhelming for some people, so I put together as basic an example as I could think of. It looks like this.

In this example, we are only dealing with useing lytebox with images in gallerys. There are lots of ways to use this library, and you can check his web page for the other options.

First, in order to use this library you need to get some files moved over. There are three things you need:

  1. lytebox.js
  2. lytebox.css
  3. images folder

These files need to be placed in the folder where your html file is going to be. So, for our example, this is what I have :

  1. index.html
  2. lytebox.js
  3. lytebox.css
  4. gallery.css
  5. images (folder)
  6. pictures (folder)

index.html is the gallery html file that has the thumbnails and pulls everything together. gallery.css is a css file to style our little gallery just a bit. You don’t need this file at all. The pictures folder is where I have all my images. You can organize your images how you would like.

Ok, lets look that what index.html looks like. The first thing you need to do is put some code in the <head> tag. This is to tell the browser where the lytebox css and js files are.

1
2
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Then you need to create the links in the body of your document. I have chosen to link thumbnails to larger size images. Here is the code to one image:

1
<a href="pictures/Erie Night.jpg" rel="lytebox[gallery1]" title="Erie Night"><img src="pictures/Erie Night thumb.jpg"></a>

So, the path to the thumbnail is in the img tag. That is what shows up first. Then, in the a tag, you add the rel attribute. This is not really standard html. Html is not using the rel attribute, so lytebox has decided to use the attribute to signal it that you are linking the image within the href of the a tag through lytebox. This all happens in the background when your document loads, the lytebox.js file scans your document looking for these rel attributes, and adds some code to make it all work.

Also, look at the this: rel=”lytebox[gallery1]”. To make this work, you only need to say rel=”lytebox”. We put “gallery1” inside the [] to link all these images together. This way lytebox knows to link these images together with “next” and “previous” buttons when the larger image comes up. In the example that I have here, I have two gallery’s, “gallery1” and “gallery2” so you can see how they work. One gallery per line.

Simple? Ok, so here is all the code in our example. I have here the code for the index.html and the gallery.css file. I have not listed the lytebox code. You can download that here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
	<title>Lytebox Example</title>
	<script type="text/javascript" language="javascript" src="lytebox.js"></script>
	<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="gallery.css" type="text/css" media="screen" />
</head>
<body>
	<h1>Lytebox Example Gallery</h1>
	<a href="pictures/Erie Night.jpg" rel="lytebox[gallery1]" title="Erie Night"><img src="pictures/Erie Night thumb.jpg"></a>
	<a href="pictures/Field of Grass.jpg" rel="lytebox[gallery1]" title="Field of Grass"><img src="pictures/Field of Grass thumb.jpg"></a>
	<a href="pictures/Gentle Evening.jpg" rel="lytebox[gallery1]" title="Gentle Evening"><img src="pictures/Gentle Evening thumb.jpg"></a>
	<a href="pictures/Reflected Cloud.jpg" rel="lytebox[gallery1]" title="Reflected Cloud"><img src="pictures/Reflected Cloud thumb.jpg"></a>
	<br />
	<a href="pictures/Montana Cabin.jpg" rel="lytebox[gallery2]" title="Montana Cabin"><img src="pictures/Montana Cabin thumb.jpg"></a>
	<a href="pictures/Montana Road.jpg" rel="lytebox[gallery2]" title="Montana Road"><img src="pictures/Montana Road thumb.jpg"></a>
	<a href="pictures/Montana Sunset.jpg" rel="lytebox[gallery2]" title="Montana Sunset"><img src="pictures/Montana Sunset thumb.jpg"></a>
	<a href="pictures/Spoon and Cherry.jpg" rel="lytebox[gallery2]" title="Spoon and Cherry"><img src="pictures/Spoon and Cherry thumb.jpg"></a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
	background-color: black;
	text-align: center;
}
h1 {
	color: white;
	font-family: sans-serif;
}
img {
	border: solid 1px gray;
}
img:hover {
	border: solid 1px white;
	/* doesn't work in ie */
}

Check out the finished gallery here.

Moving Pictures via Javascript

Ok, I had promised to let anyone know that happened to be reading before Christmas, that I would talk about the collage script that I am using on the Christoper Ward Photography site. I am using the lytebox script when you click on an image, but the collage image that moves the pictures around the screen is all mine.

You can get the html source from that page. Here is the Javascript and the CSS files that are used. You can use this code, but please leave the Javascript comment header with my name on it.

/*
	collage javascript
	
	You are free to use this script provided you include this header

	Created by Chris Ward
	veggie2u@cyberward.net
	http://www.cyberward.net/blog/
*/

function Collage(pName) {
	this.name = pName;
	this.state = "closed";
	Collage.list[Collage.quantity] = this;
	Collage.quantity += 1;
}

Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

Collage.prototype.close = function() {
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.startPoint[0], y:this.startPoint[1], mode: 'absolute' });
	}
	this.state = "closed";
}

Collage.prototype.swap = function() {
	if( this.state == "closed" ) {
		this.open();
	} else {
		this.close();
	}
}

Collage.closeAll = function() {
	for( i=0; i < Collage.quantity; i++ ) {
		var $aCollage = Collage.list[i];
		if( $aCollage.state == "open" ) {
			$aCollage.close();
		}
	}
}

function doOnLoad() {
	$$('img.collageImg').each(function(s) {
		s.show();
	});
	collage1.swap();
}

Collage.quantity = 0;
Collage.list = new Array();

var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

var collage2 = new Collage("g2");
collage2.endPoints = [ [220, 100], [360, 120], [280,220], [300,390], [380,300], [580,100], [500,180], [470,420], [560,330], [660, 420] ];
collage2.startPoint = [4, 180];

var collage3 = new Collage("g3");
collage3.endPoints = [ [280, 80], [240, 230], [400,100], [460,180], [280,400], [340,320], [540,290], [600, 400], [580, 130], [480,380] ];
collage3.startPoint = [4, 300];

var collage4 = new Collage("g4");
collage4.endPoints = [ [280, 80], [300, 230], [400,100], [540,120], [580,200], [340,400], [280,320], [480,290], [540,380], [700, 110], [650, 350] ];
collage4.startPoint = [4, 420];
body {
	background: black;
	margin:0;
	padding:0;
	height:100%;
}

#albums {
	position:absolute;
	top:10px;
	left:20px;
}

#about {
	position:absolute;
	top:530px;
	left:10px;
}

#about img {
	border:0;
}
#about a {
	text-decoration:none;
}

#title {
	position:absolute;
	top:10px;
	left:220px;
}

#collages {
	background-image:url("./images/albums_background.png");
	position:absolute;
	left:0;
	top:0;
	width: 180px;
	height: 100%;
	margin-top:0px;
	margin-bottom:0px;
}
#collages img {
	margin: 10px;
}

#content {
	margin-left:180px;
	color:white;
}
#content img {
	border:0;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.collageImg {
	border: 1px solid white;
}

.collageThumb {
	opacity:0.4;filter:alpha(opacity=40);
	border: 1px solid white;
}

#g1img1, #g1img2, #g1img3, #g1img4, #g1img5, #g1img6, #g1img7, #g1img8, #g1img9, #g1img10, #g1img11 {
	position: absolute; top: 60px; left: 4px;
}
#g1img11 {
	opacity:0.4;filter:alpha(opacity=40);
}

#g2img1, #g2img2, #g2img3, #g2img4, #g2img5, #g2img6, #g2img7, #g2img8, #g2img9, #g2img10, #g2img11 {
		position: absolute; top: 180px; left: 4px;
}
#g2img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g3img1, #g3img2, #g3img3, #g3img4, #g3img5, #g3img6, #g3img7, #g3img8, #g3img9, #g3img10, #g3img11 {
		position: absolute; top: 300px; left: 4px;
}
#g3img11 {
		opacity:0.4;filter:alpha(opacity=40);
}

#g4img1, #g4img2, #g4img3, #g4img4, #g4img5, #g4img6, #g4img7, #g4img8, #g4img9, #g4img10, #g4img11, #g4img12 {
		position: absolute; top: 420px; left: 4px;
}
#g4img12 {
		opacity:0.4;filter:alpha(opacity=40);
}

The way that it is implemented is pretty simple. In order to make this work, I relied on a naming convention. Lets look at one image:

?View Code JAVASCRIPT
1
<a href="./pictures/Blue/Erie Night.jpg" rel="lytebox[one]" title="Erie Night"><img id="g1img1" class="collageImg" style="display:none;" src="./pictures/Blue/Erie Night (1).jpg"/></a>

The id of the image is set to g1 for 'gallery 1', img1 for 'image 1'. If you look at the html, I had to add this logical id to every image. This is a very tedious process. There is also the code for lytebox, namely the rel="lytebox[one]" to launch the lytebox script when the image is clicked, and link all the 'one' galleries together. The other thing on this line is the style="display:none;" part. This bugs me, but it appears to be a css limitation I can't get around. Because all the images are stacked, they all appear in turn as they are downloaded without this. If I put this style in the css, then javascript can't turn it back on! It has to be an inline style. I would love to hear a solution for this.

Then we have one more line from the html file to look at.

?View Code JAVASCRIPT
1
<a href="#" onClick="collage1.swap();"><img id="g1img11" class="collageThumb" src="./pictures/Blue/Montana Road (1).jpg"/></a>

This line is the last line in each gallery, and is the last image repeated. This is the one that will not move, and forms the thumbnail for the gallery. Via css, the transparency is lowered when the collage is out. This image contains the onClick call to move the images.

Now onto the javascript. Look at this bit of code that defines a collage:

?View Code JAVASCRIPT
1
2
3
var collage1 = new Collage("g1");
collage1.endPoints = [ [280, 80], [300, 180], [400,100], [580,120], [500,200], [280,400], [340,320], [540,290], [480,380], [620, 440] ];
collage1.startPoint = [4, 60];

This defines gallery 1 ("g1"). All those numbers are the end points for where each image will be when the collage is expanded. Again, this is a pain, and it can be confusing which image you are adjusting when changing the numbers.

So lets look at the open function:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
Collage.prototype.open = function() {
	Collage.closeAll();
	for( i=0; i < this.endPoints.length; i++ ) {
		$image = this.name+'img'+(i+1);
		new Effect.Move($($image), { x:this.endPoints[i][0], y:this.endPoints[i][1], mode: 'absolute' });
	}
	this.state = "open";
}

This is pretty simple. Once I found the Effect.Move() function of scriptaculous, this simply loops over the images in the gallery, and tells the Move function to move the images from where it is (stacked with the others), to the endpoint. The close is similar. It moves the images from where they are (the endpoints) to the start point that was defined in the gallery definition.

The rest of the script is pretty simple. The other methods show all the images (doOnLoad), or set up the swap.

What could be improved? A lot. I don't like defining the galleries and the images through the id field. The user of the collage js has to have intimate knowledge of how the script works in order to set it up. Not only that, but you need matching elements defined in CSS correctly. Having the end point definitions in the js is a pain too. Would would be better, is to come up with a way to have the javascript scan the html and look for images to use, much like how lytebox does it via the rel attribute. Well, guess what? That is exactly what I am working on!

The image overlay effect

On ChristopherWardPhotography.com, when you click on an image, it pops up the image in a floating panel above the other images. I think this is pretty cool. I have done something similar in code that I had written to tarken the screen, put up a “glass pane” (you can’t click on links), and place content in an overlayed div. This library works really slick though.

I first started with lightbox. It is pretty popular, and quite a few people use it, although I don’t think it is over used. This works pretty well. It has a few dependancies, such as prototype, and scriptaculous. These libraries on there own add quite a bit of functionality to javascript, but they aren’t lightweight.

Then I found lytebox. This project shrinks down the code by “borrowing” just what is needed for the lightbox effect. Then he has improved it. The images will automatilcy resize to fit the browser screen, and it will also allow html documents in these pop ups, not just images. This is what I went with.

I kind of wish that lightbox had the same image scaling and html content that lytebox has, because I have some more plans for some sriptaculous scripting…