• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(406) 662-1123

Dreamweaver Tutorial: Add a jQuery Slideshow using Dreamweaver


Written by Gabriel on April 10, 2012

Learn How to Add Slide Shows to Adobe Dreamweaver CS5.5 Websites

Dreamweaver jQuery Slider placekitten-1Dreamweaver jQuery Slider placekitten-2

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.

Step 1: Configuring Dreamweaver for a jQuery Slider

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.

dreamweaver-insert-script-window

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'});
});

Step 2: Insert the Slideshow Content into the Dreamweaver Webpage

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!

Changing Slideshow Effects for an Adobe Dreamweaver CS5.5 Webpage

dreamweaver-head-content-script-icon

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.

dreamweaver-properties-edit-script

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'.

  • shuffle
  • fadeout
  • cover
  • uncover
  • toss
  • wipe
  • none
  • zoom
  • fadeZoom
  • curtainX
  • curtainY
  • growY
  • growX
  • blindZ
  • blindY
  • blindX
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • slideX
  • slideY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
Dreamweaver jQuery Slider placekitten-3Dreamweaver jQuery Slider placekitten-4

A Note About Testing the jQuery Slider in Adobe Dreamweaver CS5.5

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.

Posted in Adobe Dreamweaver jQuery

113 Comments to Dreamweaver Tutorial: Add a jQuery Slideshow using Dreamweaver

  1. August 12, 2014 at 1:33 pm | Permalink

    I have created a page ad it works well in testing. Thank you for your instructions. I would like the slideshow to be centered. Where do i make this correction?

    Thank you

  2. Tonya's Gravatar Tonya
    August 15, 2014 at 9:58 am | Permalink

    Hi, I am using CS4 but don’t see this option as notated in your instructions “After clicking into the Head Content Panel, go to the Insert Panel > Common to choose “Script > Script” and browse to your js/ folder.”

    Any help is appreciated. Thank you

  3. Tonya's Gravatar Tonya
    August 15, 2014 at 11:20 am | Permalink

    Hi, I don’t see under the Insert menu>Common to choose Script. I see the Insert Menu, but there is no selection available that matches Common>Script.

  4. Tonya's Gravatar Tonya
    August 15, 2014 at 11:25 am | Permalink

    Sorry, please disregard, I found my issue.

  5. Tonya's Gravatar Tonya
    August 15, 2014 at 11:50 am | Permalink

    Sorry, but… now I’m at the Script:Script box just like in your screenshot, but once I select the file, it does not show the content in the ‘content’ area like in your screenshot.

    I tried to go ahead and click ‘OK’ but a message comes up about “…View Visual Aids Invisible Elements is checked” which it is, so I’m stumped.

  6. Pierre's Gravatar Pierre
    August 26, 2014 at 4:10 pm | Permalink

    Hi,
    This tuto looks great, unfortunately I’m ashamed not to be able to make it work.
    Would it be possible to mail, or post the code of the simplest possible html page showing a slideshow for a couple of pictures.
    Thanks, Pierre from Switzerland

  7. Timmie's Gravatar Timmie
    September 9, 2014 at 1:56 pm | Permalink

    Hi there..
    Hope am not too late! 🙂
    I happen to stumble across jquery sliders in a sub menu of Inserts menu, using CS6 DW. Is there a way you can maybe help me with steps to insert a slider using these or are they dumb?
    Thanks.

  8. September 13, 2014 at 3:07 pm | Permalink

    I used this and I am not sure why but why isn’t it working for each of the slideshow boxes it is only working on the first one?
    Do I need to define each one separately or something?

  9. Isabel's Gravatar Isabel
    September 16, 2014 at 8:55 am | Permalink

    Hi. Your tutorial was exactly what i was looking for but sadly it doesn’t work for me. Not sute what I am doing wrong, but the images display as if there was no slider functionality, both in live view AND in the web browser function.

    I have this inside head:

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

    And this inside the body:

    Could you tell me what might be wrong? Also, I would like to make the images be centered and ocupying 80% oh the size of the screen. I must had that to the div, right?

    Thank you

  10. Timmie's Gravatar Timmie
    September 17, 2014 at 11:24 pm | Permalink

    Hello Gabriel,
    Please how do i center an absolute div on my web page? I worked with design view and well it seemed pretty set, even on live view, but when i previewed with Internet explorer, chrome and firefox, my ‘body’ contents (which happens to be hooked inside an AP div) shifted off to one side of the page..
    Thanks.

  11. Prossy's Gravatar Prossy
    September 19, 2014 at 1:55 am | Permalink

    Hello
    I need some help, under h insert panel, I cant seem to find the script. Could you please help me out!

  12. Valerie's Gravatar Valerie
    September 19, 2014 at 4:26 am | Permalink

    Hello Gabriel,

    Thanks for this tutorial. But I still have a problem. The three images in my slider are positioned above eachother in the website, and not on top of eachother. Probably I missed something, but no idea what. Oh and ho do I delete te grey frame around the images?
    Do you have some advice?
    Thanks!

  13. September 20, 2014 at 7:04 am | Permalink

    Hi,

    I am also trying to make a slide show on my homepage but was not able to do it successfully, Everything is messed up when I tried to associate the slideshow on my webpage. Please help.

  14. October 9, 2014 at 10:52 am | Permalink

    Hi and thanks for the script and tutorial, everything works as intended but I have a few questions.

    1. can the speed be altered to a slower pace and how would I do that?
    2. Can the functionality to manually slide pictures be added?

  15. Stefan's Gravatar Stefan
    October 11, 2014 at 9:26 am | Permalink

    Thanks alot worked perfectly.

  16. Brenda's Gravatar Brenda
    November 11, 2014 at 6:50 am | Permalink

    Thank you, thank you!!! Just created a page with slideshow in about 5 minutes using your tutorial. Looks great and exactly what I was looking for.

  17. Chaitanya's Gravatar Chaitanya
    January 4, 2015 at 10:49 pm | Permalink

    It appears I screwed somethings up by not putting the scripts in a js folder to begin; the slide show doesn’t function properly.
    Is there a way to remove the scripts and begin anew?
    Many thanks
    Chai

  18. Mark's Gravatar Mark
    February 2, 2015 at 10:33 pm | Permalink

    In Dreamweaver CC, there is not a “Comment” section in the Script dialog box. It only allows you to browse and select a file. I was able to get the first two files saved and the links in the Head section no problem. But I have no idea what to do with the pasted text from above. Does that also go in the Head section? Do I need to create a file to put the text in? The slider is not functioning with just the first two files.

    Appreciate the help.
    Mark

  19. Ghislaine's Gravatar Ghislaine
    February 12, 2015 at 5:25 am | Permalink

    I tried to download the qjeury plugin but when i click on it it gives me a page with numbers and no download link. Could you help me out? I’m very new with this.

    Thanks,
    Ghislaine

  20. Adrián's Gravatar Adrián
    March 22, 2015 at 9:34 pm | Permalink

    Hello,
    I Have been proving the slideshow and enough good goes, but I would like to know if to facilitate the above mentioned code to me to do a slide as that of this portfolio or similarly.

    http://www.sagmeisterwalsh.com/work/

    Thank you for his attention!

  21. Ian's Gravatar Ian
    May 29, 2015 at 12:11 pm | Permalink

    Will this script work for Dreamweaver CS3?

  22. May 31, 2015 at 9:57 am | Permalink

    Thanks for the tutorial. I have created this page

    http://douglyn.co.uk/Sparrow%20Hawk/tester2.html

    using 2 apDivs which slide in sync. But I can’t get my captions to centre. Any ideas?

    Doug

  23. July 9, 2015 at 9:00 am | Permalink

    Previewed page in major browsers, all good except IE, which piled the images on top of each other. Was getting excited, looks great. Then realized Dreamweaver design view got a bit odd looking too, and changed the page width in cs6…

  24. September 8, 2015 at 12:26 pm | Permalink

    how do i create a slider in my dream waver site and how to make a visitors forum in my dream waver site

  25. Lasse's Gravatar Lasse
    September 10, 2015 at 2:36 am | Permalink

    Tried this on CS6. Dosent work at all.

  26. kyle's Gravatar kyle
    October 1, 2015 at 9:14 am | Permalink

    Hi, I have this working but would like to know how to change the speed of the changes, if I can put circles at the bottom to show which image is being shown for example in a slideshow of 8 or 10. Or any other variable that is available.
    Great page, thanks for the info 🙂

  27. kesh's Gravatar kesh
    October 16, 2015 at 1:05 am | Permalink

    Hey,I can’t download the first of the two files that are on the tutorial any suggestions?

  28. Ken's Gravatar Ken
    February 8, 2016 at 7:39 am | Permalink

    I have used this and it works great. I was even able to add links to each slide with no problem.

    The question I do gave we need 4 slide shows on the same page, and is not working for me. I have tried entering 2 DIV(s) with different names and the 2nd one shows after the first and will not change slides rather they show individually, can you shed some light on this.

    the url is: allprodisplays.com/2016beta2shows.html

    Thank you.

  29. Ken's Gravatar Ken
    February 9, 2016 at 12:56 pm | Permalink

    Hi Gabriel, thank you for such a quick response, I’ll try removing the second set of scripts that are in the Head.

  30. Jermaine's Gravatar Jermaine
    February 20, 2016 at 2:26 pm | Permalink

    I can’t get the Head Check to become available. It’s grayed out…Am I supposed to click somewhere, before I go to View…then Check Head..etc. I can’t get to step 2.

  31. Anna's Gravatar Anna
    March 5, 2016 at 7:15 am | Permalink

    Help me

    I have done everything from tutorial, but it doesn’t working. I am working in Dreamveawer.

    my files:
    https://drive.google.com/open?id=0BzlOSP2KSvCgYXdrNDdiQ2NMZkE

  32. Ken's Gravatar Ken
    March 15, 2016 at 10:01 am | Permalink

    Hi Gabriel,
    I had contacted you back in February your answer was perfect.
    I have been busy with trade show designs for clients and had to set the web aside. I had time over the weekend to apply your fix and it worked like a charm.
    Just in case you would like to see it below is a link, it contains 1 different slider at the top and 4 different shows in the main body.
    Thank you again for your fantastic help.
    Ken

    http://www.allprodisplays.com/

  33. April 5, 2016 at 2:20 pm | Permalink

    I attempted to remove a slideshow, but now when you go to the the page you get “Error: DIV with ID “fadeshow1” not found on page.

    I am a total amateur and inherited this Dreamweaver site. Any idea what I am missing?

  34. Beth's Gravatar Beth
    April 22, 2016 at 4:19 am | Permalink

    Can you please help me – I am getting desperate. I have been trying for weeks to get a slide show to work in my dreamweaver 5.5 pages and I found your tutorial on adding a jquery slider and thought it would solve my problem, but I can’t get it to work after may hours of trying. I am use to using flash for slideshows, but I understand that no longer works. I think I did everything correctly but all the pictures appear on the page at once and fade in and out at the same time. I found this really hard to follow and found what you were describing in the tutorial difficult to match up on the dreamweaver page. Is my code in the wrong section (body instead of head)? Please see below. I appreciate any help you can give me.

    Untitled Document

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

  35. Marjorie's Gravatar Marjorie
    May 20, 2016 at 4:05 pm | Permalink

    Gabriel, I can’t access the downloads via the links you provided. When I click on the links files open up with lots of code, but I don’t know how to proceed from there. Mac OSX 10.6.8, Dreamweaver CS5.5

    Thx.

  36. Marjorie's Gravatar Marjorie
    May 20, 2016 at 4:39 pm | Permalink

    I did a bit of searching and found these files which I placed in the “js” folder. I inserted all 4 of the .js files from both those folders after the tag. So far nothing shows up.

    Files:
    jquery-1.12.4.min
    jquery.cycle (folder)

    This is what my code looks like:

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

    North Shore United Methodist Church
    re

  37. Marjorie's Gravatar Marjorie
    May 20, 2016 at 4:40 pm | Permalink

    Correction to code below

    I did a bit of searching and found these files which I placed in the “js” folder. I inserted all 4 of the .js files from both those folders after the tag. So far nothing shows up.

    Files:
    jquery-1.12.4.min
    jquery.cycle (folder)

    This is what my code looks like:

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

    North Shore United Methodist Church
    re

  38. Marjorie's Gravatar Marjorie
    May 20, 2016 at 4:41 pm | Permalink

    Aargh! It’s not coming up like I have pasted it. This is 3rd try. SORRY!

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

    North Shore United Methodist Church
    re

  39. May 31, 2016 at 12:43 pm | Permalink

    Hey,

    I am trying to follow your tutorial but I am having trouble because the directions that you are giving I think are not necessarily helpful for the latest version of Dreamweaver CC 2015. There was no Insert Panel > Common option or View > Head Content. Anyway, here’s what I have in my code:

    PRODUCTS

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({fx: ‘fade’});
    });

    This is just the content and then I added a div with three images. The images are showing up but there’s no slideshow effect. What am I missing?

  40. June 1, 2016 at 5:25 pm | Permalink

    You really make it seem so easy with your presentation but I find
    this matter to be really something that I think I would never understand.
    It seems too complex and very broad for me. I am looking forward for
    your next post, I will try to get the hang of it!

  41. July 10, 2016 at 5:15 am | Permalink

    why am i getting normal images not a slideshow ?i have previewed in the 3 browsers but i cant see the slideshow

  42. Mel's Gravatar Mel
    July 22, 2016 at 1:16 pm | Permalink

    I’m having the same issue as “solli” ^^^^

    I am getting just regular pictures, no slideshow. 🙁 Help!

  43. July 24, 2016 at 8:38 am | Permalink

    I don’t know you would be available now or not, but really need help on this. I followed the first step as you mentioned. But when adding the images in the div with Id slideshow, they are not responding at all. Help my please.

  44. September 20, 2016 at 3:14 pm | Permalink

    Gabriel,

    I loved this tutorial and successfully got a slideshow embedded in my website. Now I would like to be able to add simple navigation arrows so that if someone wants to go back or forward they can. Any help?

    Thank you!

  45. November 7, 2016 at 1:59 pm | Permalink

    Sent you an email with the code I am working with… I am getting the 3 images and no slideshow..

  46. fguerrag's Gravatar fguerrag
    November 24, 2016 at 7:15 am | Permalink

    I’m testing your code…. and I think I’m doing some thing wrong…. the browser show the two images I´ve included inside in the div label at the same time… I mean.. without slide efecto… I can´t give you the link of my website becouse is in a intranet but the code is this:

    Documento sin título

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

    What is wrong?…. thanks in advance.

  47. fguerrag's Gravatar fguerrag
    November 24, 2016 at 7:16 am | Permalink

    Documento sin título

    jQuery(document).ready(function($) {
    $(‘#slideshow’).cycle({ fx: ‘fade’});
    });

  48. Craig Young's Gravatar Craig Young
    January 12, 2017 at 1:50 pm | Permalink

    I have tried you tutorial however when I test the page in internet explorer it just shows the two images in my slideshow on top of each other with no fade or slideshow

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients


Downwind

Gecko Designs

Take the first step


Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!


Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802


Phone:
(406) 662-1123