Adding a Colorbox jQuery slideshow in Dreamweaver

by James Cook on March 20, 2011


Click logo above to play video…

Clarifications:

1. Colorbox may not preview correctly in Live View in some versions of Dreamweaver. In that case use Preview in Browser instead. It should dispaly correctly in all browsers.

2. Colorbox comes with five example files which demonstrate various appearance settings. In step 2 below, choose the example file you wish to mimic and copy the colorbox.css and images folder from that example.

3. Each color box example demostrates a variety of settings (Elastic Transition, Fade Transition, etc.). These correspond to the rel="exampleX" attribute you add your link in step 10 below. Here is a list of the possible rel attributes and the corresponding Colorbox effect:

  • example1: elastic transition (popup smoothly transitions to match size of image)
  • example2: fade transition between image
  • example3: no transition with container set to 75% of screen size
  • example4: auto playing slide show
  • additional examples are available for non-image content but that is beyond the scope of this tutorial.

Summary of the video:

Before you begin: Download the Colorbox zip file at http://colorpowered.com/colorbox/. When the file is unzipped, it will create a colorbox folder containing the following folders:

  • colorbox
  • colorbox.ai
  • content
  • example1
  • example2
  • example3
  • example4
  • example5

Plus the files colorbox.ai and README.

  1. In Windows or the Mac Finder (not Dreamweaver) locate your local site folder and create a new folder colorbox inside it.
  2. Copy the following downloaded files into the new colorbox folder in your website that you created in step 1:
    • From the colorbox folder:
      jquery.colorbox-min.js
    • From the exampleX folder (X is the example you are trying to emulate):
      colorbox.css
      the complete images folder
  3. In Dreamweaver, create and save the file that will contain your Colorbox slide show (I called mine colorbox.html).
  4. Create a folder (I called mine slides) in your local site  to hold the images for your slide show and place your web-formatted images in it.
  5. In the code, in the <head> of your of your document: In the Insert palette, click the script icon and insert the link to the jQuery file hosted by Google at:
  6. In the code, in the <head> of your of your document immediately following the script tag you inserted above: In the Insert palette, click and link to the jquery.colorbox-min.js file.
  7. In the CSS Styles palette, click the Attach Style Sheet (link) icon and link to the colorbox.css file.
  8. Cut and paste the javascript code below into the <head> of your document BELOW the scripts added above (Colorbox will not function properly if the scripts do not appear in the correct order in the code.):
  9. Insert the link(s) to your images.
  10. Add the

    attribute to your links using the Quick Tag Editor (right click on the <a> tag in the status bar). You can use any value (not just example1) but be sure to give each link the same rel attribute so that they are all part of the same slide show.
  11. Give each link a title (which will be used as the caption in Colorbox) by selecting the link and typing the title into the Title field in the properties inspector.
  12. Switch to Live View and test your slide show.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact