[DHTML] Swiss Army Interactive Image slide show

[jscheuer1]

1) CODE TITLE: Swiss Army Interactive Image slide show

2) AUTHOR NAME/NOTES: An update by jscheuer1

3) DESCRIPTION: This is realy just an OO update to:

Interactive image slideshow with text description

But, it has many more options:

Top or bottom controls
Starts running or stopped or in a manual only mode
Easily adapts to images instead of buttons for controls
Descriptions and image counts are optional
Optionally linked with optional global and/or individual targets per show's links, as well as optional global and/or individual specifications for new windows.
Optional mouse over pause
Can graceful accommodate differing image sizes if optional width and/or height settings are configured properly to largest width and/or height of images. (this option isn't completely graceful in IE with the IE fade option for some reason, hopefully this can be overcome)
It can Fade in IE 6+

A simple two parameter call:

new inter_slide(image_array_name, interval)

on the page will place a show there. All other options have defaults, so may be skipped. The demo has three shows on it. The first is with the defaults + IE fading only. The other two show off most of the rest of the options.

4) URL TO CODE:

http://home.comcast.net/~jscheuer1/s...opcity_hvr.htm

[ddadmin]

Ooh now this looks nice! I was going to rewrite the Interactive image slideshow very soon due to it being completely outdated, but I guess there's no point now.

Looking at the script, I can see how some of the exposed properties may be a little confusing to newbies, ie:

slides2.desc_prefix='<b>Description:<\/b> '; //string prefix for image descriptions display
slides2.controls_top=1; //use for top controls
slides2.counter=1; //use to show image count
slides2.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=1; //use for descriptions as images alt attributes
slides2.use_title=1; //use for descriptions as images title attributes

Can you briefly describe those that may not be immediately apparent to people that I can post on the script page?

Thanks!

[jscheuer1]

Well, the:

slides#.

part is just assigning a property to the array object of a particular slideshow. None of them are required. The properties are all commented as to what they do, except for these two:

//Notes: slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present

which are described at the end of the configuration area in the above quoted note.

I'm not sure if I can get much clearer than that. Here I've put them all together:

desc_prefix='<b>Description:<\/b> ' //string prefix for image descriptions display
controls_top=1 //use for top controls
counter=1 //use to show image count
width=140 //use to set width of widest image if dimensions vary, may also be set in the call as the 2nd parameter
height=225 //use to set height of tallest image if dimensions vary, may also be set in the call as the 3rd parameter
no_auto=1 //use to make show completely user operated (no play button, starts in stopped mode)
use_alt=1 //use descriptions as the images' alt attributes
use_title=1 //use descriptions as the images' title attributes
nofade=1 //use for no fade-in, fade-out effect for this show
border=2 //set border width for images (number of pixels)
border_color='lightblue' //set border color for images (string) - use color name or hex value with # prefix
border_style='ridge' //set border style for for images (string) - requires border_color be set
no_descriptions=1 //use for no descriptions displayed for this slide show
pause=1 //use for pause onmouseover
image_controls=1 //use images for controls instead of the default buttons
manual_start=1 //start show in manual mode (stopped)
button_highlight='#cccccc' //onmouseover background-color for image buttons (string) (requires image_controls=1) - use color name or hex value with # prefix
target='_new' //will set a target for a slide group, will be overridden by array_name[#][3], if present
specs='width=300, height=250, top=150, left=200, scrollbars, resizable, location' //will set new window specifications for a slide group, will be overridden by array_name[#][4], if present
random=1 //set a random slide sequence on each page load
fadecolor='blue' //set fading images' background color, defaults to white (string) - use color name or hex value with # prefix
no_controls=1 //use for a slide show with no controls
delay=3000 //set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
jumpto=1 //use for added controls to jump to a particular image by its number
no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
//use below for customized onclick event for linked images:
onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

You could get rid of the //'s and make this into table as a configuration guide. The main point is that folks understand that these are all optional. The slide show will look like the first one on my current demo page without any them (except the iefade, the first one has just that one option). The next most important thing is that each one can be used only with the array name of a show, as mentioned earlier:

