0

そのため、ポートフォリオを設計し、その過程で jQuery を学習しています。私が抱えている問題は、画像をフェードさせ、整列させ、うまくフェードインさせるための順序にあります。私のサイト: http://graysonearle.com/newtest/にアクセスして、最初のボックス "Frog Utopia" をクリックすると、小さなギャラリーが開きます。横のサムネイルをクリックすると、画像が入れ替わり、説明が表示されます。問題は、最初のものを 2 回クリックしなければならないことです。これに加えて、画像サイズを切り替えると (一部は長いもの、一部は太いもの)、前の画像のプロパティが保持されるため、説明が整列しません。喜んで手伝ってくれるなら、このサイトにアクセスしてください。私の言いたいことがわかるでしょう。関連するコードは次のとおりです。

$(document).ready(function() {
    // declare photo width variable
    var photo_width = 0;
    $('.chImg').click(function() {
        // get img src and chop it up       
        var srcv = $(this).attr('src');
        var sliced = srcv.slice(6);
        // return the base number of the image for correspdonding div
        // corresponding div is "d#"
        var divnum = sliced.substring(0, sliced.length - 4);
        // fade out active description div
        $(".activeDescript").each(function() {
            $(this).removeClass("activeDescript");
            $(this).fadeOut(110);
        });
        // change picture
        $("#chBox").fadeOut(110, function() {
            $("#chBox").html("<center><img src='" + sliced + "'/></center>");
        });
        // vertical align
        $("#chBox").vAlign();
        $('#chBox').waitForImages(function() {
            // wait for images before grabbing img width
            $("#chBox img").each(function() {
                photo_width = $(this).width();
                $(".description").width(photo_width);
                $("#d" + divnum).fadeIn(300);
                // make this descript active
                $("#d" + divnum).addClass("activeDescript");
            });
            $("#chBox").fadeIn(200);
        });
    });
});​

および vAlign.js:

    (function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
        });
    };
})(jQuery);
4

0 に答える 0