Using without Director

Loading full screen images

The SlideShowPro Player's full screen mode allows users to browse your slideshow in an expanded format that fills their display screen. As an option through the Full Screen Reformat parameter, the player (when entering full screen mode) can request an alternate set of images to use. This gives you the opportunity to present images that are formatted larger (both in dimensions and file size) instead of re-using the content being loaded in the "normal" HTML view.

This chapter will cover how full screen images are created and linked to in the XML document the SlideShowPro Player when not using SlideShowPro Director.

Before we begin...

The instructions here extend the instructions for creating slideshow images, so if you haven't already built a slideshow that loads slideshow content you should do that first before proceeding.

Step one: Create directory

Create a new folder on your desktop named "fs".

Step two: Create full screen images

Open each of the original images you used to create slideshow content with in an image editing application (like Photoshop). Modify their size to the dimensions you want. One thing that's different about full screen mode (compared to the HTML view) is that the size of the area will always be different, for it depends on the display size of the end-user. So it's best to create images that will work with a wide variety of resolutions. For that reason, we recommend images at around 940 pixels wide by 700 high to ensure that the majority of displays can view them (natively) without scaling.

Step three: Save images

When done, save the images to the "fs" folder you created in Step One and name the files with the same file name as their counterparts in the "lg" folder used by your album. For example, if you had a large slideshow image at "yoursite.com/slideshow/gallery/album1/lg/image1.jpg", save the full screen version to the "fs" folder on your desktop as "image1.jpg".

Step four: Upload fs folder

When you've finished creating full screen versions of each "lg" image, upload the "fs" folder to root of the "album1" directory on your site (so it's alongside "lg"). For example, "http://yoursite.com/slideshow/gallery/album1/fs".

Step five: Edit XML

Download the "images.xml" file from "http://yoursite.com/slideshow/" or remotely edit it through your FTP client. Inside the album element, add a fspath attribute that points to where the "fs" folder is we uploaded. For example:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
   <album lgpath="http://yoursite.com/slideshow/gallery/album1/lg/" fspath="http://yoursite.com/slideshow/gallery/album1/fs/">
      <img src="image1.jpg" />
   </album>
</gallery>

Or if you're using absolute paths for your content, add an "fs" attribute to each img element, like so:

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
   <album>
      <img src="http://yoursite.com/slideshow/gallery/album1/lg/image1.jpg" 
         fs="http://yoursite.com/slideshow/gallery/album1/fs/image1.jpg" />
   </album>
</gallery>

When finished, save the XML file. Remember to upload it to your site if editing locally.

Step six: Allow full screen mode

If using SlideShowPro Player for Flash, to test your full screen images we need to change the default HTML template Flash uses when previewing movies. To do that, open File > Publish Settings in Flash and click on the "HTML" tab. Select "Flash Only - Allow Full Screen" from the "Template" menu. When finished click OK.

If using SlideShowPro Player SWF, and you are embedding your SWF using SWFObject (recommended), enable full screen mode as a player parameter, like so:

var params = { 
   bgcolor: "#000000",   
   allowfullscreen: "true"
}

Step seven: Publish or load

Publish an HTML document from Flash, or refresh your HTML document embedding SlideShowPro Player SWF. Click the SlideShowPro Player's full screen button in the navigation and you should see your alternate full screen content.