Back to Top
The nuts and bolts for
Creative web development

Linked Slide Show

Linked Slide Show can be used to create image slide shows, with the option to add hyperlinks and descriptions to the slides.

 

 

Features:

  • specify the images to be used in the slide show and their display order;
  • the slide show will preload the next/previous slide image while the current slide is visible;
  • images can have different sizes;
  • specify the pause between slides;
  • optionally add a hyperlink to any image within the slideshow;
  • optionally add a text description beneath any image within the slideshow;
  • possibility to use navigation controls (e.g. text links or images) to move to the next/previous slide;
  • possibility to jump to a specific slide;
  • possibility to let the slide show auto-play;
  • NEW: specify any DIV, SPAN, P, TD, H1, H2, H3, H4, H5, or H6 element with unique ID as containing element for slideshow.

Linked Slide Show is tested to be compatible with:

  • on PC: IE5+, Netscape 4.7x (only with absolute positioned DIV element as container), Netscape 7+, Mozilla 1.4, and Opera 7+;
  • on Mac: Safari 1.2.1, IE 5.2.3, Netscape 4.77 (only with absolute positioned DIV element as container), Netscape 7.1, and Mozilla 1.6.

Overview

Questions? Read the FAQ first.

UI Access

Initialise the slide show:

  1. Specify a unique ID for some DIV, SPAN, P, TD, H1, H2, H3, H4, H5, or H6 element on your page so that it can serve as the containing element for the slideshow. The entire content of this element will be rewritten dynamically for each slide.
  2. Select the BODY tag.
  3. Apply the 'Linked Slide Show - Init' behavior from the 'FlevOOware | Linked Slide Show' flyout in the Behaviors panel to the onLoad event.

Show the next/previous slide:

  1. Select the 'next/previous slide' trigger (e.g. an image or a text link).
  2. Apply the 'Linked Slide Show - Play' behavior from the 'FlevOOware | Linked Slide Show' flyout in the Behaviors panel.

Stop an auto-playing slide show:

  1. Select the 'stop slide show' trigger (e.g. an image or a text link).
  2. Apply the 'Linked Slide Show - Stop' behavior from the 'FlevOOware | Linked Slide Show' flyout in the Behaviors panel.

Features

Online Demo: External link


Requirements

Type: Behavior
Product: Dreamweaver 4, Dreamweaver MX, Dreamweaver 4.01, Dreamweaver MX 2004, Dreamweaver 7


Marja Ribbers-de Vroed

Marja Ribbers-de VroedWell, what's there to tell?

I worked as a software engineer for a well-known Dutch software company for about 10 years. But then I decided I did not want to work there anymore.
Since then, I've been working with my husband in our own company.

I "discovered" web development early 2000, and I soon found out that I could actually create my own extra (DHTML) features in Dreamweaver by building custom extensions.
My first extension was Cross-browser AutoScroller, but I've developed several other ones since then.

See All Postings From Marja Ribbers-de Vroed >>

Share this Article

Reviews

Linked Slide Show by Marja Ribbers-de Vroed

I find this extension very useful and quite easy to use.
I have been playing around with it and amazingly it responded to all my requirements.
I have a suggestion here, it's specifically for new users to Dreamweaver. I think the images will help them understand it more. In a nutshell this is what I did:

  1. sign up on dmxzone.com in order to download the  flevLinkedShow110 extension.
  2. Downloaded the flevLinkedShow110 extension.
  3. Open my Dreamweaver
  4. Go to Commands > Manage Extensions
  5. Click on the Install extension icon then browse for the extension
  6. This window below: shows that your installation is successful and request that you restart Dreamweaver.
  7. Restart Dreamweaver then create a Div and click inside it, i.e where you will have your image
  8. Now go to Windows and select Behaviour, you will see it on your Panel groups
  9. On the Behaviours tab click on Add Behaviour > FlavOOware > Link Slide Show and choose your requirement.


    I chose Linked Slide Show Init



  10. Add your images for the slide show, create the links etc and do your necessary settings then save your file and preview. Done !!!

    Simple right.



I think this will help. Thanks

I am Ousjah from The Gambia in West Africa working at www.pristineconsulting.com
can link me up ojah@pristineconsulting.com

help

Easy question..how do I specify where I want the slide show to go? I can't get it to go where I want! I know it says I can specify any DIV, but I'm not doing it right Thanks

A little trouble here