A Multiple Page Image Gallery with Active Client Pages
(Page 1 of 4 )
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.
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.
Strategy
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.
Next: Use of ACP in the Example >>
More HTML Articles
More By Chrysanthus Forcha
