jquery - prettyphoto ライトボックスで、X または閉じるボタンを右上に移動するにはどうすればよいですか?

Question

prettyphoto ライトボックスで、X または閉じるボタンを右上に移動するにはどうすればよいですか?

Answer 1

ドキュメントを読んだ後、markup作成時にパラメータのプロパティを書き直す必要があるようです。

そこでHTMLを取得し、好きなように書き直します。

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({ // the default markup follows
            markup: '<div class="pp_pic_holder"> \
                        <div class="ppt">&nbsp;</div> \
                        <div class="pp_top"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                        <div class="pp_content_container"> \
                            <div class="pp_left"> \
                            <div class="pp_right"> \
                                <div class="pp_content"> \
                                    <div class="pp_loaderIcon"></div> \
                                    <div class="pp_fade"> \
                                        <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
                                        <div class="pp_hoverContainer"> \
                                            <a class="pp_next" href="#">next</a> \
                                            <a class="pp_previous" href="#">previous</a> \
                                        </div> \
                                        <div id="pp_full_res"></div> \
                                        <div class="pp_details"> \
                                            <div class="pp_nav"> \
                                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                                <p class="currentTextHolder">0/0</p> \
                                                <a href="#" class="pp_arrow_next">Next</a> \
                                            </div> \
                                            <p class="pp_description"></p> \
                                            {pp_social} \
                                            <a class="pp_close" href="#">Close</a> \
                                        </div> \
                                    </div> \
                                </div> \
                            </div> \
                            </div> \
                        </div> \
                        <div class="pp_bottom"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                    </div> \
                    <div class="pp_overlay"></div>'
        });
    });
</script>

Answer 2

Depending on how you are using prettyPhoto you may be able to achieve what you are looking for by editing CSS.

EX:

This will move the details to the top

.pp_details{
    position: absolute;
}

This adjust the close button position.

a.pp_close {
    top: -12px;
}