Question

I’m using simple gallery script which dynamically loads image when user clicks
on thumbnail :

$(document).ready(function() {
$('.thumbnailB').live("click", function() {

$('#mainImage').hide();
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#mainImage').attr('src', i.attr('src'));
        $('#imageWrap').css('background-image', 'none');
        $('#mainImage').fadeIn();
    });
    return false; 

here is script demo : http://www.micahcarrick.com/code/jquery-image-swap/index.html

and PHP which uses filename and then explode to display image properties under image :

// this variable has to contain current image when user clicks on thumbnail
$filename  = "          "; 
$fileinfo = explode("-", $filename);
echo $filename;
?>
<BR><strong>Filesize :</strong>
<?php 
echo $fileinfo[1]; 
?>
<?php
    $resolution=$fileinfo[2]; 
    $res = explode("x", $resolution);
    ?> <BR><strong> Width : </strong><?php echo $res[0]; ?>
        <BR><strong> Height : </strong><?php echo $res[1]; ?>
</div>

HTML :

<a href="/download/thumbnail/big/Photo01-310KB-500x381-thbig.png" class="thumbnailB">
<img src="/download/thumbnail/small/Photo01-310KB-500x381-thsmall.png" alt="Image 1"/>
</a>

<a href="/download/thumbnail/big/Photo02-328KB-500x353-thbig.png" class="thumbnailB">
<img src="/download/thumbnail/small/Photo02-328KB-500x353-thsmall.png" alt="Thumbnail 2"/>
</a>

<div id="imageWrap">
<img src="/download/thumbnail/big/Photo01-310KB-500x381-thbig.png" alt="Main Image" id="mainImage"/>
</div>

How to grab image name and pass it into $filename variable from Jquery to PHP ? 1) grab and send #mainImage image name when page is loaded and then 2) grab and send .thumbnailB image name each time user clicks on thumbnail

I have a lot of images – using Jquery/PHP explode to display image properties would save me from database input, photos will be stored on Amazon S3 that’s why information(image resolution) has to be encoded into filename or database.

Answer 1

Talking to a PHP script from JavaScript is done using AJAX. So you will have to make an ajax call to your PHP script using the “filename” as the parameter.
The PHP script returns the image data which can be stored in an javascript variable and then displayed however you want it.

filename= $('#imagetag').attr('src');
$.ajax({
type: "GET",
url: "some.php",
data: { file: filename }
}).done(function( img_prop) {
//code to display the image properties 
//$('image-prop').html(img_prop);
});

For both 1) and 2) you can have to make a ajax call. So bind the mouse click to the jquery ajax call.