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.

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.

Intro To Java Classes Revisited

This entry is part 3 of 13 in the series Intro to Java

This lesson will look more at class concepts in Java: Extending, overriding, composition, and inner classes. It was created as a lesson for a class room setting. I have converted it to a post here.

Is a Class just a Class?

I recently heard that the classic contractor response to a question is “Well, it depends.” That might just apply here. There are several different types of classes. There are regular classes, like we have been using, there are inner classes, and there are anonymous inner classes. In all cases though, they behave just the same. They still need to be instantiated, and they still contain variables and methods. What we will look at here is what those different types are, and when you might use them.

To do this, we will once again revisit the Robot. This time we will be adding a head that rotates to the Robot. We will look at placing the code directly into the Robot without using another class, using an inner class to Robot, and using containment to hold another class.

Before we get to that, lets revisit the parent/child relationship that exists when a class is extended and how casting works. Then we will get to the RobotHead.
Sun Trails Index:
Link into Objects and Classes Trail: (nested classes)

Continue reading

Deciding on the NAS Software

This entry is part 2 of 3 in the series Building a NAS

tuxSo, I hope you have a box ready, because we are going to install some software today. I had said this was going to be built using Linux, but we really should take another look at some of the possibilities. I don’t want to run Windows server on this box. If that is something you are interested in, you will have to use some Google skills. I wan to look at how we can use some Free and Open Source Software (FOSS) to do what we want to do. There are some alternatives to rolling it ourselves, and they are worth a look. But first, lets decide what it is that we want to run on this box, or what capabilities it needs to have.
Continue reading

New Java Lesson on Static Stuff

JavaI taught a new lesson this week on Static Stuff, which has been posted on this website. This is part 2 of the series Intro to Java that I have been creating. In this lesson we look at static methods and static class variables. There are several code examples to go with the lesson. The feedback in class has been pretty good. Hopefully some others will find in helpful as well.