Home arrow HTML arrow A Multiple Page Image Gallery with Active Client Pages

A Multiple Page Image Gallery with Active Client Pages

You can have a web page which has pictures. This page may have links to other pages that have pictures. The linked pages may also have links to pages that have pictures, and so on. In this second part of a two-part series I show you how to make the pictures in all these pages display quickly at the browser, when the user clicks a button. Of course, we are going to use ACP techniques to solve the problem. Only the first picture of the first page may be displayed slowly.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
July 28, 2009
  1. · A Multiple Page Image Gallery with Active Client Pages
  2. · Use of ACP in the Example
  3. · The Code
  4. · The Three Pages

print this article

A Multiple Page Image Gallery with Active Client Pages
(Page 1 of 4 )

You need good knowledge of HTML, JavaScript, Ajax and Perl in order to understand this part of the series.

The Example

Even though the problem here is more challenging than that of the previous part of the series, we shall handle a simplified form of it. You will be able to extend the knowledge you gain to a more elaborate project. So we have a single page, which can display pictures. This page has three links, which lead us to three other pages that have pictures, just like the first page (as far as the number of pictures). For simplicity, the first page has five pictures and each of the three other pages also has five pictures.

For most of this part of the series, we shall design code to solve this problem. To make our work easier, we shall use the design discussed in the previous part. In fact the previous page will be our master (first) page. We shall just add three buttons to it. When each of these buttons is clicked, you will see a new page that has five pictures.


We shall maintain the page from the previous part as our master page here. We will just add three buttons to it. Each of these buttons will have a function that, when clicked, will display a new page with its own pictures. Each new page is arranged just like the first, except that it does not have any button to produce a new page.

After the master page has been downloaded (when you see it on the screen), it will download the HTML contents (documents) for the other three pages in advance as strings. That way, when these pages are needed (a button is clicked), they will be produced from the master page. The user will not be waiting impatiently for the download time to elapse.

The master page will also download the images for all three new pages. The HTML contents for the three pages and the images for the three pages will be downloaded by the master page after it has downloaded its own images.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials