I want a slideshow that works across browsers

[Trevor L.]

BlankI am reposting this because it got lost under the Microsoft MVP discussion thread

Anyone, can you tell me what changes I have to make to this code so that it
would work in all (most) browsers

Javascript
function chgImg(direction)
/****
direction positions to
--------- ------------
-100 first image
1000 last image
-1 previous image
1 next image
1000 + i image i (i > 0)
****/
{
var ImgLength = Slides.length - 1
ImgNum =
(direction <= -100) ? 0
: (direction >= 1000) ? (direction - 1001)
: ImgNum + direction
ImgNum =
(ImgNum > ImgLength) ? 0
: (ImgNum < 0) ? ImgLength
: ImgNum
document.SlideShow.src = Slides[ImgNum]
document.getElementById('ImgText').innerHTML = (ImgNum + 1) + '/' +
Captions.length
+ ' ' + Captions[ImgNum]
}

This function is called with parameter direction to display the next image.
ImgNum is a global variable pointing to the last image.
Slides is an array of image names.
Captions is an array of captions.

HTML
<img class="none" src="images/wait.gif" alt="" name="SlideShow"><br>
<span id="ImgText">START</span><br>

My feeling that getElementByID is illegal in Netscape and therefore possibly
in Firefox. Is document.SlideShow.src also illegal?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Jon Spivey]

BlankHi,

getElementById is fine for all modern browsers. On first look I think you need to address the slide show image like this
document.images['SlideShow'].src = Slides[ImgNum]

IE sees document.SlideShow.src = Slides[ImgNum] as a shortcut but other browsers aren't going to be so forgiving. I'd really need to see the page in question to give a definitive answer though.

--
Cheers,
Jon
Microsoft MVP


I am reposting this because it got lost under the Microsoft MVP discussion thread

Anyone, can you tell me what changes I have to make to this code so that it
would work in all (most) browsers

Javascript
function chgImg(direction)
/****
direction positions to
--------- ------------
-100 first image
1000 last image
-1 previous image
1 next image
1000 + i image i (i > 0)
****/
{
var ImgLength = Slides.length - 1
ImgNum =
(direction <= -100) ? 0
: (direction >= 1000) ? (direction - 1001)
: ImgNum + direction
ImgNum =
(ImgNum > ImgLength) ? 0
: (ImgNum < 0) ? ImgLength
: ImgNum
document.SlideShow.src = Slides[ImgNum]
document.getElementById('ImgText').innerHTML = (ImgNum + 1) + '/' +
Captions.length
+ ' ' + Captions[ImgNum]
}

This function is called with parameter direction to display the next image.
ImgNum is a global variable pointing to the last image.
Slides is an array of image names.
Captions is an array of captions.

HTML
<img class="none" src="images/wait.gif" alt="" name="SlideShow"><br>
<span id="ImgText">START</span><br>

My feeling that getElementByID is illegal in Netscape and therefore possibly
in Firefox. Is document.SlideShow.src also illegal?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Hi, Jon

Doesn't document.images['SlideShow'].src refer to an array?

'Slideshow' is in fact the name of an <img> tag

However, I will give it a go.

The code is at http://tandcl.homemail.com.au in the files album.html, slideshowauto.html, with JS code in external.js.

To make it easier to access, all code is also in code.zip (updated a few minutes ago)
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Jon,

I have altered my code to read
document.images['SlideShow'].src = Slides[ImgNum]
and it still works fine in IE, but not in Firefox.
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Jon Spivey]

I'll look at this properly in the morning

--
Cheers,
Jon
Microsoft MVP

Hi, Jon

Doesn't document.images['SlideShow'].src refer to an array?

'Slideshow' is in fact the name of an <img> tag

However, I will give it a go.

The code is at http://tandcl.homemail.com.au in the files album.html, slideshowauto.html, with JS code in external.js.

To make it easier to access, all code is also in code.zip (updated a few minutes ago)
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

I have now managed to get my slideshow to work in Firefox by adding this code

function Browser()
{
this.dom = (document.getElementById) ? 1: 0;
this.ie4 = (document.all && !this.dom) ? 1: 0;
this.ns4 = (document.layers && !this.dom) ? 1: 0;
this.ns6 = (this.dom && !document.all) ? 1: 0;
this.ie5 = (this.dom && document.all) ? 1: 0;
this.ok = (this.dom||this.ie4||this.ns4);
this.platform = navigator.platform;
}
//------------------------------
var browser = new Browser();

if (!browser.ns4 && !browser.ns6)
{
document.images['SlideShow'].style.filter="blendTrans(duration=2)"
document.images['SlideShow'].style.filter="blendTrans(duration=crossFadeDuration)"
document.images['SlideShow'].filters.blendTrans.Apply()
document.images['SlideShow'].filters.blendTrans.Play()
}
which removes the IE only effects.

The problem now is that my positioning is not good. On the Picture Album page the thumbnail images are too far apart, causing a scroll bar which isn't there in IE6. And when the Slideshow is entered the pictures are centred in a 600*600 page whereas in IE6 there are top left justified

I have used class="slide" where the CSS is
..slide {font-family: Verdana,Arial,Helvetica,sans-serif ;
background: white ; text-align: center ;
margin: 0 ;
padding: 0 ;}

The padding and margin don't make any difference to Firefox - the image is still offset from the top and left.
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Trevor:

My inclination would be to get rid of all of that heavy javascript, and
simplify.

