Applying Special Picture Effects
| The previous seven templates use relatively simple picture effectsthat is, all you have to do is dictate where on the page the photo will display, and that's what you get. That's well and good, but there are some fancier photo effects you can employ in your listings, which we'll examine next. Template 7.8. Link to a Larger Picture Some potential buyers are on high-speed broadband connections, and have no problems downloading large, high-resolution images. Other potential buyers are on slow dial-up connections that take forever to download large images. This is why, in general, you want to include only smaller images in your listings, so that your page loads acceptably for all potential buyers. That doesn't mean, however, that having larger, higher-resolution photos available isn't a good idea. You just don't want to burden all potential buyers with those slow-to-download image files that require a higher-resolution desktop to display properly. To that end, you can choose to display a standard low-resolution photo in the listing itself, as shown in Figure 7.8, but then link to a higher-resolution photo, hosted on another website. When potential bidders click on the low-res photo, the high-res photo is displayed. Figure 7.8. A small, low-resolution photo displayed in the body of the listing; click on the photo and a larger, higher-resolution photo is displayed. This technique requires you to upload two different photos to your picture hosting service. In the following code, URL-BIG is the larger, higher-resolution photo, while URL-SMALL is the smaller, lower-resolution photo. The code is simple; all you do is add a link around the low-res photo to the high-res one. <h1 style="text-align: center">This is the title</h1> <center> <a href="URL1"><img src="URL2"><BR> Click for larger photo</a> </center> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> Note that we also added a "click for larger photo" text instruction under the photo. Clicking either the photo or the text will display the larger photo. Template 7.9. Big Picture with Multiple Click-to-Display Buttons Now we'll get really fancy. The template shown in Figure 7.9 displays a single large picture, with a row of buttons underneath. When a visitor clicks a button, the picture changes. It's a great way to display multiple photos in the limited space of an eBay item listing. Figure 7.9. Displaying a single large picture with multiple click-to-display buttons. The code for this trick is a trifle complex, so pay close attention. As written, the code creates eight buttons (for eight photos), but if you don't have that many you can cut the excess lines of code. Note In several of the following examples, you'll note lines of code that begin with an exclamation point following a left-bracket, like this: <!. This exclamation point code indicates a comment linethat is, a line that is not read as code, but is instead used to insert comments to anyone reading or editing the code. Start by putting the following code at the very beginning of your listing: <!--BEGINNING OF FIRST CODE BLOCK--> <!--INSERT AT THE VERY BEGINNING OF THE BODY SECTION--> <script language="JavaScript"> var CachedImages CachedImages = new Array(8) CachedImages[0] = new Image CachedImages[0]="URL1" CachedImages[1] = new Image CachedImages[1]="URL2" CachedImages[2] = new Image CachedImages[2]="URL3" CachedImages[3] = new Image CachedImages[3]="URL4" CachedImages[4] = new Image CachedImages[4]="URL5" CachedImages[5] = new Image CachedImages[5]="URL6" CachedImages[6] = new Image CachedImages[6]="URL7" CachedImages[7] = new Image CachedImages[7]="URL8" function ChangeImage(n) { document.SpaceImage.src=CachedImages[n] } </script> <!--END OF FIRST CODE BLOCK--> Then use the following template code: <!--REGULAR TEMPLATE CODE--> <h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> <!--END OF REGULAR TEMPLATE CODE--> <!--BEGINNING OF SECOND CODE BLOCK--> <!--INSERT WHERE YOU WANT THE PHOTOS TO APPEAR--> <center> <img src="URL1" name="SpaceImage" height="400"> </center> <p> <form name="ImageSelector"> <center> <input type="button" value="Picture 1" onClick="ChangeImage(0)"> <input type="button" value="Picture 2" onClick="ChangeImage(1)"> <input type="button" value="Picture 3" onClick="ChangeImage(2)"> <input type="button" value="Picture 4" onClick="ChangeImage(3)"><br> <input type="button" value="Picture 5" onClick="ChangeImage(4)"> <input type="button" value="Picture 6" onClick="ChangeImage(5)"> <input type="button" value="Picture 7" onClick="ChangeImage(6)"> <input type="button" value="Picture 8" onClick="ChangeImage(7)"> </center> </form> </p> <!--END OF SECOND CODE BLOCK--> Note If you try to test this code with pictures stored locally on your hard disk, it won't work. This code works only with pictures actually uploaded to a web server. Whewthat's a lot of code! If you choose to adapt this code for use in other templates, know that there are two separate code blocks you have to deal with. The first code block should go at the very beginning of the <body> sectionthat is, it should be the initial code in your template. The second code block should be placed wherever you want the photos to display in your listing. Template 7.10. Big Picture with Click-to-Enlarge Thumbnails This next trick creates a similar picture effect, this time with thumbnails of the additional pictures below the main picture. As you can see in Figure 7.10, when the potential buyer clicks a thumbnail, the big picture changes to display the new picture. Figure 7.10. A large master picture with multiple click-to-enlarge thumbnails. This code requires you to create both large and small (thumbnail) versions of each of your photos. (The small versions of your pictures should be no more than 100 pixels wide.) The thumbnails are displayed in the picture grid; the large versions are displayed when you click the thumbnails. <!--REGULAR TEMPLATE CODE--> <h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> <!--END OF REGULAR TEMPLATE CODE--> <!--BEGINNING OF PICTURE CODE--> <table align="center" cellspacing="20" height="500"> <tr> <td> <center> <img src="URL1-BIG" height="400" border="0" alt name="the_pic"><br><br> <a href="#"; onClick="document.the_pic.src='URL1-BIG'; return false;"> <img src="URL1-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src='URL2-BIG'; return false;"> <img src="URL2-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src='URL3-BIG'; return false;"> <img src="URL3-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src='URL4-BIG'; return false;"> <img src="URL4-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src='URL5-BIG'; return false;"> <img src="URL5-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src='URL6-BIG'; return false;"> <img src="URL6-SMALL" border="0"></a> </center> <p style="text-align: center; font-family: Arial; font-weight: bold; font-size: 12pt"> Click on thumbnails to enlarge</p> </td> </tr> </table> <!--END OF PICTURE CODE--> The picture code should be inserted wherever in your template you want to display the picture grid. Replace URL1-BIG, URL2-BIG, and so on with the URLs for your large pictures; replace URL1-SMALL, URL2-SMALL, and so on with the URLs for your thumbnail pictures. Template 7.11. Scrolling Picture Slideshow This template features a scrolling slideshow of pictures, as shown in Figure 7.11. All the pictures for your listing will scroll by in a repeating loopanother good way to display multiple photos in a limited space. Figure 7.11. A scrolling picture slideshow. To create this complex slideshow, we need to use some complex JavaScript code. This example allows for four photos; you can use more photos by adding extra slideimages lines, with consecutive numbering. Replace URL1, URL2, and so on with the URLs of your picture files. Make sure you place the slideshow code in your template where you want the slideshow to display.
Template 7.12. Animated Picture Flipshow Another approach to the picture slideshow is the animated flipshow, as shown in Figure 7.12. With this type of slideshow, the pictures don't scroll, they flip from one to another. Figure 7.12. An animated flip-type picture slideshow. This is another JavaScript template. This particular code allows for four pictures (variableslide 0 through 3). To use more pictures, add additional variableslide lines (numbering upward from 4); to use fewer pictures, delete one or more variableslide lines starting from the last one backward. Again, you insert the slideshow code in your auction template where you want the slideshow to appear. And make sure that your pictures are sized to the 400 x 400 size specified in the code, or they'll be stretched or squeezed to fit. (Alternately, you can change the 400 x 400 specification to match the size of your particular photos.)
Template 7.13. Manual Advance Picture Slideshow This next template presents yet another type of slideshow. This manual advance slideshow is nifty because it includes both automatic play (via the Start button) and manual advance, via backward/foreword buttons. As you can see in Figure 7.13, visitors can even use the pull-down list to go directly to a particular photo. It's the ultimate in shopper convenience! Figure 7.13. Multiple photos displayed in manual advance slideshow. Like most of these slideshows, this template uses some complicated JavaScript code. This particular example is coded for four photos, but you can add more by including additional <option> statements, increasing the numbering in order. Or, if you have fewer photos, just delete the last <option> line(s). Of course, you should replace URL1, URL2, and so forth with the URLs for your image files. And, as with the previous template, make sure that your photos don't exceed the 400 x 400 size.
|
:'+scrollerheight+';overflow:hidden; background-color:'+scrollerbgcolor+'">')
EAN: 2147483647
Pages: 101