Javascript 将类似facebook的按钮添加到UberGallery中的jQuery colorbox

我正在使用UberGallery，并试图将类似facebook的按钮添加到jQuery colorbox中。据我所知，这里是：

（你可以看到fb插件的顶部）

然后，如果我按ctrl+f，编写测试（正如我所做的

test

），然后按enter键，我将获得想要的正常视图：

问题是：我需要在css中做什么更改才能使colorbox在Begining处拉伸（在colorbox

OnComplete

函数上）？

colorbox.css（它是UberGallery的默认设置（未更改））

colorboxScripts.php（稍作更改）

是的，我已经阅读并尝试了这些线程：

---

你能在问题中插入截图而不是仅仅提供链接吗？我需要至少10个链接才能做到这一点。

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

<script type="text/javascript" src="<?php echo $path; ?>"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5",
            onComplete: function() {
                $("#cboxContent").append('<div id="extra-info">test<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=673146712707892" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe></div>');
            }
        });
    });
</script>

/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

html {
    background-color: #222;
    font-size: 100%;
}

body {
    color: #333;
    font-family: Tahoma, Helvetica, Arial, sans-serif;
    font-size: .8em;
}

#galleryWrapper {
    background-color: #FFF;
    margin: 20px auto;
    padding: 3px;
    width: 1000px;
}

h1 {
    background-color: #000;
    color: #FFF;
    font-size: 1.6em;
    font-weight: bold;
    margin: 0 0 3px;
    padding: 8px;
}

#galleryListWrapper {
    /* NULL */
}


/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#galleryList {
    margin: 0;
    padding: 0 4px;
}

#galleryList li {
    display: inline-block;
    float: left;
    list-style: none;
    margin: 5px 5px;
    padding: 0;
}

#galleryList li a {
    background-color: #000;
    border: 4px solid #DDD;
    display: block;
    padding: 1px;
}

#galleryList li a:hover {
    border-color: #DA8600;
}

#galleryList li a img {
    border: none;
}

/* -------------------------------------------------------------------------- */
/* -----| GALLERY FOOTER |--------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#galleryFooter {
    background-color: #000;
    color: #999;
    margin-top: 3px;
    padding: 8px;
}

#credit {
    float: right;
    font-size: .95em;
    margin: 4px 0;
}

#galleryFooter #credit a {
    color: #999;
}

#galleryFooter #credit a:hover {
    color: #DA8600;
}


/* ---------------------------------------- */
/* ----|  PAGINATION  |-------------------- */
/* ---------------------------------------- */

#galleryPagination {
    color: #FFF;
    float: left;
    font-size: .95em;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

#galleryPagination li {
    border: 1px solid transparent;
    display: block;
    float: left;
    list-style: none;
    margin-right: 1px;
}

#galleryPagination li:hover {
    background-color: #FFF;
}

#galleryPagination li.title {
    background: transparent url(../../page_white_stack.png) no-repeat left center;
    border: 1px solid transparent;
    font-weight: normal;
    padding: 3px 6px 3px 22px;
}

#galleryPagination li a, #galleryPagination li a:visited {
    color: #FFF;
    display: block;
    padding: 3px 6px;
    text-decoration: none;
}

#galleryPagination li:hover a {
    color: #000;
}

#galleryPagination li.current {
    background-color: #DA8600;
    color: #000;
    font-weight: bold;
    padding: 3px 6px;
}

#galleryPagination li.inactive {
    background-color: transparent;
    color: #999;
    border: 1px solid transparent;
    display: block;
    padding: 3px 6px;
}


/* ---------------------------------------- */
/* ----|  SYSTEM MESSAGES  |--------------- */
/* ---------------------------------------- */

#systemMessages {
    margin: 0;
}

#systemMessages li {
    background-color: #DDD;
    color: #000;
    line-height: 1.4em;
    list-style: none;
    margin-bottom: 6px;
    padding: 5px;
    text-align: center;
    text-shadow: none;
}

#systemMessages li.notice {
    background-color: #DDD;
    color: #FFF;
}

#systemMessages li.success {
    background-color: #070;
    color: #FFF;
}

#systemMessages li.error {
    background-color: #DA8600;
}


/* ---------------------------------------- */
/* ----|  MISCELLANEOUS  |----------------- */
/* ---------------------------------------- */

#errorMessage {
    background-color: #FFF;
    display: block;
    line-height: 1.4em;
    margin: 20px;
    padding: 20px;
    text-align: center;
}

#cboxWrapper {
    text-shadow: none !important;
}

#cboxCurrent {
    display: none !important;
}

#cboxTitle {
    font-size: 1em !important;
}

#extra-info {
    position: relative; display: inline-block; bottom:4px; left:0; text-align:center; width:100%; color:#949494;
}