Creative DW Image Show PRO

Creating a panoramic image slideshow using Creative DW Imageshow Pro and Dreamweaver

In this tutorial we will make a moving panorama slideshow using Creative DW ImageshowPro and Dreamweaver. We will create movement from static pictures, and adding effects between the pictures. Most tourism or presentation sites could use a slideshow to showcase pictures and that's so easy to create!

 

The result

First, let's say we already have a website working, and we want to add a slideshow in the content. For this tutorial, we will start from a website template provided by www.justdreamweaver.com

Let's say we want to replace the H2 title and text with a nice slideshow:

And to give you an idea of the slideshow, here it is:

 

Tutorial Start

To make this tutorial you will need Dreamweaver (8, CS3 or CS4), the Creative DW ImageShowPro extension from the Extend Studio site and a set of pictures. You can download a free trial from here and all you need to do is to install it using the Adobe Extension Manager that comes with Dreamweaver. To locate the extension in Dreamweaver follow this link.

• Open the mainpage.html (if you are using the template provided by JustDreamweaver) or your own HTML Page
• Click on the page where you want to apply the slideshow (in my case, I have deleted the h2 title and the content below and clicked in the empty space created)
• Go to the ImageShow Pro tab and click on Insert New Image Show Pro button

  

• This will open the Image Show Pro Dreamweaver interface, were we should make the settings for the Slideshow.



• Now, the images I'm using for the slideshow are 500px wide and height is around 330px. In order to create the panoramic movement from the pictures, you should set the width to be equal or less the image size, so instead of the default 450x450 let put 350px wide and 340 px height:



• Next step is to upload pictures. TIP: for fast slideshow loading times, you should open the pictures in Photoshop and "Save them for the Web" To upload pictures, click on the "Insert item" button.

  

• Let's set the slideshow to loop. Click on the checkbox.

  

 

Creating the Slideshow effects

At this point you have uploaded the pictures and we can play with the effects. In the Slide effect area you can set the transition between images, set the panoramic motion speed and the panorama direction.

• Set the slide effects to fade (In and Out effects) and Slide delay to 100 (you can play with de delay as you wish depending on the pictures).

  

• Next step is to set the mottion settings from the Slide effects area.

  

• Let's put the start position to right and the end position to left. This will create an horizontal movement from the still images. Click OK.

  

• We're done on this tab. Settings should look something like this:

  

• You should apply the settings to all slides.

  

 

Theme settings

In the Theme Tab you can play with the environment in which the slideshow is played. As the slideshow should integrate in the design, let's just add a border to the slideshow area (see the Shape Enhancements area) and click on the preloader checkbox (a preloader will show before loading the slideshow in case the visitor has a slower connection)

Click Ok and press F12 - should open a browser to view the page with the slideshow. If you like the result, all you need to do is to copy the edited file to the server and the "includes folder" that Creative DW ImageShow Pro creates.

Happy coding!