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).
This javascript tool, called a slider, uses the jQuery Cycle Plugin. It gives the user a wide range of slider effects such as 'fade', 'shuffle', and 'zoom'; the list goes on.
In this Dreamweaver tutorial, we show you how to quickly implement a slider using the 'fade' effect.
This stuff can be tricky! If you're having trouble and would like some professional assistance give us a call at (541) 912-9300 or contact us.
Contact Us Today!
We begin by creating a new html document in Adobe Dreamweaver or opening an existing Dreamweaver webpage. Next, place the proper javascripts into a folder titled 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 js/ folder. Select one of these two files and click choose. Repeat this process twice more, once to choose the second jQuery file, and finally to place the following code into the "Content" text box of the Script Window. Note that this is the javascript that selects the "fade" function for the slider, we will show you how to change this later in the Dreamweaver Slideshow Tutorial.
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.
jQuery(document).ready(function($) {
$('#slideshow').cycle({ fx: 'fade'});
});
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: 'fadeZoom'.
shufflefadeoutcoveruncovertosswipenonezoomfadeZoomcurtainXcurtainYgrowYgrowXblindZblindYblindXturnUpturnDownturnLeftturnRightslideXslideYscrollUpscrollDownscrollLeftscrollRight
Dreamweaver will not display this javascript slide show in Design View, so it must be tested for proper function in a web browser. When using Live View, Dreamweaver CS5.5 will display all the images that have been placed in the <div> without the slider functionality.