PDA

View Full Version : Determine source of clicked item

N'F0urnO
03-31-2007, 07:43 AM
here you have my javascript this far, i was wondering if anyone could help me. I would like to know how i can determine which picture was clicked. So i can attach another html page onto that image that shows it in full.
I need to make this as a school assignment, but we haven't learned this before, searched on google aswell, couldn't really help me... So please give me some help ;)
Thanx

// JavaScript Document

function init(){
// functie aanroepen die de thumbnails in de gallery-div plaatst
placeTn();
}

function placeTn(){
//functie aanroepen om de thumbnails in een array te steken
var arrThumbnails = new Array(19);

// met een for-lus alle thumbnails in een array steken
for(i=1;i<=20;i++){
arrThumbnails[i] = "img/"+i+"_s.jpg";
}

var gallery = document.getElementById("gallery");

// met een for-lus de items in de array overlopen om ze toe te voegen tot de tabel
for(i=1;i<=20;i++){
var src = arrThumbnails[i];
var id = "img" + i;
tImg = document.createElement("img");
tImg.setAttribute("src", src);
tImg.setAttribute("id", id);
gallery.appendChild(tImg);
var imgId = document.getElementById(id).id;
document.getElementById(id).onclick = new Function('loadImage();');
}
}

function loadImage(imgId){

}

if u would like to see the page itself, go here: www.esseveeforum.be/JSGallery/
Mr J
03-31-2007, 09:10 AM
Try this


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

onload=function placeTn(){

var gallery = document.getElementById("gallery")

for(var i=1;i<=20;i++){
thumbImage = document.createElement("img")
thumbImage.setAttribute("id", "img"+i)

thumbImage.setAttribute("src","img/"+i+"_s.jpg")

thumbImage.i=i
thumbImage.onclick = function(){loadImage(this.i)}

gallery.appendChild(thumbImage)

}
}

function loadImage(num){
document.getElementById("bigpic").src="img/"+num+"_b.jpg"
}

</script>
</HEAD>
<BODY>

<div id="gallery"></div>
<BR>
<img id="bigpic">

</BODY>
</HTML>

or this

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

arrThumbnails=[

["thumb1.jpg","bigpic1.jpg"],
["thumb1.jpg","bigpic2.jpg"],
["thumb1.jpg","bigpic3.jpg"],
["thumb1.jpg","bigpic4.jpg"],
["thumb1.jpg""bigpic5.jpg"]

]

onload=function placeTn(){

var gallery = document.getElementById("gallery")

for(var i=0;i<arrThumbnails.length;i++){
thumbImage = document.createElement("img")
thumbImage.setAttribute("id", "img"+i)
thumbImage.setAttribute("src", arrThumbnails[i][0])

thumbImage.i=i
thumbImage.onclick = function(){loadImage(this.i)}

gallery.appendChild(thumbImage)

}
}

function loadImage(num){
document.getElementById("bigpic").src=arrThumbnails[num][1]
}

</script>
</HEAD>
<BODY>

<div id="gallery"></div>
<BR>
<img id="bigpic">

</BODY>
</HTML>
N'F0urnO
03-31-2007, 11:15 AM
thanx, but now i have another "problem"

i know the following code can be written in like 3 lines instead of 20, but how? if i try it with a for-loop he only does the 'img20' instead of all the images (from 1 to 20)

document.getElementById("img1").onclick = function(){loadImage("img1")};
document.getElementById("img2").onclick = function(){loadImage("img2")};
document.getElementById("img3").onclick = function(){loadImage("img3")};
document.getElementById("img4").onclick = function(){loadImage("img4")};
document.getElementById("img5").onclick = function(){loadImage("img5")};
document.getElementById("img6").onclick = function(){loadImage("img6")};
document.getElementById("img7").onclick = function(){loadImage("img7")};
document.getElementById("img8").onclick = function(){loadImage("img8")};
document.getElementById("img9").onclick = function(){loadImage("img9")};
document.getElementById("img10").onclick = function(){loadImage("img10")};
document.getElementById("img11").onclick = function(){loadImage("img11")};
document.getElementById("img12").onclick = function(){loadImage("img12")};
document.getElementById("img13").onclick = function(){loadImage("img13")};
document.getElementById("img14").onclick = function(){loadImage("img14")};
document.getElementById("img15").onclick = function(){loadImage("img15")};
document.getElementById("img16").onclick = function(){loadImage("img16")};
document.getElementById("img17").onclick = function(){loadImage("img17")};
document.getElementById("img18").onclick = function(){loadImage("img18")};
document.getElementById("img19").onclick = function(){loadImage("img19")};
document.getElementById("img20").onclick = function(){loadImage("img20")};
Mr J
03-31-2007, 12:44 PM
It is already done in both the examples I posted at this line

