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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

A Multiple Page Image Gallery with Active Client Pages - The Three Pages
(Page 4 of 4 )

The contents of these three pages are in Perl files. There are three corresponding Perl files for these pages. The names of these files are: dept0.pl, dept1.pl and dept2.pl. I will explain only the content of the first one. The other two are similar. This is the content of the dept0.pl file:

 

$returnStr = qq{

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<script type="text/javascript">

var num = 1

function nextPic()

{

document.getElementById('TD1').innerHTML = "<img src="masterImages/department0Images/d0_" + num + ".gif" id="I" + num + "" style="display:block">";

num = (num + 1)%5;

}

</script>

</head>

<body>

<table cellpadding="0" cellspacing="0">

<tbody>

<col span="1", width="400" >

<tr>

<td id="TD1" width="400" height="400">

<img src="masterImages/department0Images/d0_0.gif" id="I0" style="display:block">

</td>

</tr>

</tbody>

</table>

 

<br />

<button type="button" onclick="nextPic()">Next Picture</button><br /><br />

 

<img src="masterImages/department0Images/d0_1.gif" id="I1" style="display:none">

<img src="masterImages/department0Images/d0_2.gif" id="I2" style="display:none">

<img src="masterImages/department0Images/d0_3.gif" id="I3" style="display:none">

<img src="masterImages/department0Images/d0_4.gif" id="I4" style="display:none">

<img src="masterImages/department0Images/d0_0.gif" id="I0" style="display:none">

 

</body>

</html>

 

};

print $returnStr;

 

 

There are just two Perl statements in this file. The statements are:

 

$returnStr = qq{};

 

and

 

print $returnStr;

 

You have the quoting operator, qq{}. Whatever is in the {} brackets is considered to be a string. The {} brackets handle the HTML content you would have for an HTML document. So you do not have to escape anything. The second Perl statement returns the string of the qq{} operator, when the file is called by the Ajax function in the master page.

You can now read through the contents of the file. The logic of what is inside the qq{} operator is similar to what we have in the master page, so I will not explain it.

You can download the complete code for this part of the series from here:

Imagegallery2example.zip

Remember that I use a personal web server for the example. To test it, create the directories as mentioned above, unzip and copy the files to their respective directories. Start your personal web server, open your browser window, type http://localhost/example.htm in the address bar and click Go.

The directories and their different files are as follows:

 

root

  • example.htm

 

cgi-bin

  • dept0.pl

  • dept1.pl

  • dept2.pl

 

masterImages

  • m0.gif

  • m1.gif

  • m2.gif

  • m3.gif

  • m4.gif

 

department0Images

  • d0_0.gif

  • d0_1.gif

  • d0_2.gif

  • d0_3.gif

  • d0_4.gif

 

department1Images

  • D1_0.gif

  • D1_1.gif

  • D1_2.gif

  • D1_3.gif

  • D1_4.gif

 

department2Images

  • D2_0.gif

  • D2_1.gif

  • D2_2.gif

  • D2_3.gif

  • D2_4.gif

 

Response from Browsers

Internet Explorer 6 handles the example well. Mozilla Firefox 2 handles it reasonably. Netscape 8 could not handle the example. Opera 9 handled it reasonably. Safari 3 could not handle the example.

However, note that for the single page case in the previous part of the series, the example worked with all of the above browsers.

Well, we have come to the end of the series. You have learned how to use ACP to produce a fast operating image gallery. I hope you appreciated it.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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