Plug in PHP 100 POWER SOLUTIONS- P67 docx

296
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s

296
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s
How It Works
This plug-in starts by counting the number of images passed in the array $images and
assigning the value to $count. Then $out is assigned the string <script> to indicate the start
of JavaScript code, followed by a JavaScript statement to create a new array called images.
Then more JavaScript code is appended to $out by means of a for loop, which is used to
assign each image URL from the PHP $images array into the src property of each
element of the JavaScript images array. Then the remaining JavaScript code is added to $out.
Although this is a book on PHP, I’ll very briefly explain what the JavaScript code does
so that you can modify it if you choose.
At the start, a few variables are initialized that control the code’s behavior. They mainly
affect timing of the slideshow. Therefore, you can increase the initial value of fade to have
less steps during a fade and so speed it up, or you can decrease the value assigned to pause,
which represents the number of loops through which the code should cycle before moving
onto the next image.
The next three lines of code prepare the slide show by loading the first image in the images
array into the HTML elements with the IDs of PIPHP_SS1 and PIPHP_SS2, which must exist
in your web page for this plug-in to work. Then an event is set to trigger every 20 milliseconds
(thousandths of a second), which will call the function below it, called process().
The process() function is the core of the program and it controls the fading of images by
incrementing the variable fade by the amount in step until it reaches 100, during which time
it sets the transparencies of the two images so that one starts to become more transparent,
while the other becomes more opaque, and so replaces the first.
Then the delay counter begins to increment in a loop, which first sets the invisible
image to the same as the currently visible one, and then makes the previously invisible one
visible (and the currently visible one invisible). This happens without the user seeing any

change but means that a new image can now be loaded into the previously visible (but now
invisible) image, ready to be faded in the next time around.
Then we come to the functions. The function opacity() has the commands necessary to
change an object’s opacity in Internet Explorer and most other browsers. The function load()
loads an image into an HTML element, and the function $() is simply a shorthand that many
JavaScript programmers use to save on typing document.getElementById(), as that is one
of the most common statements you are likely to use in dynamic HTML processing.
How to Use It
To use this plug-in, you need to prepare some HTML such that two elements with the IDs of
PIPHP_SS1 and PIPHP_SS2 exactly overlap each other. The plug-in will then place a different
image in each of these elements and change the opacities of each to fade between them.
For example, I uploaded a few sample images to my robinfnixon Flickr account which
the following code will use:
$result = PIPHP_FetchFlickrStream('robinfnixon');
if (!$result[0]) echo "No images returned";
else
{
$style = "'position:absolute; top:10px; left:10px'";
echo "<img id='PIPHP_SS1' style=$style>";
echo "<img id='PIPHP_SS2' style=$style>";
echo PIPHP_SlideShow($result[1]);
}
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
297
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
297
By calling PIPHP_FetchFlickrStream() (plug-in 74), it saves you having to rummage
about and assemble a few photos to try the plug-in with, but you will need to copy the Fetch
Flickr Stream plug-in into your program, or otherwise include it, to use this example.
If you want to use your own images, then copy some into the same folder as the program