thumbImage.onclick = function(){loadImage(this.i)}

Are you hard coding the image tags in the page?
N'F0urnO
04-01-2007, 04:42 AM
not sure really, i just started using Javascript in 2 months.
can u explain to me what hard coding the image tags means??
and what does that this.i thingy do?
because this is an assignment for school and i have to be able to explain every single bit of the code
Mr J
04-01-2007, 09:38 AM
In your first post you are dynamically creating the image tags using the DOM

Hard coding mean actually coding those image tags into the page


<img id="img1" src="">
<img id="img2" src="">
<img id="img3" src="">
<img id="img4" src="">
<img id="img5" src="">
<img id="img6" src="">
<img id="img7" src="">
<img id="img8" src="">
<img id="img9" src="">
<img id="img10" src="">



You can loop through those tags like this


<script type="text/javascript">

for(var i=1;i<=10;i++){

document.getElementById("img"+i).alt="img "+i

document.getElementById("img"+i).loopValue=i // current value of i

document.getElementById("img"+i).onclick = function(){alert("img"+this.loopValue)}

}

</script>



When you are dynamically assigning the onclick event you have to get the current value of i by creating a new instance each time the loop is run

document.getElementById("img"+i).loopValue=i

document.getElementById("img"+i).onclick = function(){alert("img"+this.loopValue)}


See the following link for info about the this keyword

http://www.quirksmode.org/js/this.html

and google for "this keyword"
RysChwith
04-02-2007, 08:20 AM
You might find this article helpful:

