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：

// 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からPHPに$ filename変数に渡す方法は？1）ページが読み込まれたときに#mainImage画像名を取得して送信し、2）ユーザーがサムネイルをクリックするたびに.thumbnailB画像名を取得して送信します

私はたくさんの画像を持っています-画像プロパティを表示するためにJquery/PHP explodeを使用すると、データベース入力から私を救うでしょう、写真は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呼び出しを行う必要があります。したがって、マウスクリックをjqueryajax呼び出しにバインドします。

于 2012-05-27T14:31:55.887 に答える