array_name.property=value

Literals must be quoted, numbers should not.

Added later:

I'm so close to this thing, that I forgot an important concept that users would need to know. The options that have a value of 1 are boolean. So, not having them is the same as setting them to 0 and, any value other than 0 or false is the same as 1. The one's with string values will default to an empty string if not used, except for the image button's background (highlight) color (only used if using images as controls) which defaults to yellow.

So, in the case of the description prefix (a string), without it set at all, you get just the description, without a prefix. For the specs (string), you get a full new window if none are specified (same as you do with the window.open method).

Edit (12/27/06):
iefade has been replaced with a default cross browser fade adapted from the Ultimate Fade-in Slideshow script. To opt out of fading, use nofade as shown in the updated properties definitions above. This type of fading doesn't have the problem I was having with iefade.

[ddadmin]

Thanks John, I appreciate the extensive commentary, it would certainly come in handy when I'm constructing the script page. I'm leaning towards creating a table showing all the properties and their function, since inline in the script as is can appear a little daunting for some.

I gather with the last comment that this script is still a work in progress, so I'll only start constructing the script page when it's ready.

[jscheuer1]

OK, I've updated the demo link from my first post and edited my previous message to reflect added and changed properties. I leaned heavily on the Ultimate Fade-in Slide Show for the updated code but, retained the best of the interactive features like incremental preloading via the onload event attribute of the image tag.

Two neat features, the slideshows can set their own width and height (this can even be used with shows having varying dimensions if the first two images are both the same dimensions and are the highest and widest). The default slide show needs only an array of images with descriptions and a call to this array. No parameters other than the array name and no properties are required. Width and height and delay values can be set in the call or as properties of the array. If set in the call, width and height may be set or omitted as a pair, the delay parameter just has to be the last of 4 or last of 2 parameters (the array name is always the 1st parameter).

I've tested the (expletive deleted) out of this script now but, would like to see others take it through its paces a bit.

Tested in:
IE 4.01 through 7 (includes 5.01, 5.5 and 6 - all in their sp2 versions, if any)
NS's 4, 7.2, and 8.0.1 (both FF and IE modes)
FF 1.5.0.9 and some earlier versions (not tested in FF 2)
Opera 8 and 9.01

Version 4 browsers just get a plain slide show.

The fading works in Opera, FF, NS and IE starting at their respective versions that support opacity of any stripe and will work in recent Safari browsers. The script should work in Safari but, I cannot be certain of that.

[djr33]

I can test in safari if you want.
(and mac IE5 and FF, too)

[jscheuer1]

I can test in safari if you want.
(and mac IE5 and FF, too)

You could already have had a look at it in that browser and the others, if you were so inclined.

[Twey]

Confirmed to work in Konqueror 3.5.5. However:

