Create, Install a Flash Player Slide Show

Content
1

I wish to create an Adobe flash player slide show (VERY BASIC) in my web page. (I do have Dreamweaver CS4)

I’m looking for a 470x250 pixel size as that is the size of my pictures.

How do I position the slide show in my html page using an external CSS page?

I’m a neophyte!

Thanks much.

Rick

2

Hi Rick,

You are better off using JavaScript for that. There are lots of nice looking, free slideshows out there, and a JS slideshow will work on more devices.

Anyhow, it will all go inside a div of some kind, so you position that on your page like any ohter element: give it a width and height and position to suit.

If you provide an example of what you’d like the gallery to look like, we can offer some suggestions of where to get a script.

3

Thanks Paul . . .

Here is what I’ve found so far from:

Animated JavaScript Slideshow – 5KB - Web Development Blog


<ul id="slideshow">
    <li>
        <h3>Image One</h3>
        <span>photos/image-one.jpg</span>
        <p>Text descriptions of the picture go here and are editable. IMAGE-ONE</p>
        <a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
    </li>
    <li>
        <h3>Image Two</h3>
        <span>photos/image-two.jpg</span>
        <p>Text descriptions of the picture go here and are editable. IMAGE-TWO</p>
        <img src="thumbnails/image-two.jpg" alt="Image Two" />
    </li>
</ul>

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image.

Auto Slideshow

auto = boolean; (false)
speed = int; (10)

Information Dialog

info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)

Thumbnail Slider

thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider

Here is an example calling the script…




1  var slideshow=new TINY.slideshow("slideshow");
2  window.onload=function(){
3  slideshow.auto=true;
4  slideshow.speed=5;
5  slideshow.link="linkhover";
6  slideshow.info="information";
7  slideshow.thumbs="slider";
8  slideshow.left="slideleft";
9  slideshow.right="slideright";
10 slideshow.scrollSpeed=4;
11 slideshow.spacing=5;
12 slideshow.active="#fff";
13 slideshow.init('slideshow','image','imgprev','imgnext','imglink');
}

The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder).

I can replace the <h3> for any title that I like - correct?

<span>photos/image-one.jpg</span> Not sure what goes here?

<a href=“#”><img src=“thumbnails/image-one.jpg” alt=“Image One” />

I don’t understand this sentence. What goes where the “#” is?

Is it this: <img src=“css/images/cdm_sfr.gif” or is it a URL which doesn’t make sense to me as each picture is in the images folder not a separate URL site page.

I will have approximately 20 slide show pictures per page. that’s a lot of html code. No problem?

Thanks . . . Rick