...

View Full Version : jQuery display exif from image?



janmartin
11-21-2009, 11:41 AM
Hi,

I need to automatically display the images exif data, but it only works after clicking the image.
Whats wrong?

(Not) working Example:
http://www.diystreetview.org/data/test/test.html
all files:
http://www.diystreetview.org/data/test/


<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>

<title>test.html</title>
</head>

<body>
<div id="imagediv">
<img src="images/00000036.jpg" width="900px" id="imgA" exif="true" />
</div>


<script>
// This cript should automatically display the exif info of the image. Without user interaction.
// However it only works when the image is clicked.
//
// EXIF Code from http://www.nihilogic.dk/labs/exifjquery/

// FAILING:
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");

// WORKS:
$("#imgA").click(
function() {
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");

} // end function
) // end click

</script>
</body>
</html>

Fumigator
11-21-2009, 10:55 PM
That's because the code is running before the page fully loads. You need to use jQuery's "ready" function, which runs only after the DOM is loaded.



$(document).ready(function(){
//put stuff here to run as soon as DOM loads
});


You can use this shorthand too:



$(function() {
//put stuff here
});

janmartin
11-21-2009, 11:16 PM
Thanks,

I added it to the page.

But it doesn't work.
Actually now the clicking thing is not working anymore.

Find the changed page here:
http://www.diystreetview.org/data/test/test.html

Any Idea whats wrong?


<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>

<title>test.html</title>
</head>

<body>
<div id="imagediv">
<img src="images/00000036.jpg" width="900px" id="imgA" exif="true" />
</div>


<script>
// This cript should automatically display the exif info of the image. Without user interaction.
// However it only works when the image is clicked.
//
// EXIF Code from http://www.nihilogic.dk/labs/exifjquery/

// FAILING:
$(document).ready(function(){
//put stuff here to run as soon as DOM loads
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");
});


// NOW FAILING TOO:
$("#imgA").click(
function() {
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");

} // end function
) // end click

</script>
</body>
</html>

janmartin
11-23-2009, 11:20 AM
This drives me nuts. Anyone help plese?

Fumigator
11-23-2009, 06:30 PM
I don't see any call to the live() function in your new code. How is it you've tried my suggestion?

janmartin
11-23-2009, 06:38 PM
Oh,

I already added it. And uploaded it.
However it doesn't help:


$(document).ready(function(){
//put stuff here to run as soon as DOM loads
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");
});

Spudhead
11-24-2009, 06:20 PM
I think your exif() code needs the image file to be fully loaded in order to read it. Since $(document).ready() doesn't wait for this, and runs only when the page DOM is loaded, it's failing. Try replacing

$(document).ready(function(){

with

$(window).bind("load", function() {

janmartin
11-24-2009, 06:51 PM
$(window).bind("load", function() {

Only works 1 out of 20 times. So the underlaying loading or timing problem is not solved.

I think the error is the jquery.exif.js file itself:
http://www.diystreetview.org/data/test/jquery.exif.js

Esp. because all the jquery examples over at http://www.nihilogic.dk/labs/exifjquery/ only work with human interaction like a click.

jquery.exif.js is human readable.
Fancy a look?

I think code execution starts at line 857:

// automatically load exif data for all images with exif=true when doc is ready

jQuery(document).ready(loadAllImages);

Spudhead
11-25-2009, 11:52 AM
Dunno. There's stuff in there that would seem to handle images not being fully loaded, so I have no idea why it's not firing. Have you tried it with different images? With several images on the page? The only thing I could suggest at the moment is that you run the exif-fetching function manually:


$("#imgA").exifLoad(function(){
$('#imagediv').append("<br/>" + $(this.)exif("GPSLatitude"));
});

but I have a feeling that all it'd give you is perhaps a better idea of where it's failing.

janmartin
01-28-2010, 10:56 AM
Hi all,

Jacob Seidelin from nihilogic was so kind to answer my question.

This is how to automatically get the exif data from an image (without clicking it):


$("#imgA").load(function() {
$(this).exifLoad(function() {
// exif data should now be ready...
});
}); // end load

jquery exif plugin info, demo and download:
http://www.nihilogic.dk/labs/exifjquery

Have fun,
Jan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum