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

根据您使用 prettyPhoto 的方式，您可以通过编辑 CSS 来实现您想要的。

前任：

这会将细节移到顶部

.pp_details{
    position: absolute;
}

这会调整关闭按钮的位置。

a.pp_close {
    top: -12px;
}