function inter_slide(){
if(!document.images||arguments.length==0)
return;
var imgs=arguments[0];
var width=null, height=null, delay=null;
if(arguments.length==2)
delay=arguments[1];
else if(arguments.length==3||arguments.length==4)
width=arguments[1], height=arguments[2], delay=arguments[3]? arguments[3] : null;

I really don't like the way you've done this. The usual way is to specify the optional arguments formally, then check if they're undefined. This would seem to me to make much more sense semantically.

function inter_slide(imgs, width, height, delay) {
if(!document.images || arguments.length==0)
  return;
var width = width || null,
  height = height || null,
  delay = delay || null;

I know it's not quite as flexible as using the arguments collection the way you were, but I think the original would confuse people (heck, it confused me anyway). Of course, it would be better still to have only the necessary arguments passed to the constructor, then set anything else using member functions.

ief=document.body.filters? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);' : typeof document.body.style.opacity=='string'? 'opacity:0;' : 'opacity:0.10;-moz-opacity:0.10;-khtml-opacity:0.10;';

The original Alpha filter should probably work on IE/Mac too.

document.write('<br>')

document.write() has a nasty habit of slowing down page loads. By using the DOM, you can avoid document.write(), represent the structure of your document, and cater for different markup languages (XHTML being currently the most prominent) without having to change your code.

But yes, the effect is nice. I wish you'd indent your code

[jscheuer1]

Confirmed to work in Konqueror 3.5.5. However:

function inter_slide(){
if(!document.images||arguments.length==0)
return;
var imgs=arguments[0];
var width=null, height=null, delay=null;
if(argum . . .

I really don't like the way you've done this. The usual way is to specify the optional arguments formally, then check if they're undefined. This would seem to me to make much more sense semantically.

function inter_slide(imgs, width, height, delay) {
if(!document.images || arguments.length==0)
  return;
var width = width || null,
  height = height || null,
  delay = delay || null;

I know it's not quite as flexible . . .

Yes, not as flexible. And perhaps only confusing to someone who writes scripts and/or who relies on looking at the code instead of following the instructions (as given in the body of the demo):

<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name.  If Width is used, so must Height.
//Interval is optional too.  It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)

</script>

The original Alpha filter should probably work on IE/Mac too.

document.write('<br>')

document.write() has a nasty habit of slowing down page loads. By using the DOM, you can avoid document.write(), represent the structure of your document, and cater for different markup languages (XHTML being currently the most prominent) without having to change your code.

But yes, the effect is nice. I wish you'd indent your code

About the alpha filter - I found that the 'advanced' method for setting it initially worked just fine in IE 5.5 which requires the older method:

if (this.tempobj.filters&&this.tempobj.filters[0]){
if (typeof this.tempobj.filters[0].opacity=="number") //if IE6+
this.tempobj.filters[0].opacity=this.degree
else //else if IE5.5-
this.tempobj.style.filter="alpha(opacity="+this.degree+")"
}

for manipulating it later on in the script. On the other hand, IE 5 wouldn't use either method of setting it initially. This leads me to think that IE Mac would probably be the same as one or the other of these. For anyone inclined to test the theory, the image buttons for next and previous in the third demo show will dim (while the show is in play mode) in IE browsers supporting the older method of both setting and manipulating the alpha filter.

On doc'write - It has been my experience that IE often has problems with the DOM even when done correctly. The demo code takes 3.4 seconds to load for a simulated dial up user (this is not including the images). The connection I tested at was 80% efficiency of the most common dial up speed (v90 I think it is called - 56kb/sec, something like that). I'm not sure how much the DOM would trim off of that. At higher speeds, it is an insignificant amount of time, less than a second. What takes the most time in most slide shows is loading the images. This one only loads as it goes, keeping one step ahead of itself so, that cuts down on the real load-time hog.

About indenting code - I've always found that confusing - both to read and to write. I think it is a matter of personal taste.

Thanks for the Konq test!

[Twey]

On doc'write - It has been my experience that IE often has problems with the DOM even when done correctly.

There are quite a few bugs in its implementation. I don't think any need apply here, though.

The demo code takes 3.4 seconds to load for a simulated dial up user (this is not including the images).

The connection speed won't have an effect on the impact of document.write(). Rather, it would be to do with the CPU speed (and resources available to the browser, of course). Also, there are other disadvantages associated with document.write(), mostly those associated with innerHTML: it represents the DOM as a string, requires the code to be changed in order to represent the DOM in a different way (e.g. XHTML), &c.

About the alpha filter - I found that the 'advanced' method for setting it initially worked just fine in IE 5.5 which requires the older method:

Whoops, didn't see that. Sorry.

Yes, not as flexible.

Hence the use of setter methods for optional parameters, which allows more flexibility than either method.

And perhaps only confusing to someone who writes scripts and/or who relies on looking at the code instead of following the instructions

Well, possibly, but one should always endeavour to write clear code.

About indenting code - I've always found that confusing - both to read and to write. I think it is a matter of personal taste.

Really? I've never before come across someone who actually felt that indented code reduced comprehensibility. Odd. As you say, perhaps a matter of personal taste (although one worth acquiring, I would think, due to the extra information available at a glance).

Thanks for the Konq test!

Quite welcome The fade doesn't work, of course.