Here's a nice, simple, and easy method I often use for things like
slideshows. It has the distinct advantage that it doesn't encumber your
page with the weight of the larger images UNTIL THEY ARE REQUESTED by the
visitor by clicking on a thumbnail. Excuse my crass commercialism by using
thumbs of sites I have built.

This method depends on the Set Text of Layer behavior, and a little manual
tweak. See if you can get it from the code.

--
Murray
============

BlankI am reposting this because it got lost under the Microsoft MVP
discussion thread

Anyone, can you tell me what changes I have to make to this code so that it
would work in all (most) browsers

Javascript
function chgImg(direction)
/****
direction positions to
--------- ------------
-100 first image
1000 last image
-1 previous image
1 next image
1000 + i image i (i > 0)
****/
{
var ImgLength = Slides.length - 1
ImgNum =
(direction <= -100) ? 0
: (direction >= 1000) ? (direction - 1001)
: ImgNum + direction
ImgNum =
(ImgNum > ImgLength) ? 0
: (ImgNum < 0) ? ImgLength
: ImgNum
document.SlideShow.src = Slides[ImgNum]
document.getElementById('ImgText').innerHTML = (ImgNum + 1) + '/' +
Captions.length
+ ' ' + Captions[ImgNum]
}

This function is called with parameter direction to display the next image.
ImgNum is a global variable pointing to the last image.
Slides is an array of image names.
Captions is an array of captions.

HTML
<img class="none" src="images/wait.gif" alt="" name="SlideShow"><br>
<span id="ImgText">START</span><br>

My feeling that getElementByID is illegal in Netscape and therefore possibly
in Firefox. Is document.SlideShow.src also illegal?
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Oops -

http://www.murraytestsite.com/slideshow.htm

 

[Trevor L.]

Murray,

Looks good so far.

You still use some Javascript. I would need to check whether more or less
than I am using. Some of my JS is used elsewhere, so it is only the extra JS
for the slideshow that matters.

Is yours fairly browser-neutral?
I note that you test for:
o.getElementById(id)
o.layers
o.all
which should cover most, I guess.
I am yet to discover what the major differences are between Netscape IE
Mozilla Firefox Opera, etc . I picked up a browser sniffer from some site,
which I have used, but I am still learning.

One good point I note about your slideshow is that it opens the larger image
in the same page, but I am using 600*600 so this would cover the thumbnails.
I have 48 so far on the one page. (At 1-2Kb each this isn't too large
overhead to load.) But yours is one at a time whereas I have an automatic
display plus the option to present only one.

I will look at the pros and cons of each approach. Of course I have yet to
dissect your code to understand what it is doing, but that is a pleasant
task for a warm autumn afternoon here in Australia.
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Murray,
I think you were setting me a test to find what the tweak was

This method depends on the Set Text of Layer behavior, and a little manual tweak. See if you can get it from the code.

I think the tweak is the way that you pass the parameter txt to the function from inside
<a href="javascript:;" onclick="FP_setLayerText( ... >
when the text itself contains < " and >. If one were to code these as is, they would interfere with contents of the <a> tag, so you use the code &lt; &quot; and &gt; in their place.

I am fairly sure I am correct, because I decided to replace &lt; &quot; and &gt; by < " and >. And guess what - it bombed. Surprise, surprise !! :-D

How many brownie points do I gain?

P.S. It is nice code.
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Trevor:

Good going.

The trick is - you have to know the path to the image before applying the
behavior. Then when you apply the set text of layer behavior, you manually
enter the HTML that would call up that image, e.g.,

<img src="/blah/blah/image.jpg" width="255" height="314" alt=""
title="whatever">

That's all there is to it.

--
Murray
============

Murray,
I think you were setting me a test to find what the tweak was

This method depends on the Set Text of Layer behavior, and a little manual
tweak. See if you can get it from the code.

I think the tweak is the way that you pass the parameter txt to the function
from inside
<a href="javascript:;" onclick="FP_setLayerText( ... >
when the text itself contains < " and >. If one were to code these as is,
they would interfere with contents of the <a> tag, so you use the code &lt;
&quot; and &gt; in their place.

I am fairly sure I am correct, because I decided to replace &lt; &quot; and
&gt; by < " and >. And guess what - it bombed. Surprise, surprise !! :-D

How many brownie points do I gain?

P.S. It is nice code.
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Murray]

Trevor:

I want to add that what I like about this method is that it's easy to do
right inside FP. There is no "exogenous" javascript to copy and paste, and
the javascript that is used is bog standard FP boilerplate code. The only
real disadvantage of it is that it makes your code a little hard to read
since the HTML that you enter into the behavior's dialog all gets 'server
encoded' on the page (that's what replaces "<" with "&lt;", for example).

It works nicely and gives you a responsive page.

--
Murray
============

Murray,
I think you were setting me a test to find what the tweak was

This method depends on the Set Text of Layer behavior, and a little manual
tweak. See if you can get it from the code.

I think the tweak is the way that you pass the parameter txt to the function
from inside
<a href="javascript:;" onclick="FP_setLayerText( ... >
when the text itself contains < " and >. If one were to code these as is,
they would interfere with contents of the <a> tag, so you use the code &lt;
&quot; and &gt; in their place.

I am fairly sure I am correct, because I decided to replace &lt; &quot; and
&gt; by < " and >. And guess what - it bombed. Surprise, surprise !! :-D

How many brownie points do I gain?

P.S. It is nice code.
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html