0

我正在使用简单的画廊脚本，当用户点击缩略图时动态加载图像：

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

这是脚本演示： http: //www.micahcarrick.com/code/jquery-image-swap/index.html

和 PHP，它使用文件名然后分解以在 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>

如何获取图像名称并将其从 Jquery 传递到 $filename 变量到 PHP ？1）在页面加载时抓取并发送#mainImage图像名称，然后2）每次用户点击缩略图时抓取并发送.thumbnailB图像名称

我有很多图像 - 使用 Jquery/PHP 分解来显示图像属性将使我免于数据库输入，照片将存储在 Amazon S3 上，这就是为什么必须将信息（图像分辨率）编码到文件名或数据库中的原因。

4

1 回答 1

0

从 JavaScript 与 PHP 脚本对话是使用AJAX完成的。因此，您必须使用“文件名”作为参数对 PHP 脚本进行 ajax 调用。PHP 脚本返回可以存储在 javascript 变量中的图像数据，然后根据需要显示。

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);
});

对于 1) 和 2)，您都必须进行 ajax 调用。因此，将鼠标单击绑定到 jquery ajax 调用。

于 2012-05-27T14:31:55.887 回答