The script
This script converts a bullet list of gallery images into a slideshow with previous/next and numbered image links. Unlike the gallery slideshow script, it does not use thumbnails, and it can only integrate itself within the content of the page instead of replacing it. It could, in fact, be used to step through any bullet list contents (except nested lists), but is designed to be used with images, where this sort of navigation makes more sense.
It is a DOM-based script that will work in almost all DOM capable browsers that also support DOM events. In browsers that cannot support the script, it simply falls back to showing the regular image list, leaving it completely accessible.
In order to remain simple, it has absolutely no flexibility at all, except for styling. It will simply locate every bullet list that you have said is an image gallery, and it will prepare it to be used as one. It will assume that every item in that image gallery list is intended to be treated as an image. It also can only be used with images that fit nicely into the available space on your page. If you need more flexibility than this, use the gallery slideshow script instead.
Demo
Red
Orange
Yellow
Green
This one is blue
Indigo
Violet
Instructions
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
Download the script, then inbetween the <head> tags, put:
<script src="PATH TO SCRIPT/simplegallery.js" type="text/javascript"></script>Make a bullet list (UL), and make sure that each LI contains the appropriate IMG element, along with any descriptive text. This is the normal approach for many in-page galleries. Give the UL a class of "galleryimages", as this is what tells the script that you want it to treat this list as a gallery. As an example, the following markup will work with the script:
<ul class="galleryimages">
<li><img src="foo.jpg" alt=""> A foo</li>
<li><img src="bar.jpg" alt=""> A bar</li>
<li><img src="baz.jpg" alt=""> A baz</li>
</ul>For best results, the images should all be the same height as each other, and the descriptive texts should use the same height as each other. This would prevent the following content from moving when images are changed. However, it is not essential, and the script will not place any restrictions on the heights of the contents.
The script attempts to run as early as possible, either before or after the load event, depending on the browser. For this reason, it is essential to ensure that the markup that represents the gallery is in the page before the onload event fires (at the point when the DOMContentLoaded event fires). To keep it simple, just make sure the list is included in the static HTML markup of the page source.
There is no limit to how many of these lists can appear on one page.
Styling the gallery
By default, the gallery is almost unstyled, and its styling should be tailored to suit your own style. Only a few style properties are created by the script, and these should not be removed or overridden. The resulting DOM it creates is as follows:
<ul class="galleryimagelist">
<li><a><<</a></li>
<li class="activeimage"><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>>></a></li>
</ul>
<ul class="galleryimages">
<li><img src="foo.jpg" alt=""> A foo</li>
<li style="display:none;"><img src="bar.jpg" alt=""> A bar</li>
<li style="display:none;"><img src="baz.jpg" alt=""> A baz</li>
</ul>You will need to use some CSS to style this structure. The following CSS should get you started, but be aware that it may need to be tailored to suit your document, and that part is up to you. Also note that for maximum compatibility, you should ensure that your DOCTYPE triggers standards mode rendering.
ul.galleryimages, ul.galleryimages li, ul.galleryimagelist, ul.galleryimagelist li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.galleryimages li, ul.galleryimages img {
display: block;
}
ul.galleryimagelist {
margin-bottom: 0.5em;
}
ul.galleryimagelist li {
display: inline;
}
ul.galleryimagelist a {
margin: 0 0.2em;
padding: 0 0.5em;
text-decoration: none;
color: #6180bb;
background: #0b1880;
}
ul.galleryimagelist a:hover, ul.galleryimagelist li.activeimage a {
color: black;
background: #d2d3e7;
}