JavaScript Slideshows
JavaScript slideshows are a great way of adding spice to your static webpages. There are dozens (hundreds?) of different slideshow solutions available on the web. We will now explore two of them.
Ultimate Fade-in slideshow
This slideshow solution supports captioning and linking as well as additional modifications to adjust slideshow behavior (speed, randomness etc.). This image slideshow, including instructions for use and file downloads can be found at:
In Dreamweaver
- Create a new folder inside your 'site-javascript' folder called 'ultimate'
In Firefox
- Navigate to the link above
- Download the fadeslideshow.js offered on the page to the ‘site-javascript/ultimate folder
- Copy the large chunk of code which you are told must to inserted into the your page <head>In Dreamweaver
In Dreamweaver
- Open slideshow.html
- Switch to Code View
- Make room the <head> section to add the copied code
- Paste the code into the <head> section
Clean-up what you pasted
- Carefully delete the second slideshow - we only need 1
- Modify the fadeslideshow.js link to read:
src="site-javascript/ultimate/fadeslideshow.js"> - Remove the empty lines in the head section
In Firefox
- Navigate to the link above
- Find and copy <div id="fadeshow1"></div>
In Dreamweaver
- Switch to Design View
- Select the page left image that reads
"Slideshow will appear HERE" - Switch to Code View
- Delete both the image and the <div> that surrounds it
- Paste <div id="fadeshow1"></div> in its place
- Save your file
- Refresh your Firefox page
Time permitting
- Modify or delete slideshow links
- Modify or delete slideshow captions
- Replace slideshow images (408x306)
- Modify slideshow behaviors
- Create a CSS rule to control <div id="fadeshow1"></div>
jQuery Cycle Slideshow
Wow...an amazingly easy slideshow to set up with tons of interesting display options. We will also take advantage of the 'example' file provided in the product download. This image slideshow, including instructions for use and file downloads can be found at:
In Adobe Bridge
- Select cycle-1.psd, cycle-2.psd, cycle-3.psd and cycle-4.psd
- From the Menu Bar, go to Tools > Photoshop > Image Processor
- Select JGEG as the only file type to be processed
- Set the quality to 6
- Set the width to 408 - height to 306
- Choose to Save in same location - hit Run
- Open the newly created JPEG folder
- Select the 4 processed images
- Right-click and choose Move to > Choose folder
- Move the 4 images to the 'site-media' folder
In Dreamweaver
- Working in Design View
- Select the page right image which reads
"Slideshow will appear HERE"
- Replace the image with cycle-1.jpg from the 'site-media' folder
- Open the following file: site-javascipt/jquery-cycle/example.html
- In example.html, switch to Code View
- In the <head> section, copy the link to jquery.min.js
- Switch back to slideshow.html
- Switch to Code View
- Make room the <head> section to add the copied link
- Paste the copied link
- Make room the <head> section to add a link to an external .js file
- From the Menu Bar, Insert > HTML > Script Objects > Script
- Link to the external .js file:
site-javascript/jquery-cycle/jquery.cycle.all.min
- Switch back to example.html
- Working in Code View
- Copy the third, multi-line <script>
- Switch back to slideshow.html
- Working in Code View
- Make room the <head> section to add the copied code
- Paste the copied code
- Switch back to Design View
- Select the page right image (cycle-1.jpg)
- Switch back to Code View
- Change the <div> surrounding cycle-1.jpg from:
class="img-box" to class="slideshow"
- Copy the image code
- Paste the image code three times to support a total of four images
- Change the three pasted image names to cycle-2, cycle-3 and cycle-4
- Save your file
- Refresh your Firefox page
Time permitting
- Modify slideshow style
- Create a CSS rule to control <div class="slideshow"></div>