Tutorial by Jazzo the Great
Welcome to the tutorial for JazzGalleries, an XML-based photo gallery code, created by Jazzo the Great. The purpose of JazzGalleries is to have a simple way of coding a professional looking photo gallery, without the limitations of photo-hosting websites or the difficulty of HTML.
JazzGalleries is very simple for amateur webmasters because it does not require much coding if you just want a simple photo gallery. It will also suit the needs of professionals, since it allows many advanced settings. All together, it is much simpler and much more efficient than an HTML photo gallery. If you would like to view an example gallery, click here.
Follow this tutorial to learn more!
Before taking this tutorial you should have a basic knowledge of XML.
JazzGalleries documents have a very simple document structure. Here is an example of a basic photo gallery:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="http://jazzothegreat.com/files/jazzgalleries.xsl"?>
<jazzgalleries title="title" author="author">
<image name="name">
...
...
...
</image>
</jazzgalleries>
The part in blue is the XML declaration which is required in any XML document. The part in red is the reference to the XSL stylesheet which tells the browser how to display the XML code. Just copy it from here and paste it right under the XML declaration and you will be fine. Then comes the jazzgalleries tag. This is the root tag of the document. There are only two different attributes it can contain and it can have each one once at maximum. They are:
The title of the gallery will display differently depending on whether you have just one of the two, both, or neither. I recommend having one of them. Use the "title" attribute if you want to give your gallery a title. If not, then I'd recommend using the "author" attribute. It will then at least display whose gallery it is. It also looks quite nice if you use both attributes.
Below that is the "image" tag. This is where the images actually start, and you will learn more about that in the next tutorial.
Specify image details with child elements of the image tag. Here is an example of an image.
<image name="Example Image">
<url>http://jazzothegreat.com/myimage.jpg</url>
<width>640</width>
<height>480</height>
<label>Example</label>
<description>An example image.</description>
</image>
This is about as basic as you can get with an image. The image tag has only one attribute and is not required, but it is recommended. That is the "name" attribute. It specifies the name of the image. If that attribute is not there, the name will display as "untitled."
It also contains some child elements. Only the url tag is required, since it gives the url of the image, and the others are just recommended. They do exactly what you'd think they do. Since many webmasters don't want the image to display full size on the page, you can set the width and height with the width and height tags. The label tag gives your image a label which will display. It is important since the gallery, by default, sorts the images by label alphabetically. The description tag is recommended. It displays a description of the image. Say you want to display an attribute of the image? For example, what if you want a bit of text that says the camera it was taken with, or where it was taken, or if you're a serious photographer, ISO and things like that? You can use the "att" tag. It should be placed below the width and height tags and above the label tag. This is how it would be used:
<att name="attribute">content</att>
If you insert that within an image tag, on the left or right side of them image, it would display:
Attributre: Content
Here's an example of a real use of the "att" tag:
<att name="camera">Canon PowerShot SD 750</att>
That would display either to the left or the right of the image like this:
Camera: Canon PowerShot SD 750
You can have up to 8 "att" tags per image and they will be placed to the left or the right of the image. JazzGalleries automatically alternates from the left side to the right side when placing. That basically means that the first, third, fifth, and seventh will be placed on the left and the second, fourth, sixth, and eighth will be placed on the right. However, that doesn't mean you need eight. You can have from 0-8 "att" tags for each image. This example gallery has four att tags for each image. You will notice them on the left and right of the image.
For those who wish to change colors and fonts to make their gallery just the way they want it, there is the style tag. The style tag's child elements can specify different colors and fonts. Here is an example of the tag in use:
<jazzgalleries author="" title="">
<style>
<bgcolor>color value</bgcolor>
<text>color value</text>
<border>color value</border>
<border-hover>color value</border-hover>
<font>font name</font>
</style>
<image name="">
...
...
...
</image>
</jazzgalleries>
There are five different child elements that it can have which are shown in the above example. They each specify exactly what you'd think they'd specify. The bgcolor tag specifies the background color. The text tag specifies the text color. The border tag specifies the color of the border of the images and thumbnails. The border-hover tag specifies what color it changes to when you move your mouse over it. The font tag specifies the font.
Each image can also have advanced settings. These are things like controlling whether or not to generate HTML or BB code for the image and whether or not you have the option of viewing full size. Here's an example of using advanced settings.
<image name="name">
...
...
...
<settings>
<html></html>
<bb></bb>
<full-size window=""></full-size>
</settings>
</image>
The settings tag should be the last tag in an image. Therefore it's usually below the description tag. There are only three child elements of the settings tag. Two of them are very simple. The html tag and bb tag specify whether or not JazzGalleries should automatically generate code for the image. By default, it generates HTML code for the image, but if the value of the html tag is "off," it will not generate html code. By default, it generates BB code for the image, but if the value of the bb tag is "off," it will not generate bb code. The full-size tag is more complicated. If the value is off, it will not give you the option of viewing the image full size. The value can also be a URL. If it is, when you click the image, that URL will open. This is if you have a full-size version on some other page. It has one attribute. That is the "window" attribute. If the value is "same," the full size image will open in the same window. If not, it will open in a new window.
Tutorial by Jazzo the Great
