Creating a web-based slideshow of pictures (using Irfanview)

Transcription

1 Creating a web-based slideshow of pictures (using Irfanview) George Weir george.weir@cis.strath.ac.uk This How to describes the process of creating a web-based slideshow from a set of existing digital photos using the freely available Irfanview software package. The resultant slideshow can be placed on personal web-space and made available over the Internet. It can also be run from local disk, USB memory, CD or DVD. We assume that you already have Irfanview installed on your system. If not, you can obtain a copy directly from or from a variety of free software distribution web sites. 1. Basic steps 1. Create a new folder that contains only the photos you want to include in the web slideshow. 2. (If necessary) resize the pictures. 3. Create the slideshow. 4. Upload the folder to your Web space. 5. Tell people how to reach your slideshow (i.e., publish the web address). 2. Resize the photos 1. Start Irfanview. 2. Type the letter b to start the batch mode dialogue. This should produce the display shown in Figure 1, below. Look in menu Figure 1: Irfanview batch mode dialogue 3. Using the Look in menu (see Figure 1), select the folder that contains your slideshow photos (in this case, example ). The change should be reflected in the display (Figure 2). 5 th August 2009 Page 1

2 example folder selected add all button Figure 2: Select the target folder 4. Click the add all button to select all the photos in the target folder. This should result in the change shown in Figure 3. All files selected Figure 3: Select all of the target photos We now have a variety of actions that can be applied to the selected files (in a batch operation). In what follows, I assume that all of the original pictures are the same size and that this is larger than the required size - most digital cameras produce larger files than we would want to publish on the web, so the batch operation is to resize all of the pictures. As well as changing the display size this reduces the data size of each file and makes it quicker to load across the web. Before proceeding, ensure that you have backup copies of your original photo files (we are about to alter the files in our example folder). 5. Ensure that the Batch conversion option is selected (Figure 4). Select Batch conversion Select JPG as output format Figure 4: Select Batch conversion 5 th August 2009 Page 2

3 6. Ensure that the output format is set to JPG JPG/JPEG Format (Figure 4). 7. Ensure that the Use advanced options (for bulk resize ) box is ticked (Figure 5). Use advanced options for batch resize Advanced button Figure 5: Advanced options for batch resize 8. We now set the options for resizing the photos. Click the Advanced button (Figure 5). Don t be scared by the large set of options that this produces (Figure 6) we will use only a few settings from this dialogue. Crop option Resize option Other required options Figure 6: Advanced options 9. Ensure that the Crop option is unticked and that the Resize option is ticked. Also tick the options for Preserve aspect ratio, Use resample function and Don t enlarge smaller images (Figure 6). 10. Set the required picture size to height of 800 and width of 640 (Figure 7). (This is a reasonable size for Web display. If it proves to be too big, you may wish to reduce this to 640 x 480). Set size in height and width Figure 7: Set required size Overwrite existing files 5 th August 2009 Page 3

4 11. Finally, under the Miscellaneous options tick the box for Overwrite existing files (Figure 7). Then click the OK button to close the advanced options dialogue box. 12. On the main Irfanview batch conversion dialogue, set the output directory for the result files by clicking on the Use current look in directory button (Figure 8). Then start the batch process by clicking on the Start batch button (Figure 8). Use current look in directory Start batch button Figure 8: Set output directory 13. The batch conversion will process each file and display a status message for each step (Figure 9). If all has gone to plan, your original files have now been resized in situ and we can proceed to the next section of the Web slideshow creation. Figure 9: Batch process status display 3. Create the slideshow 1. From Irfanview, type t to start the Thumbnails program and browse to the folder that contains your photos (Figure 10). (Note: we do not use the Slideshow option available from the File menu since this is for running live slideshows on the local machine.) 5 th August 2009 Page 4

5 Figure 10: Irfanview thumbnails program 2. From the Options menu choose Select all (or simply type ctrl-a ) then from the File menu choose Save selected thumbs as HTML file (Figure 11). Figure 11: Save selected thumbs as HTML file 3. This produces another large dialogue but we will use only a few of the available options (Figure 12). Figure 12: Create HTML file 4. (i) Set the Main result HTML file name to index.html. (ii) Set the destination folder to the same folder that contains your photos, then (iii) click the Create HTML slideshow option, and (iv) click Start (Figure 13). 5 th August 2009 Page 5

6 (i) Set main HTML file name (ii) Set destination folder (iii) Tick Create HTML slideshow (iv) Click Start Figure 13: Set options 5. This creates the necessary HTML file in the background (there is no obvious activity or feedback at this point). A new file (called index.html ) will now exist in the folder that contains your photos. You can test the slideshow by browsing to this folder and double-clicking index.html. The slideshow should start in your default web browser (e.g., Figure 14). 6. Conclusion Figure 14: Example slideshow 1. Upload the folder (including the photos and the index.html file) to your Web space and tell people how to reach your slideshow (i.e., publish the web address). 2. Alternatively, you can have the files on your local disk, a USB memory stick, a CD or DVD. To run the slideshow, simply browse to the index.html file and double-click to start. 5 th August 2009 Page 6