0

ここに私が参照しているページへのリンクがあります：

http://ellen-paul.com/interiorpage3_new2.html

画像を中央に配置するには、左 50% に絶対配置し、画像幅の半分の負のマージンを指定するか、margin: auto; を使用します。画像は固定幅ではないため、Javaを使用しないこれらのソリューションはどちらも機能しません...

そこで、メイン画像とサムネイルで構成されるシンプルな JavaScript 画像ビューアを作成しました。サムネイルがクリックされると、JavaScript はメインの画像をサムネイルに表示されている画像に次のように置き換えます。

 $("#largeimage").attr('src','images/interiorcontents3/1.JPG');

メイン画像を中央に配置するために、自動マージンを持つ「testcenter」という div に配置しました。画像はすべて同じ幅ではないため、#testcenter の幅は、メイン画像の幅を検出する JavaScript によって設定され、その変数をその親divの幅にします。

サムネイルを最初にクリックしたときはコードが機能しませんが、それらすべてを数回クリックするか、1 つを 2 回クリックすると、画像が適切に中央に配置されます。非常にグリッチです。私はJavaを学びながら学んでいるので、センタリングについてこれが最もばかげた方法である可能性があることを知っています.何か提案はありますか?

これが私が書いた Java です。「.zoomy」が含まれる行がいくつか表示されます。これらは虫眼鏡スクリプト用です。

HTML

<div id="imagegallery">

    <div id="testcenter">


<span id="hoverpad">
<span class="moreimages">more images</span>
<div id="thumbscolbg"></div>
<div id="thumbnailscol">

    <img src="images/interiorcontents3/3_1.jpg" class="verticalthumbs" id="imgbutton1">
    <img src="images/interiorcontents3/3_2.jpg" class="verticalthumbs" id="imgbutton2">
    <img src="images/interiorcontents3/3_3.jpg" class="verticalthumbs" id="imgbutton3">
    <img src="images/interiorcontents3/3_4.jpg" class="verticalthumbs" id="imgbutton4">
    <br /><br />

</div>
</span>


    <a href="images/interiorcontents3/2.JPG" class="zoom">
    <img src="images/interiorcontents3/2.JPG" id="largeimage">
    </a>

ジャバスクリプト

$("#imgbutton1").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/1.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare:     false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });

});

$("#imgbutton2").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/2.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton3").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/3.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton4").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/4.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});


$(window).load(function(){
var imagewidth = $("#largeimage").width();
var textwidth = $(".projecttext").width();
$('#testcenter').width(imagewidth);

if ($('#largeimage').width() < 500) {
    $('#bottomborder').width(textwidth);
    $('#right').right(30);
} else {
$('#bottomborder').width(imagewidth);
$('.projecttext').width(imagewidth);
}
});
4

2 に答える 2

0

ブラウザはサイズを認識する前に画像をダウンロードする必要があるため、数回後に機能します。数回クリックすると、画像がキャッシュされ、それが機能し始める理由です。

最初に大きな画像をプリロードするか、onclick で行う場合は、画像が配置されるまで待ってから中央に配置してください。

$('<img/>')[0].src = 'img_url.png' // <-- this would cache/preload your img
于 2013-05-22T18:53:40.193 に答える
0

%50 の左の配置を使用して、画像サイズを取得し、それを 2 で割り、.css で余白を追加することができます。ウィンドウ サイズよりも大きくならないように、画像にも最大幅を追加することをお勧めします。

$('#imagediv').css('marginLeft',-( imagewith / 2));
于 2013-05-22T19:13:38.423 に答える