jQuery display exif from image?

janmartin · 11-21-2009, 10: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/

Code:

<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, 09: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.

Code:

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

You can use this shorthand too:

Code:

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

janmartin · 11-21-2009, 10: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?

Code:

<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, 10:20 AM

This drives me nuts. Anyone help plese?

Fumigator · 11-23-2009, 05: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, 05:38 PM

Oh,

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

Code:

$(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, 05: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, 05:51 PM

Quote:

Originally Posted by Spudhead

$(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:

Code:

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

jQuery(document).ready(loadAllImages);

Spudhead · 11-25-2009, 10: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:

Code:

$("#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, 09: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):

Code:

$("#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