1

私はデータベースにすべての画像を保存するシンプルなタグベースの画像ギャラリーを持っています。これらの画像を表示するには、小さなphpスクリプトがあります

<?php
    include_once("config/config.php");

    $mysql_user = USER;
    $password = PWD;
    $database_host = HOST;
    $database = DB;

    mysql_connect($database_host, $mysql_user, $password) or die ("Unable to connect to DB server. Error: ".mysql_error());
    mysql_select_db($database);


    header('Content-type: image/jpeg');
    $query = "SELECT imgblob from images where id=". intval($_GET["id"]);
    $rs = mysql_fetch_array(mysql_query($query));
    //echo mysql_error();
    echo base64_decode($rs["imgblob"]);
?>

検索後、次のような画像のリストがあります

<a class="lightbox" href="showimage.php?id=1" title="" ><img src="showimage.php?id=1" /></a>

ライトボックスを使用して、クリック時に画像のサイズを変更します。したがって、画像ソースのサイズを取得する必要があります（showimage.php？id = 1）。

次のコードスニペットがあります

 $('a.lightbox').each(function() {
var img = $(this).children("img");

var theImage = new Image();
theImage.src = img.attr("src");
$(this).fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'type' : 'iframe',
'width' : theImage.width + 20,
'height' : theImage.height + 20
});
});

これらの機能は常に機能するとは限りません。多くの場合、サイズ変更画像は非常に小さいです。私はそれを修正する考えがありません。

これがサンプルギャラリーですwww.phyxius.de/projects/phx.imga/

4

1 に答える 1

1

画像サイズを取得するには、画像が読み込まれるまで待つ必要があります。

var theImage = new Image();
$(theImage).load(function () {
    $(this).fancybox({
        'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        'speedIn' : 600,
        'speedOut' : 200,
        'overlayShow' : false,
        'type' : 'iframe',
        'width' : theImage.width + 20,
        'height' : theImage.height + 20
        });
    });
});

theImage.src = img.attr("src");

率直に言って、なぜ別のものを使用しているのかまったくわかりませんImage。代わりにこれを試してください：

$('a.lightbox').each(function() {
    var $img = $(this).children("img");

    $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        'overlayShow': false,
        'type': 'iframe',
        'width': $img.width() + 20,
        'height': $img.height() + 20
    });
});​
于 2012-11-05T14:08:07.713 に答える