Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display exif from image?

    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>

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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
    });

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This drives me nuts. Anyone help plese?

  • #5
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I don't see any call to the live() function in your new code. How is it you've tried my suggestion?

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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");
    });

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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() {

  • #8
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    $(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);

  • #9
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

  • #10
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    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
    •