SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    0 Post(s)
    0 Thread(s)

    Create, Install a Flash Player Slide Show

    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.


  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    460 Post(s)
    8 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Dec 2009
    0 Post(s)
    0 Thread(s)
    Thanks Paul . . .

    Here is what I've found so far from:

    Animated JavaScript Slideshow – 5KB - Web Development Blog

    <ul id="slideshow">
            <h3>Image One</h3>
            <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>
            <h3>Image Two</h3>
            <p>Text descriptions of the picture go here and are editable. IMAGE-TWO</p>
            <img src="thumbnails/image-two.jpg" alt="Image Two" />
    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(){
    4  slideshow.speed=5;
    7  slideshow.thumbs="slider";
    8  slideshow.left="slideleft";
    9  slideshow.right="slideright";
    10 slideshow.scrollSpeed=4;
    11 slideshow.spacing=5;
    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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts