-
exif displayed for first image only?
Hi all,
I have a page that displays the exif info of an image.
Unfortunately it only works for the first image.
After 2 seconds you should see 2 lines:
Wait 5 seconds, then click me!
GPSLatitudetag: 51,48,7.572668393782384
Then after clicking the link this line should be added:
GPSLatitudetag: 51,48,7.495423197492163
However I get only this:
GPSLatitudetag:
No exif info for the second image.
Why?
You can download a copy for local testing here.
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>
</head>
<body>
<div id="imagediv"></div>
<div id="linkdiv"></div>
<script language="javascript">
document.getElementById('imagediv').innerHTML ="\<img src=\"001.jpg\" width=\"450px\" height=\"225\" id=\"imgA\" exif=\"true\" \/\>";
document.getElementById('linkdiv').innerHTML ="\<a href=\"#\" onclick=\"changeImg('002.jpg'); return false;\">Wait 5 seconds, then click me!\<\/a\>";
function changeImg(newimage){
document.getElementById('imagediv').innerHTML ="<img src=\""+newimage+"\" width=\"450px\" height=\"225\" id=\"imgA\" exif=\"true\" \/\>";
getexif();
} // end changeImg
function getexif(){
$("#imgA").load(function() {
setTimeout(function(){
GPSLatitudetag = $("#imgA").exif("GPSLatitude");
document.getElementById('linkdiv').innerHTML +="<br>GPSLatitudetag: "+GPSLatitudetag+"";
}, 2000); // end Timeout
}); // end load
} // end getexif
getexif();
</script>
</body>
</html>
-
You are passing the same ID to getexif. An ID must be unique to the document.
At least 98% of internet users' DNA is identical to that of chimpanzees
-
Do you mean "imgA"?
I made it unique by naming it after a part of the filename.
Still doesn't work: test2.html
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>
</head>
<body>
<div id="imagediv"></div>
<div id="linkdiv"></div>
<script language="javascript">
startimage="001.jpg";
shortfilename= startimage.substring((startimage.indexOf('.jpg')-3), startimage.indexOf('.jpg'));
alert("img id: "+shortfilename);
document.getElementById('imagediv').innerHTML ="\<img src=\""+startimage+"\" width=\"450px\" height=\"225\" id=\""+shortfilename+"\" exif=\"true\" \/\>";
document.getElementById('linkdiv').innerHTML +="\<a href=\"#\" onclick=\"changeImg('002.jpg'); return false;\">Wait 5 seconds, then click me!\<\/a\>"
function changeImg(newimage){
newshortfilename= newimage.substring((newimage.indexOf('.jpg')-3), newimage.indexOf('.jpg'));
alert("img id: "+newshortfilename);
document.getElementById('imagediv').innerHTML ="<img src=\""+newimage+"\" width=\"450px\" height=\"225\" id=\""+newshortfilename+"\" exif=\"true\" \/\>";
getexif(newshortfilename);
} // end changeImg
function getexif(id){
$("#"+id).load(function() {
setTimeout(function(){
GPSLatitudetag = $("#"+id).exif("GPSLatitude");
document.getElementById('linkdiv').innerHTML +="<br>GPSLatitudetag: "+GPSLatitudetag;
}, 2000); // end Timeout
}); // end load
} // end getexif
getexif(shortfilename);
</script>
</body>
</html>
Last edited by janmartin; 01-24-2010 at 09:24 AM.
-
-
With the help of a friend I managed to get one step closer to a working solution.
Now it shows the data twice. But its the data of the first image.
How to make it show the data of the second image?
Thanks,
Jan
P.S.:
This code works with the zip provided.
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>
</head>
<body>
<div id="imagediv">
<img src="001.jpg" width="450px" height="225" id="imgA" exif="true" onload="showexif()" \>
<p><a href="#" onclick="changeImg('002.jpg');">Wait 5 seconds, then click me!</a></p>
</div>
<p id="linkdiv"></p>
<script language="javascript">
function changeImg(newimage){
document.getElementById('imgA').src = newimage ;
} // end changeImg
function showexif() {
setTimeout(function(){
GPSLatitudetag = $("#imgA").exif("GPSLatitude");
document.getElementById('linkdiv').innerHTML += "<br>GPSLatitudetag: "+GPSLatitudetag;
}, 2000); // end Timeout
} // end showexif
</script>
</body>
</html>
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
Forum Rules
|
|
Reply With Quote
Bookmarks