• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Display Array No!!

Hopefully this will be very simple for most for most of you, but I am not the best at js.

I am developing a site that displays an image with next and previous links to scroll through the images in my array. I am trying to display the image No that they are currently viewing / total images. Here is my code so far.

<script language="JavaScript">

var selectedImage = 1;
var numImages = 7;
var img = new Array();
img[1] = "img/prop/6/1.jpg";
img[2] = "img/prop/6/2.jpg";
img[3] = "img/prop/6/3.jpg";
img[4] = "img/prop/6/4.jpg";
img[5] = "img/prop/6/5.jpg";
img[6] = "img/prop/6/6.jpg";
img[7] = "img/prop/6/7.jpg";

function swapImageRight(){
      if (selectedImage < numImages){
            ++selectedImage;
            document.image.src=img[selectedImage];
            
      }
}

function swapImageLeft(){
      if (selectedImage > 1){
            selectedImage = selectedImage - 1;
            document.image.src=img[selectedImage];
      }
}

</script>

And in the body above the next and previous buttons I have:

<script language="JavaScript">document.write('1' + '/' + numImages);</script>

How do i get the '1' to change dynamicaly to show the array no im viewing?? here is my site so you can see what i mean:

http://www.homematch.co.uk/map/sample-detail.asp?PID=1

Thanks in advance for any help.

James.
0
james1977
Asked:
james1977
  • 3
  • 3
1 Solution
 
b0lsc0ttCommented:
james1977,

The problem is using document.write.  The document (i.e. page) has already been written and closed.  That's OK though because there is a really cool way to do it.  Change the script tag and use a div or span tag instead.  Provide that tag with a unique id.  Then we use innerHTML to "write" the content of that div/span.  With that we can write the 1/7 and then change it as needed.  Whether you use a div or span tag for that spot depends on the page layout and if it needs to be inline (i.e. span) or not (i.e. div).

You write content to an element with script like this ...

document.getElementById("uniqueID").innerHTML = "1/7";

Put the div/span's id in place of uniqueID in the line above.

This should give you a basic idea at least.  Let me know if I misunderstood what you want or if you need help getting it to work in the page.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 
james1977Author Commented:
Thanks for the reply B0lsc0tt, only just seen it, i'll have a little look and see if I can get my head round it.

Thanks again.

James.
0
 
james1977Author Commented:
Sorry b0lsc0tt, when I said im not the best at Javascript, what I actually meant was that im a complete dunce at it.

I had a quick go at what you said but i've not got a clue what im doing, would it be possible for you to run me through it?

Sorry again, I hate being rubbish at things! Better get a javascript for dummies book!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
b0lsc0ttCommented:
I will make some changes to your code that you can try ...

                <tr>
                  <td colspan="2"><div align="center" id="picDisplay"><script language="JavaScript">document.write(selectedImage + '/' + numImages);</script></div></td>
                  </tr>

Then in the 2 swap image functions add a line like this ...

  document.getElementById("picDisplay").innerHTML=selectedImage + '/' + numImages;

That line should probably be one of the last lines.  It definitely needs to be after you change the selectedImage value.

Let me know if you have any questions or have a problem.

bol
0
 
james1977Author Commented:
Thanks B0lsc0tt that worked perfectly!!!

Really appreciate your help thanks again!

James.
0
 
b0lsc0ttCommented:
Your welcome!  I'm glad that I could help you.  Thank you for the grade, the points and the fun question.  Enjoy learning Javascript and I'll see you around. :D

bol
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now