Buy Now ($95) | FSS Home | Finished Page
We showcase a beautifull page with a slide show launched from thumbnail images. You can download the page and use it for your own projects. It comes with fully commented CSS. All you need is a copy of Full Screen Slide Show!
Note: This tutorial requires version FSS 1.2.4. This update was released 13-Jan-2015
The download folder contains a work page and a folder of images. Download now...
Unzip the folder to a folder within your local defined Dreamweaver site and open the workpage.htm file.
Switch to Code View and locate the masthead DIV:
<body>
<div class="masthead"> <img src="/products/galleries/fss/tutorials/thumb-drive/finished/pictures/logo.png" alt=""></div>
Make a new line between the opening body tag and the masthead. Place your cursor on the blank line and open the FSS interface.
Create your slide show.
Use the images in the pics folder we provided inside the download zip.
The thumbnails are already set up in the workpage, so once you create your slide show, everything will work perfectly.
The thumbnails are inside a styled unordered list. To add a thumb, locate the thumbs list code in Code View:
<ul class="thumbs">
<li><a onclick="P7_FSSctrl('p7FSS_1',1)" href="#"><img src="../pics/thumbs/pic-01.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',2)" href="#"><img src="../pics/thumbs/pic-02.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',3)" href="#"><img src="../pics/thumbs/pic-03.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',4)" href="#"><img src="../pics/thumbs/pic-04.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',5)" href="#"><img src="../pics/thumbs/pic-05.jpg" alt=""></a></li>
</ul>
If, for example, you wanted to add a sixth image, add a new LI element:
<ul class="thumbs">
<li><a onclick="P7_FSSctrl('p7FSS_1',1)" href="#"><img src="../pics/thumbs/pic-01.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',2)" href="#"><img src="../pics/thumbs/pic-02.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',3)" href="#"><img src="../pics/thumbs/pic-03.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',4)" href="#"><img src="../pics/thumbs/pic-04.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',5)" href="#"><img src="../pics/thumbs/pic-05.jpg" alt=""></a></li>
<li><a onclick="P7_FSSctrl('p7FSS_1',6)" href="#"><img src="../pics/thumbs/pic-06.jpg" alt=""></a></li>
</ul>
Make sure you increment the P7_FSSctrl action to reflect your new image.
All of the custom CSS and the page design CSS is embedded in the <head> of the workpage.htm file. It is fully commented for your review.
Processing will allow you to optimize, size, and generate thumbnails. This lesson will show you how to use the powerful batch processing features in Adobe Fireworks to process your images. Other image editors have batch processing capabilities, but we've found Fireworks to be the easiest to use.
Open Fireworks. When Fireworks opens, choose File > Batch Process.
A browse dialog will open.
Browse to the folder containing your final full-size images.
Click the Add button to add one image at a time or the Add All button to add all images in the folder to the batch process.
Click Next.
The Batch Process window will open.
In the Batch options column, select Scale and click the Add button to add it to the Include in batch column.
In the Scale section, choose Scale to Fit Area. Enter a Max width and Max height value. We used 100 pixels. You can set it to whatever you need to. This means the image will scale within its natural aspect ratio with 100 pixels the upper boundary for both width and height.
Click Next to choose where to save your processed images. They will have the same names as your originals, so make sure you select a different or new folder. We have created a thumbnails folder inside the pics folder. We suggest you use it.
Choose Custom location and when the folder dialog opens, create a new folder called thumbnails inside the folder where you saved your full-size images.
Click the Batch button to start the process.
Let us know what you think of the page (see finished page) and how useful you find it, by posting on our Forum: