April 10, 2012
We get requests daily from clients who want a slide show on their Dreamweaver webpages. Displaying a slide show is very useful for Adobe Dreamweaver websites needing to display promotions (or maybe just kittens).
In this Dreamweaver tutorial, we show you how to quickly implement a slider using the 'fade' effect.
js. Create this new folder within the root directory of your Dreamweaver Site, then download these two files and place them in the folder: (click right to save as)
Return to your Dreamweaver html document, select the menu "View" and check "Head Content" by clicking it if unchecked. Place your cursor on the Head Content panel (immediately above the Design View). After clicking into the Head Content Panel, go to the Insert Panel > Common to choose "Script > Script" and browse to your
Note: if you do not place your cursor into the Head Content Panel, Dreamweaver will place the script will into the
<body> section of your html webpage, this will prevent your jQuery slider from functioning.
You are now ready to add the content for your new Dreamweaver slider. This is done by placing your cursor where you want the slider, choose Insert > Div and set the ID to
slideshow. With your cursor placed inside of this div, insert the images that will be displayed by the slider in the order you desire.
That's all there is to adding a jQuery slider to an Adobe Dreamweaver CS5.5 webpage!
jQuery's slider script,
jquery.cycle.all.js, that we use in this Dreamweaver slideshow tutorial, has a wide range of slide change effects. The way to change slide effects is in the 4 lines of script code that are shown above. On the third line, change the word fade to one of the following, remember to only edit between the two apostrophes. In order to edit the code that was inserted into the
<head> using Dreamweaver, check View > Head Content. Looking at the Head Content Panel, you will now see the three scripts that were inserted represented each by a script icon.
Click on the third of these icons then select the Edit button at the bottom of your screen in the Properties Panel. This will open the Script Properties window where you can view and edit the four lines of script code. Select the word
'fade' at the end of line three, and replace it with one of the effects listed below; example:
<div> without the slider functionality.