PDA

Click to See Complete Forum and Search --> : Slideshow issues

The Public
08-01-2003, 11:54 AM
I'm new at Javascript, and I'm trying to write a function that will count the number of images in a slideshow and write that range with links to each image into the html document. In other words, I want to count the images, write "1 2 3 4 5 6" in the html file and have each number link to the image.

Problem #1: In Perl, I could write 'print 1..9' and get '123456789'. Is there such a range operator in Javascript?

Could I do such a thing as:

var range_string= "however you indicate the range from 1 to" + slideshow.length();

Problem #2: How to make this appear on the page, complete with jumps to slideshow images, upon loading?

I have some ideas, but I don't know enough Javascript to tell what's working and what's not in my functions.
Phil Karras
08-01-2003, 12:06 PM
Problem #1: In Perl, I could write 'print 1..9' and get '123456789'. Is there such a range operator in Javascript?
Not that I know of.

Could I do such a thing as:

var range_string= "however you indicate the range from 1 to" + slideshow.length();
Yes, this should work.

Problem #2: How to make this appear on the page, complete with jumps to slideshow images, upon loading?
There are a number of ways, on the other hand, where are the file names coming from?

You see the problem is that JS can not to a DIR on the server (or client for that matter) so it has no way of knowing about any files unless you tell it. And, if you're going to tell it, then you can code it in HTML. The only time JS is an advantage is if you're constantly changing the number of files, or the names of &/or links to these files are used more than once.
The Public
08-01-2003, 01:15 PM
The filenames are from here:


NewImg = new Array (
"image1" , "image2", "image3"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;



function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}



I don't know if this pertains to the reply above, but my reason for wanting to do this is because I will be using this particular page as a template for different slideshows. I'd like to be able to just add the filenames to the array and have a function that counts them and puts the range, as I mentioned, onto the page.
Phil Karras
08-01-2003, 01:30 PM
In JS you do not need to count the size of the array, as in Perl the arry knows its own size:


var NewImg = new Array (
"image1" , "image2", "image3"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

var Size = NewImage.length();

should do it.
The Public
08-01-2003, 02:47 PM
My real big question is not necessarily the logic of the function itself, but how to get a string from the script in the head of an html document to appear in the body text of the page. I've been trying to name an anchor and use document.anchor.writln() , but it doesn't seem to be working.

For instance, if I invoke a function that says if a condition is true, return "That's true!" How do I get "That's true!" to show up where I want it in the text of the page?
Phil Karras
08-01-2003, 05:55 PM
If you only want to place it in the body as the page loads use:


In the <head><script ...> tags:

var Test01 = "Hi there Public!";

<!-- ************** -->

Then in the body:

<script ....>
document.write(Test01);
</script>


If you want to place text onto the page & have it change use <div with an ID and innerHTML:


function OK() {
var obj = document.getElementById("DIV01");
obj.innerHTML = "That's true!";
}

<!-- In the body: -->

<div id='DIV01'> </div>

<a href='#' onCLick='OK();'>[CLick Here]</a>


That should do it. Now create either multiple functions, or a function that can take a message & use it or whatever you want from here.
The Public
08-02-2003, 12:27 PM
Excellent. Thank you.
The Public
08-03-2003, 08:44 PM
I finally got this thing to work. It's pretty useful, because it will count your images and return a range "1 2 3 4 5 6" , with each number linking to the corresponding image. What I'm trying to figure out now is how to make the numbers highlight (switch colors) when I use the "forward" and "reverse" buttons. They switch when I click on them, because I included a mouseover and active link highlighting in my CSS, however when I use the forward and reverse buttons, the numbers remain the same color.

Any suggestions?.

It looks like this
HEAD SCRIPT:

<script ...>
<!--hide
NewImg = new Array (
"images/image1.jpg" ,
"images/image2.jpg" ,
"images/image3.jpg",
"images/image4.jpg",
"images/image5.jpg"
);

var ImgNum = 0;
var ImgLength = NewImg.length-1;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}

function imgRange() {
var imgRange="";
for (var count=0; count <= ImgLength; count++){
var rangeNum=count+1;
var imgRange = imgRange + "<a href='#' onClick='goImg(" + count + "); return false;'>" + rangeNum + " </a>";}
return imgRange;
}

function goImg(ImgNum) {
document.slideshow.src = NewImg[ImgNum];}


//unhide-->

</head>


BODY SCRIPT (including HTML):

<!--start HTML-->
<td style="text-align: right; font-size: 12px;"> <a href="#" onClick="chgImg(-1); return false;">
&lt;Rev </a> <script language="JavaScript1.4" type="text/javascript">
document.write(imgRange());
</script> <a href="#" onClick="chgImg(1); return false;"> Fwd></a></td>

<!--end HTML-->