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