Scrolling Image Gallery without JavaScript
Actually it is easy, and even very simple with a few tips, to build an image gallery that seem sophisticated to the user.
To display simply a gallery, without overloading a page with a lot of photos or creating thumbnails and install a system to display some sort of lightbox, the solution is the scrolling gallery:
An iframe is embedded below and the images placed into another page are displayed inside the iframe...
This script works with Firefox, IE, Chrome, Safari, Opera.
Gallery or lightbox?
We choose a gallery with a lightbox when you can let the user choose the images from thumbnails, and enlarge one as needed.
But the scrolling gallery also its advantages:
1. Presenting images one by one.
2. Without thumbnails.
3. Without overloading the page.
It creates a chaining effect that can be desirable, and it is easy to return to an image with the scroll bar.
Both processes have the same problem, images are not accessible to search engines in the context of the page.
To promote personal images, you need to integrate each into their own page with the related information, which is good for the engines and not inconsistent with a gallery.
How to create the gallery
Two pages are needed.
1) Create a page of images
For a horizontal gallery it is suitable to give the same height to all images, which can be done quickly with a script as Thumbnail Maker.
If you want to present the gallery vertically, it is the width that must be the same.
The images are placed in a blank HTML page one after another (without return to the line). But to avoid a return to the line and get a scroolbar instead, we must define a fixed width to the page. To this we add the width of all images.
The stylesheet for this page image will be like this:
body
{
width:3096px;
height:400px;
background-color:#ccc;
margin:0;
padding:0;
border:none;
}A gray background provides a better redering. To not have borders for the iframe is a personal choice, you could also present a large border: border: 4px;
In the demo this page is called: scrolling-gallery-iframe.html.
2) Inserting an iframe in the page of presentation
This is done with the following code:
<iframe id="gallery" src="scrolling-gallery-iframe.html">
</iframe>The dimensions of the window are defined in a style sheet:
#gallery
{
height:426px;
width:500px;
}The demo page can be used as a starting point for personal use.
Improving the effect
You can also:
- Place a label under each image. Using a table or a style sheet will be required.
- Intercalate text with images.
- Combine text with image in the same view.
All this provides an impressive effect, which suggests more work from the webmaster than the quite minimal means actually employed!