Scroll To Top
Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($95) | FSS Home | Finished Page

Full Screen Slide Show: Using ThumbnailsThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

A Responsive and Adaptive Full Screen Slide Show from PVII

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

See the Finished Page!

1. Download the Finished Page and Images

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.

2. Create your Slide Show

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.

3. Thumbnails

The thumbnails are already set up in the workpage, so once you create your slide show, everything will work perfectly.

3b. Adding Thumbnails

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.

CSS Notes

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.

Batch Processing Images in Fireworks

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.

Give us your Feedback

Let us know what you think of the page (see finished page) and how useful you find it, by posting on our Forum:

Go to the PVII Forum