Flexible web photo gallery page navigation

Add more flexibility to your web photo galleries with new version of Extreme Thumbnail Generator - award winning web photo gallery creator software. Now you can make navigation between gallery pages even easier with drop-down list or numbered links to all pages to every gallery page. Also in the new version we introduced new gallery template type. It uses HTML i-frames to show both thumbnails and full-size images at the same time.

Download Extreme Thumbnail Generator Download Extreme Thumbnail Generator

So what types of web page navigation are there in Extreme Thumbnail Generator and how you can use them in your galleries?

Traditional (or basic) navigation

Since the first version Extreme Thumbnail Generator allowed users to create web photo galleries with basic navigation links to the next, previous, first and last page. Also all full-size image pages can have a link back to the thumbnails page. It is very easy to add any of these links to the gallery page if you know HTML. For example, to add a navigation link to the next full-size image page you can write the following HTML code in the image page template text:

<a href="[#imagemenubar.next#]"><img src="next_button.gif" alt="Next image" /></a>

In the above code example the [#imagemenubar.next#] is a special tag. It is replaced with actual address of the next image page in the gallery during the gallery creation process. And if current page is the last one in the gallery, then the line containing the above tag is not added to the generated image page to hide the link.

Using this approach you can easily create a navigation section that looks like this:

Basic web page navigation in web photo gallery

Navigation with drop-down list

One of the new ways to navigate between web photo gallery pages introduced in the new version is drop-down list. This list contains links to all thumbnails or image pages with customizable items text. It allows navigating to any thumbnails or image pages in the gallery by selecting its name in the list, so you will not have to click the Next page link 5 times to get from thumbnails page #2 to thumbnails page #7 anymore.

It is also very easy to add a navigation drop-down list to the gallery pages. You just need to add the [#thumbsmenubar.drop_down_list#] tag (for thumbnails pages) or the [#imagemenubar.drop_down_list#] tag (for image pages) to the corresponding template text. And to set up the text of the drop-down list items you have to switch to Drop-down list section in the built-in template editor.

Navigation drop-down list settings

Note that you can use special tags in the drop-down list items text to get a list just like the one shown below.

Web page drop-down list navigation

Another important thing to note is that drop-down lists use JavaScript to navigate between pages. Some browsers may ask users to turn the "Active content" (i.e. JavaScript) on before allowing them to use it.

You can combine basic navigation with the drop-down list navigation. We did it in one of the new templates and the result is shown below.

Combination of basic and drop-down list navigation

Numbered links to all pages

Another way to improve the web photo gallery page navigation is to add numbered links to all pages on every gallery page. This way you will get links to all pages, just as with the drop-down list, but without JavaScript - just plain HTML navigation. The [#thumbsmenubar.page_number_links#] tag is used to add numbered links to all thumbnails pages and the [#imagemenubar.page_number_links#] tag is for image pages. After the tag is added switch to the Links to pages section for more settings.

Navigation with numbered links to all gallery pages - settings

As you can see on the above screenshot, you can use special tags in the link text. Also you can set the program to skip some links and show only several links at the beginning and at the end, as well some links around the current page number. This option is very useful when you have a gallery with hundreds of images and you do not want the navigation links to occupy more space on the page than the image itself.

We have used a combination of basic web page navigation with numbered links in one of the new templates available in the latest version of Extreme Thumbnail Generator. The result is shown below.

Numbered links navigation with basic web page navigation

Share |