permaculture@lists.ibiblio.org

Subject: permaculture

List archive

Re: [permaculture] image scroller script

From: "Lawrence F. London, Jr." <lflj@intrex.net>
To: permaculture <permaculture@lists.ibiblio.org>
Subject: Re: [permaculture] image scroller script
Date: Tue, 07 Aug 2007 21:35:57 -0400

Keith Johnson wrote:

I'd like to insert an image scroller on a web page.

Can someone recommend, or provide, a simple script or software for this function?

Dynamic Web Coding (dyn-web)
http://www.dyn-web.com/dhtml/slide-shows.html
Javascript Random Image Rotation
http://www.dyn-web.com/javascript/rotate-img/rotate-rand.html

Instructions

Setup for the random image rotator is very simple. Place script tags for the two external JavaScript files (total file size: only 6.7k) in the head of the document:

<script src="js/dw_rotator.js" type="text/javascript"></script>
<script src="js/dw_random.js" type="text/javascript"></script>

Include a call to the dw_Rotator.start function in the body onload event
handler attribute:

<body onload="dw_Rotator.start()">

Place a script segment where you wish your rotating images to appear. For non-linked image rotation, the following statements would be included:

<script type="text/javascript">
// rotation speed, path to images
var rotator1 = new dw_RandRotator(4000, "images/");
var imgList = ["img1.gif", "img2.gif", more images ...];
// images array, width and height of images, transition filter (boolean)
rotator1.setUpImage(imgList , 150, 150, true);
</script>

You can also include a noscript segment there for non-JavaScript enabled browsers if you like. View the source code of example documents to see this demonstrated.

For linked random rotating images, a few additional arguments need to be
passed to the dw_RandRotator constructor:

// rotation speed, path to images, linked (boolean),
// mouse events (boolean), optional target window name
var rotator1 = new dw_RandRotator(4000, "images/", true, true);

If you pass the final argument, target window name, clicking on the images will result in the URL's you specify being opened in a new window.

For linked images, you also need to include a call to the addActions method in the script segment. Actions can be URL's, function pointers or functions:

rotator1.addActions("index.html", // a URL
fnName, // a function pointer
function() { [statements ...] }, // anonymous function
"random.html"); // a URL

View the various example documents' source code to see these options
demonstrated.

A download file is available which includes all the necessary code and
example documents.

Please read dyn-web's Terms of Use if you plan to use our code. See Licensing
Information.
--
Lawrence F. London, Jr.
lflj@intrex.net
lfljvfarm@gmail.com
Venaura Farm http://venaurafarm.blogspot.com/
Market Farming & Permaculture
http://www.ibiblio.org/ecolandtech/market-farming
http://www.ibiblio.org/ecolandtech/cgi-bin/wiki.pl?PermacultureWiki
http://www.ibiblio.org/ecolandtech/cgi-bin/wiki.pl?SoilWiki

[permaculture] image scroller script, Keith Johnson, 08/07/2007
- Re: [permaculture] image scroller script, Lawrence F. London, Jr., 08/07/2007