and ignore the preceding example. Instead use code such as the following, replacing photo1.
jpg with the name of your first image, and so on:
$style = "'position:absolute; top:10px; left:10px'";
echo "<img id='PIPHP_SS1' style=$style>";
echo "<img id='PIPHP_SS2' style=$style>";
$images = array('photo1.jpg', 'photo2.jpg', 'photo3.jpg');
echo PIPHP_SlideShow($images);
To make this work, the style= attribute of the <img> tag is used to tell the web browser
to place each image exactly 10 pixels in from the left, and 10 pixels down from the top of the
browser, which makes them overlap each other. The id= attributes then uniquely identify
each image so that it can be manipulated by the JavaScript code. Just replace the style
details with coordinates of your choosing for the part of the web page in which you want
the slideshow to appear. You can even add borders to the images or any other elements you
think would present them effectively.
The important thing about this plug-in is that all the images displayed should preferably
have the same width and height so that they will all fade into each other neatly. At the very
least you can get away with having them all with the same relative dimensions and then
force a run-time resize in the image tags, like this:
echo "<img id='PIPHP_SS1' style=$style width='320' height='240'>";
echo "<img id='PIPHP_SS2' style=$style width='320' height='240'>";
The images will then fade neatly between each other, but any that are enlarged or reduced
by these forced widths and heights will not look as good as if they had been properly resized
in a graphics program.
The Plug-in
function PIPHP_SlideShow($images)
{
$count = count($images);
echo "<script>images = new Array($count);\n";

for ($j=0 ; $j < $count ; ++$j)

{
echo "images[$j] = new Image();";
echo "images[$j].src = '$images[$j]'\n";
}

return <<<_END
counter = 0
step = 4
fade = 100
delay = 0
pause = 250
startup = pause


298
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s

298
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s
load('PIPHP_SS1', images[0]);
load('PIPHP_SS2', images[0]);
setInterval('process()', 20);

function process()
{
if (startup > 0) return;

if (fade == 100)
{
if (delay < pause)

{
if (delay == 0)
{
fade = 0;
load('PIPHP_SS1', images[counter]);
opacity('PIPHP_SS1', 100);
++counter;

if (counter == $count) counter = 0;

load('PIPHP_SS2', images[counter]);
opacity('PIPHP_SS2', 0);
}
++delay;
}
else delay = 0;
}
else
{
fade += step;
opacity('PIPHP_SS1', 100 - fade);
opacity('PIPHP_SS2', fade);
}
}

function opacity(id, deg)
{
var object = $(id).style;
object.opacity = (deg/100);
object.MozOpacity = (deg/100);

object.KhtmlOpacity = (deg/100);
object.filter = "alpha(opacity = " + deg + ")";
}

function load(id, img)
{
$(id).src = img.src;
}

function $(id)
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
299
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
299
{
return document.getElementById(id)
}

</script>
_END;
}
Input Prompt
Sometimes you can make the life of your users easier when filling out web forms by placing
a prompt for what is required in the form field itself. Obviously you only want to do that
when the field is blank; otherwise, if a field has a value then that’s likely to be what the user
wanted to enter.
Using this plug-in, whenever you create a form <input> element you can specify such a
prompt, and it will only appear when the field contains no input. Figure 11-9 shows the
plug-in being used to display the string Required Field: Please enter your Username here in a
field where a username is being requested.

The plug-in is smart enough to note when a field has either been pre-supplied with a
value, or if a user has started entering input, in which case it will not replace it with the
prompt text. Figure 11-10 shows how it leaves the input well enough alone in such cases.
About the Plug-in
This plug-in creates the HTML and JavaScript required to enable the automatic displaying
of a prompt within an input field whenever the field is left blank. It requires the following
arguments:
• $params Any additional parameters needed by the tag, including name=, type=,
rows=, cols=, name=, size=, value=, and so on
• $prompt The prompt to display
FIGURE 11-9 No text has been entered into the field so the prompt text is displayed.

88

300
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s

300
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s
Variables, Arrays, and Functions
$id PHP string comprising PIPHP_IP_ and a random number
id
JavaScript string containing an input element ID
PIPHP_JS_IP1()
JavaScript function called when an element is given focus
PIPHP_JS_IP2()
JavaScript function called when an element loses focus
$() JavaScript function shorthand for document.getElementById()
How It Works
So that this plug-in can be used multiple times in a page, it first creates a unique ID in $id,

comprising the string PIPHP_IP_ and a random number between 0 and a million. This ID is
then used for all the form input elements wherever they are referenced by the HTML and
JavaScript that the plug-in assembles.
Next a string of HTML and JavaScript is returned, starting with an HTML <input… tag.
The ID in $id is then assigned to the tag, as well as the parameters in $params. Additionally,
two events are added to trigger calls to a pair of functions whenever the user selects or
deselects the input field. When the user gives the field focus by clicking in it, the onFocus
event handler calls PIPHP_JS_IP1(), and when the field loses focus, because the user has
removed focus (generally by clicking elsewhere), then the onBlur event handler calls PIPHP_
JS_IP2(). In either case, the ID of the input field is passed as the only parameter.
Next the JavaScript is created by opening a <script> tag, and the first statement there
calls up PIPHP_JS_IP1() to ensure that the prompt text is displayed if the input field has
nothing in it.
Next come the two functions just mentioned. The first one, PIPHP_JS_IP1(), checks the
value of the element referred to by the variable id, and if it is the same as the contents of the
variable prompt, then the prompt is currently being displayed and so it is removed, ready
for the user to enter their own data.
The second function, PIPHP_JS_IP2(), does the inverse of that just mentioned. If the
input field identified by id is empty, it inserts the value in the variable prompt into the field.
Finally, the function $() is used as a handy way to save on typing document
.getElementById() several times. Then the script is closed with a </script> tag, and
the _END; indicates the end of the multiline string, which is then returned.
FIGURE 11-10 If a field already has some text, the plug-in knows to not interfere.