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:
- lytebox.js
- lytebox.css
- 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 :
- index.html
- lytebox.js
- lytebox.css
- gallery.css
- images (folder)
- 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.
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:
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.
Lytebox Example
Lytebox Example Gallery
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.
