Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Redefining array variables

Posted on 2005-05-14
1
Medium Priority
?
189 Views
Last Modified: 2006-11-18
I am using this script below but need to  modify it so I can use it in another page with other javascript code.

The first problem is that I want to be able to  make the names of the files different from just 1,2,3.jpg. I know that the new array statement can be concatenated but I am not sure how to do it. So I could use newphoto1.jpg or any concatenated word and number instead.

Additionally, I need to use different ids for the thumbnails as they conflict with other javacode.  Is it as simple as using id='viewimg1' instead of id=' img1'?

What is confusing to me is how to redesign the functions used in the script to work with non integer filenames.

Any help would be appreciated.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<script language="javascript" type="text/javascript">
<!--
var current=1;
var maxImages=20;
if(document.images)
{
   thumbs = new Array();
   for (var idx=1;idx<=maxImages;idx++) {
        thumbs[idx] = new Image();
        thumbs[idx].src = '/tangocoder/images/'+idx+'.jpg';
   }        
}
function init() {
     for (var idx=1;idx<=5;idx++) {
          document.getElementById('img'+idx).src = thumbs[idx+current-1].src;
     }
}

function prev() {
     current = current - 5;
     if (current<1) current=1;
     for (var idx=1;idx<=5;idx++) {
          document.getElementById('img'+idx).src = thumbs[idx+current-1].src;
     }
}

function next() {
     current = current + 5;
     if (current>(maxImages-4)) current=(maxImages-4);
     for (var idx=1;idx<=5;idx++) {
          document.getElementById('img'+idx).src = thumbs[idx+current-1].src;
     }
}
function clicked(src) {
     document.getElementById('imgMain').src = src;
}
//-->
</script>
<title>New Photo Page</title>
</head>

<body>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="600" id="table1" cellspacing="10">
     <tr>
          <td width="135">
          <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" id="table2" cellspacing="10">
               <tr>
                    <td align="center"><input type="button" value="Prev" name="bPrev" onclick="prev();"><input type="button" value="Next" name="bNext" onclick="next();"></td>
               </tr>
               <tr>
                    <td align="center"><img id="img1" border="0" src="/tangocoder/images/1.jpg" width="100" height="100" onclick="clicked(this.src)"></td>
               </tr>
               <tr>
                    <td align="center"><img id="img2" border="0" src="/tangocoder/images/2.jpg" width="100" height="100" onclick="clicked(this.src)"></td>
               </tr>
               <tr>
                    <td align="center"><img id="img3" border="0" src="/tangocoder/images/3.jpg" width="100" height="100" onclick="clicked(this.src)"></td>
               </tr>
               <tr>
                    <td align="center"><img id="img4" border="0" src="/tangocoder/images/4.jpg" width="100" height="100" onclick="clicked(this.src)"></td>
               </tr>
               <tr>
                    <td align="center"><img id="img5" border="0" src="/tangocoder/images/5.jpg" width="100" height="100" onclick="clicked(this.src)"></td>
               </tr>
          </table>
          </td>
          <td width="465" valign="top">
          <table border="2" cellpadding="0" style="border-collapse: collapse" id="table3" bordercolor="#000000">
               <tr>
                    <td><img id="imgMain" border="0" src="/tangocoder/images/1.jpg" width="313" height="253"></td>
               </tr>
          </table>
          </td>
     </tr>
</table>
</body>
<script>init();</script>
</html>
0
Comment
Question by:tangocoder
1 Comment
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 14003602
In the preload change this:
thumbs[idx].src = '/tangocoder/images/'+idx+'.jpg';
to:
thumbs[idx].src = '/tangocoder/images/newphoto'+idx+'.jpg';


At several places in the coe you have:
document.getElementById('img'+idx).src = thumbs[idx+current-1].src;
change it to:
document.getElementById('viewimg'+idx).src = thumbs[idx+current-1].src;

Now just change the ids on the image tags and you should be good to go.

Cd&
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question