Slide show widget

Question

Hi
I do occassional updating for a rape crisis center. I know a little html and some css and am using CS4. I need to make a three picture slide show quickly and do not do flash. Are there any easy to learn widgets in CS4 or does anyone know a second party widget that I can embed easily?
Many thanks,
Nancy

Answer 1

Oh heck, he's off on a wild goose chase of a widget that does not work in all versions of Dreamweaver.
Here is what I have been doing for two years:
Tobia Conforto's Cross Slide.
Now, what you are going to be using is JavaScript and jQuery. Tobia places a link to the minified version of jQuery on the website. Download that and place it into a js folder in your website. You may use your operating system to do this. Additionally, he has his Cross-Slide minified jQuery plugin downloadable there as well. That also goes in your js folder in the website. That folder must be uploaded to your server with all of the files in it.
Now, you're going to do three pictures. I generally put them into banners in my websites, but you can put them anywhere. You must define either a Class or an ID for where you are going to place those pictures in CSS:
#slide {
          height: 157px;
          background-image: url("../images/picture01.jpg");
Place the first picture you will have in your slide show into the background of that div as I have just done in my example above.
Now, you're ready to go to work. Make each image the same size and place the following in the head area of your web page:
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.cross-slide.min.js"></script>
<script type="text/javascript">
$(function() {
          $('#slide').crossSlide({
                    sleep: 2,
                    fade: 1
                    { src: 'images/picture01.jpg' },
                    { src: 'images/picture02.jpg' },
                    { src: 'images/picture03.jpg' }
</script>
Please understand that, in my example above I am calling version 1.4.2 of jQuery -- they may be out with a newer version and the "min" stands for the "minified" version. It downloads faster in a browser.
The JavaScript above should fit nicely just above the close of your head area. Make sure that the last curly brace for your last image does not have a comma after it. Microsoft's Internet Exploder will not show you the slide show if you forget that.
Now, in your HTML, do this:
<div id="slide"> <!-- slide show goes here -->
</div>
Please notice I have used an ID and not a Class here because I don't place slide shows in multiple places on my pages. I think one's enough.
You can see this working right now on several of my websites
http://christinokitchens.com/
http://www.unitedstatesvending.net/
http://www.clarkelandscapes.com/
http://jwatts.com/
This method absolutely works. You can look at my code in each of the above websites and copy it. In each case, I'm making a header that provides the visitor with a slide show. I tend to name the ID differently for each because it really depends on what I'm thinking about at the time.
But this will get you done and operational with a minumum of fuss.
It is possible that Dreamweaver CS5.5 automates this kind of a thing, but I am still doing it manually because I learned this code while working with CS3.