Supporting Three Event Models at Once (http://developer.apple.com/internet/webcontent/eventmodels.html)

Rys
N'F0urnO
04-05-2007, 08:42 AM
hey, i still have a little problem

http://www.esseveeforum.be/JSGallery/

when i click on a thumbnail and the big image shows up that info bar doesn't show up in IE. (it does show up in Firefox).

gallery.js:

// JS Gallery Webdesign 2: Brecht Fourneau [GALLERY]

function init(){
// functie aanroepen die de thumbnails in de gallery-div plaatst
placeTn();
}

function placeTn(){
//functie aanroepen om de thumbnails in een array te steken
var arrThumbnails = new Array(20);

//2e array aanmaken om info omtrent foto's op te slaan
var arrImgInfo = new Array();
arrImgInfo['model'] = new Array(' ','Slim_Da_Mobsta','Sarah_Chalke','Unknown','Kelly_Carlson,_Jessalyn_Gilsig','Ludacris','Kirk_Frankl in','Jonathan_Bennet','Johnnie_Shakespeare','Cobie_Smulders','Scott_Mechlowitsz,_Codie_Smulders,_Jus tin_Baldoni','Kenneth_Johnson,_Benito_Martinez','Unknown','Jennifer_Love_Hewitt','Ludacris','Marisol _Nichols','Unknown','Thrice','Howie_Handel','Nikki_Cox','Jessalyn_Gilsig');
arrImgInfo['rating'] = new Array(' ','7','8','9','8','7','8','9','8','9','8','8','9','7','7','7','8','7','8','7','9');

// met een for-lus alle thumbnails in een array steken
for(i=1;i<=20;i++){
arrThumbnails[i] = "img/"+i+"_s.jpg";
}

var gallery = document.getElementById("gallery");

// met een for-lus de items in de array overlopen om ze toe te voegen tot de gallery-div
for(i=1;i<=20;i++){
//a-element aanmaken om naar img pagina te linken
var model = arrImgInfo['model'][i];
var rating = arrImgInfo['rating'][i];
aTn = document.createElement("a");
aTn.setAttribute("href","img.htm?image=" + i + ".jpg&model=" + model + "&rating=" + rating);
aTn.setAttribute("id","aImg" + i);

//img-element aanmaken binnen het a-element
var src = arrThumbnails[i];
var id = "img" + i;
tImg = document.createElement("img");
tImg.setAttribute("src", src);
tImg.setAttribute("id", id);
tImg.setAttribute("alt","FlorianSchneiderPic"+i);
gallery.appendChild(tImg);
aTn.appendChild(tImg);
gallery.appendChild(aTn);
}
}

img.js

// JS Gallery Webdesign 2: Brecht Fourneau [IMG]
function init(){
splitsen();
}

function splitsen(){

//querystring
var QString = document.location.search;

//via substring het benodigde deel van de querystring afzonderen
var sVar = QString.substring(7,QString.length);

//sVar splitsen op & en in een array steken
var arrImgInfo = new Array();
var arrSplits = sVar.split("&");

for (i=0;i<arrSplits.length;i++){
arrImgInfo[i] = arrSplits[i].substring(arrSplits[i].indexOf("=") + 1,arrSplits[i].length);
}

placeInfo(arrImgInfo[0],arrImgInfo[1],arrImgInfo[2])
}

function placeInfo(imgSrc,imgModel,imgRating){
var imgDiv = document.getElementById("imgDiv");
var imgNr = imgSrc.substring(0,imgSrc.indexOf("."));

img = document.createElement("img");
img.setAttribute("src","img/"+imgSrc);
img.setAttribute("alt","FlorianSchneiderPic"+imgNr);
img.setAttribute("id","img");
var model = replaceCharacters(imgModel,"_"," ");
imgDiv.appendChild(img);
//imgModel = imgModel.replace("%20"," ");
document.getElementById("info").firstChild.nodeValue = "MODEL(S): " + model + " // RATING: " + imgRating + "/10";
}

function replaceCharacters(conversionString,inChar,outChar){
var convertedString = conversionString.split(inChar);
convertedString = convertedString.join(outChar);
return convertedString;
}
N'F0urnO
04-07-2007, 09:05 AM
still doesn't work in IE
Mr J
04-08-2007, 06:35 AM
Try the example in the attached zip file

I had to remove some of the larger images because of the upload limit of this forum

The example is basically the same as before except only 1 html file is needed.

Click a thumbnail to show its larger self and then click the large image to show the thumbnails
N'F0urnO
04-08-2007, 11:50 AM
thanx, was verry helpfull!
N'F0urnO
04-08-2007, 12:44 PM
www.esseveeforum.be/JSGallery

now that thing still doesn't work to make the info-bar fit the width of the pic
works fine in IE, but in firefox it only works after i clicked 2 times on the same picture

Mr J, i wanna really really thank you, you have been a real good teacher for me.
N'F0urnO
04-10-2007, 09:31 AM
somebody knows what to do?
N'F0urnO
04-13-2007, 09:01 AM
Can someone plz help me with this last thing, because i need to hand this in next week, and it looks screwed with that firefox problem...
Mr J
04-13-2007, 02:28 PM
You may find that it is this line in the img.js file that is causing the problem

document.getElementById("info").style.width = imageWidth + 20 + "px";
N'F0urnO
04-14-2007, 04:06 AM
yeah, but in IE he actually takes the imageWidth and adds 20 pixels, so the width of the bar fits the width of the picture (+20px for the border)
but in firefox that imageWidth is clearly = 0. And i don't understand why, and how i can solve this
N'F0urnO
04-14-2007, 04:31 AM
it's like firefox only knows the width after the page is loaded

FireFox only changes the width when i click on the image twice....
Verry strange.
Mr J
04-14-2007, 07:40 AM
Yes I tried it and got the same results it is as though Firefox is not getting the image size.

I did try this at the end of the placeInfo function

currentImage=new Image()
currentImage.src="img/"+imgSrc
setTimeout("document.getElementById('info').style.width = currentImage.width+20+'px'",100)

which appears to cure the problem albeit it does seem an unnecessary use of a timeout.

Maybe this is a bug in Firefox, I don't really know unless someone else can step in with some info
N'F0urnO
04-14-2007, 10:24 AM
yeah, thanx for this, i tried it and i guess it should aslo work when u refresh the page once after adding the image.
but i don't know how to refresh the page once with javascript