Write exif data to span

[neil07]

I’m trying to write EXIF data to a <span> for all loaded in images.
That is working, but <span class="tag"></span> is displaying the same exif data on all spans.
The console is outputting correct info about the Artist info. It’s only not correct distributed to the span.
The idea is that every image with it’s own Artist exif data is transferred to the <span class="tag"></span>. So eventually every image gets a little text box on top of it, with this data.
I’m using the exif.js library.

My script how it looks now:

$(document).ready(function(){

    window.onload = function() {

       const row = document.getElementsByClassName('img1');
       
        for (let i = 0; i < row.length; i++) {
        console.log(row[i]);

        EXIF.getData(row[i], function() {

            myData = row[i];

            console.log(myData.exifdata.Artist);

            $('.tag').text(myData.exifdata.Artist); 

        });
} // end Array
    }; // end window.onload
}); // end document.ready

My images are loaded in <div id="mygallery"> via PHP.

<div id="mygallery">
			<?php
        $folder_path = 'images/full/'; //image's folder path
        $num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
        $folder = opendir($folder_path);
        if($num_files > 0)
        {
        	while(false !== ($file = readdir($folder))) 
        	{

        		$file_path = $folder_path.$file;
        		$file_path_thumb = $folder_path.$thumb;
        		$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
        		$files = substr($file, 0, strrpos($file, '.'));
        		if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
        		{
        			?>

                    
        			<a class="full" data-fancybox="gallery" href="<?php echo $file_path; ?>"><span class="tag"></span><img class="img1" src="images/thumb/<?php echo $files . "_thumb.". $extension; ?>">
                        </a>


        			<?php
        		}
        	}
        }
        else
        {
        	echo "the folder was empty !";
        }
        closedir($folder);

        ?>
    </div>

What I’m doing wrong?

[Strider64]

You might be in luck as I have done that for my website as I am also a photographer ->

$errors = array();
    $exif_data = [];
    $file_name = $_FILES['image']['name']; // Temporary file for thumbnails directory:
    $file_size = $_FILES['image']['size']; // Temporary file for uploads directory:
    $file_tmp = $_FILES['image']['tmp_name'];
    $thumb_tmp = $_FILES['image']['tmp_name'];
    $file_type = $_FILES['image']['type'];
    $file_ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));

    /*
     * Set EXIF data info of image for database table that is
     * if it contains the info otherwise set to null.
     */
    if ($file_ext === 'jpeg' || $file_ext === 'jpg') {
        /*
         * I don't like suppressing errors, but this
         * is the only way that I have  found out how to do it. 
         */
        $exif_data = @exif_read_data($file_tmp); 

        if (array_key_exists('Make', $exif_data) && array_key_exists('Model', $exif_data)) {
            $data['Model'] = $exif_data['Make'] . ' ' . $exif_data['Model'];
        }

        if (array_key_exists('ExposureTime', $exif_data)) {
            $data['ExposureTime'] = $exif_data['ExposureTime'] . "s";
        }

        if (array_key_exists('ApertureFNumber', $exif_data['COMPUTED'])) {
            $data['Aperture'] = $exif_data['COMPUTED']['ApertureFNumber'];
        }

        if (array_key_exists('ISOSpeedRatings', $exif_data)) {
            $data['ISO'] = "ISO " . $exif_data['ISOSpeedRatings'];
        }

        if (array_key_exists('FocalLengthIn35mmFilm', $exif_data)) {
            $data['FocalLength'] = $exif_data['FocalLengthIn35mmFilm'] . "mm";
        }

    } else {
        $data['Model'] = null;
        $data['ExposureTime'] = null;
        $data['Aperture'] = null;
        $data['ISO'] = null;
        $data['FocalLength'] = null;
    } 

This is how I do it, it’s not perfect. It works for me and I only do jpg files and do it through PHP. I don’t have it on my website now, but when I do I use Fetch (Ajax) and JSON.

A good way to get a look at the EXIF in an image is doing this

echo "<pre>" . print_r($exif_data, 1) . "</pre>";

[neil07]

Thanks for your help.

Looking at your script, I must admit I really don’t know where to begin.

Maybe I’m completely scripting this wrong, but I’m almost there with the current setup.
It just prints out the same ‘Exif Artist’ info in each of the <span class="tag"></span>.
The idea is the it reads through each individual image and write the data to every span tag for each <img>.

<a class="full" data-fancybox="gallery" href="<?php echo $file_path; ?>">
<span class="tag"></span>
<img class="img1" src="images/thumb/<?php echo $files . "_thumb.". $extension; ?>">
</a>