| Simple function to make image viewer not working in IE and Opera
function with arguments not launched by IE and similars |
jerry95
msg:4072429 | 2:41 am on Feb 2, 2010 (gmt 0) |
Hello everyone, I am thankful to all for this forum and I need urgent help with this code, I realize I'm newbie to Javascript and there's plenty of fundamentals of the methods, the functions and the way they're defined that I do not understand. But anyways here's the trouble and I believe it might be interesting. First of all, from what I gather, the function (a very simple function to increase and decrease a count) is not working at all in IE and Opera. Second, I ask you all, is there a specific way to define arrays for IE. The problem I'm having is I have an array that points to several image files and I'm loading them from a series of thumbnails in the page, that call a function onclick, passing the number of the array as an argument to the function. Then I use the suckerfish function made kindly by Patrick Griffith (www.htmldog.com) to cheat IE and Opera and display a targeted div that way. This last div is my Image Viewer, and in there, to complicate (possibly) matters further, I use two link tags to move back and forth in the image secuence. From what I know everything depends on the array, and I use it thoroughly to add captions and the images themselves. The thumbnails use the same images scaled down. But the function is not even called by IE and Opera, or whatever is happening I don't understand, because IE only shows the alternate text when a thumbnail is clicked, however it then shows any image but the one I clicked. Opera behaves a little bit more predictably because when a thumbnail is clicked it displays the alternate text, and then when I click the link tags it starts displaying the images from the first index in the array to the last. But anyway it's a mess. And IE also just closes the targeted div whenever I click on the links. Please help me! I realize there's lots of image viewers and this is probably not the way to do it, but I think there's nothing wrong with the functions defined or with the array itself, because it also works fine on Firefox, Safari, Chrome, SeaMonkey, etcetera.
I post the complete function, for those of you patient enough to read this large post:
// Next-Previous Image Gallery 2 :: Solomon :: [sleuthz.com...]
// Create an Array of Image Locations
var myImg= new Array()
myImg[0]= "pix01.jpg";
myImg[1]= "pix02.jpg";
myImg[2]= "pix03.jpg";
myImg[3]= "pix04.jpg";
myImg[4]= "pix06.jpg";
myImg[5]= "pix07.jpg";
myImg[6]= "pix08.jpg";
myImg[7]= "pix15.jpg";
myImg[8]= "pix05.jpg";
myImg[9]= "pix09.jpg";
myImg[10]= "pix11.jpg";
myImg[11]= "pix12.jpg";
myImg[12]= "pix13.jpg";
myImg[13]= "pix14.jpg";
myImg[14]= "pix26.jpg";
myImg[15]= "pix10.jpg";
myImg[16]= "pix16.jpg"; //esta img reemplazarla
myImg[17]= "pix20.jpg"; //tambi�n esta
myImg[18]= "pix21.jpg";
myImg[19]= "pix35.jpg";
myImg[20]= "pix22.jpg";
myImg[21]= "pix25.jpg";
myImg[22]= "pix28.jpg";
myImg[23]= "pix30.jpg";
myImg[24]= "pix27.jpg"; //esta img reemplazarla tambi�n
myImg[25]= "pix19.jpg";
myImg[26]= "pix23.jpg"; //esta tambi�n
myImg[27]= "pix29.jpg";
myImg[28]= "pix32.jpg";
myImg[29]= "pix34.jpg";
// Create an Array of Captions
var myCap= new Array()
myCap[0]= "Nuestras Instalaciones.";
myCap[1]= "Nuestras Instalaciones.";
myCap[2]= "Nuestras Instalaciones.";
myCap[3]= "Espacios de Trabajo.";
myCap[4]= "Consiguiendo cosas que ocupo en la cocina. Taller de cocina.";
myCap[5]= "Escogiendo cosas en el s�per. Taller de pedagog�a.";
myCap[6]= "Mirando el d�a sentadas. Un paseo cotidiano.";
myCap[7]= "Haciendo m�sica con percusiones. Taller de M�sica.";
myCap[8]= "Tomando clase. Taller de M�sica.";
myCap[9]= "Tocando el piano. Taller de M�sica.";
myCap[10]= "Tocando percusiones. Taller de M�sica.";
myCap[11]= "Taller de Cocina.";
myCap[12]= "Taller de Cocina. Ocupadas.";
myCap[13]= "Taller de Cocina. Ocupadas.";
myCap[14]= "Taller de Cocina.";
myCap[15]= "Taller de Nataci�n.";
myCap[16]= "Nadando con el maestro. Taller de Nataci�n.";
myCap[17]= "Nadando en la alberca. Taller de Nataci�n.";
myCap[18]= "Tomando clase. Taller de arte.";
myCap[19]= "Taller de arte. Comenzando a trabajar.";
myCap[20]= "Trabajando. Taller de arte.";
myCap[21]= "Trabajando. Taller de arte.";
myCap[22]= "Sentada escribiendo. Taller de Pedagog�a.";
myCap[23]= "Sentada escribiendo. Taller de Pedagog�a.";
myCap[24]= "Usando fotos recortadas para construir el cuerpo. Taller de Pedagog�a.";
myCap[25]= "Taller de Pedagog�a.";
myCap[26]= "Manualidades para fechas de Halloween.";
myCap[27]= "Trabajo para el arreglo de mi cuerpo. Taller de Cuerpo.";
myCap[28]= "Trabajo para el arreglo de mi cuerpo. Taller de Cuerpo.";
myCap[29]= "Trabajo para el arreglo de mi cuerpo. Taller de Cuerpo.";
// Create Number of Images Variable
var n = myImg.length;
// Create Number Variable
var i = 0;
// Create Image Number Variable
var m = 1;
var x = "";
// Create Function to Load Image
function loadImg(x){i = x;
// Gives "imgSrc" a Source with Number Variable
document.getElementById("imgSrc").src = myImg[x];
// Gives "caption" DIV a content
document.getElementById("caption").innerHTML = myCap[x];
alert('found');
// Gives "imgNum" DIV the image number
}
// Create Link Function to Switch Image Backward
function prev(){
// Create If/Else Statement to Stop at Certain Image
// If the Number Variable is Less Than 1
if(i<1){
// Create Another Next Number Variable which Equals to Number Variable
var l = i = n-1;
// Create Current Number Variable which Equals to Image Number Variable
var c = m = n;
// Otherwise
}else{
// Next Number Variable Equals to Number Variable - 1
var l = i-=1;
// Current Number Variable Equals to Image Number Variable - 1
var c = m-=1;
}
// Gives "imgSrc" a Source with an Alternative "l" Variable
document.getElementById("imgSrc").src = myImg[l];
// Gives "caption" DIV a content
document.getElementById("caption").innerHTML = myCap[l];
alert ('found');
// Gives "imgNum" DIV the image number
}
// Create Link Function to Switch Image Forward
function next(){
// Create If/Else Statement to Stop at Certain Image
// If the Number Variable is More Than [Minus 1 of the Number of Arrays]
if(i>n-2){
// Create Next Number Variable which Equals to Number Variable
var l = i = 0;
// Create Current Number Variable which Equals to Image Number Variable
var c = m = 1;
// Otherwise
}else{
// Next Number Variable Equals to Number Variable + 1
var l = i+=1;
// Current Number Variable Equals to Image Number Variable + 1
var c = m+=1;
}
// Gives "imgSrc" a Source with Next Number Variable
document.getElementById("imgSrc").src = myImg[l];
// Gives "caption" DIV a content
document.getElementById("caption").innerHTML = myCap[l];
// Gives "imgNum" DIV the image number
}
// Load function after page loads
<!-- this last part I do not implement cause I load the function from the achor tags in the html-->
|
Fotiman
msg:4072812 | 4:17 pm on Feb 2, 2010 (gmt 0) |
One problem I see with this approach is that it's really easy for the image array to get out of sync with the captions array. These 2 values should really be treated as a single "object" that has "src" and "caption" as properties. That way, it's easier to maintain them and less likely that an error can be introduced by human error.
Also, rather than using new Array() and then having to assign each value to a specific index (which again leaves a lot of room for error if you need to change the order or remove a value), you can use an array literal. It's less code, easier to maintain, and doesn't add the overhead of the new.
So, lets start by replacing those 2 arrays with a single array. Each element in the array is going to be an object that has a "src" property (the value from the first array) and a "caption" property (the value from the second array).
Next, we can eliminate some of your global variables. All we'll need to keep track of is the current index, and the total number of items. Also, I would add 2 global variables to hold the result of document.getElementById('imgSrc') and document.getElementById('caption') so that we don't need to call those every time we execute one of the functions.
Also, your prev and next functions are overly complicated. All they need to do is make sure that we don't try to load something outside of the array of items. So if we're at the first item in the array, and prev is called, "wrap" around to the end of the array. Likewise, if we're at the end of the array and the next function is called, "wrap" around to the front of the array.
Here is the modified code. Notice it's much leaner. Make sure you set the imgSrc and caption variables on load.
NOTE: I was not able to paste some of the characters from the original post back in, and I've marked those lines (so fill them in with your own values).
|
Fotiman
msg:4072814 | 4:22 pm on Feb 2, 2010 (gmt 0) |
// Array of Image Locations and Captions
var myImg = [
{src:"pix01.jpg", caption: ""},
{src:"pix02.jpg", caption: ""},
{src:"pix03.jpg", caption: ""},
{src:"pix04.jpg", caption: ""},
{src:"pix06.jpg", caption: ""},
{src:"pix07.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix08.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix15.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix05.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix09.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix11.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix12.jpg", caption: ""},
{src:"pix13.jpg", caption: ""},
{src:"pix14.jpg", caption: ""},
{src:"pix26.jpg", caption: ""},
{src:"pix10.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix16.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix20.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix21.jpg", caption: ""},
{src:"pix35.jpg", caption: ""},
{src:"pix22.jpg", caption: ""},
{src:"pix25.jpg", caption: ""},
{src:"pix28.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix30.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix27.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix19.jpg", caption: ""}, // INVALID CHARACTERS
{src:"pix23.jpg", caption: ""},
{src:"pix29.jpg", caption: ""},
{src:"pix32.jpg", caption: ""},
{src:"pix34.jpg", caption: ""}
],
n = myImg.length, // Number of Images
i = 0, // Current index Number
imgSrc = null, // Set this on load *****
caption = null; // Set this on load *****
// Function to Load Image
function loadImg(x) {
if (x < 0 || x >= n) { // Safety net
x = 0;
}
i = x;
// Gives "imgSrc" a Source with Number Variable
imgSrc.src = myImg[ i ].src;
// Gives "caption" DIV a content
caption.innerHTML = myImg[ i ].caption;
}
// Link Function to Switch Image Backward
function prev() {
var p = (i < 1 ? n - 1 : i - 1);
loadImg(p);
}
// Link Function to Switch Image Forward
function next() {
var n = (i >= (n - 1) ? 0 : i + 1);
loadImg(n);
}
|
|
[edited by: Fotiman at 4:31 pm (utc) on Feb. 2, 2010]
|
Fotiman
msg:4073003 | 8:31 pm on Feb 2, 2010 (gmt 0) |
I forgot to mention, I removed all of the captions while trying to get the code posted to the forum (there was a small issue earlier that has since been corrected). So be sure to put all the captions in that new array.
|
|
|
