如何使用ubergallery在照片下方添加div

时间：2016-12-31 01:10:03

标签： php jquery html css colorbox

我正在使用jquery ubergallery作为我的网站，我想在主要照片下面添加一个div，这样我就可以添加内容（比如共享按钮，评论等）我在使用colorbox时看到了代码，但是ubergallery正在使用带有php的colorbox。因为我添加代码不仅拇指消失，但主要图片没有出现继承人下面的代码我做错了可以有人帮助我请：

#caption-wrap {
    display: none;
}
.extra {
    background: #000;
    color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 10px;
}
/*
    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;
    -webkit-transform: translate3d(0, 0, 0);
}
#cboxWrapper {
    max-width: none;
}
#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;
    padding: 0;
    margin: 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: #000;
    opacity: 0.9;
    filter: alpha(opacity = 90);
}
#colorbox {
    outline: 0;
}
#cboxContent {
    margin-top: 20px;
    background: #000;
}
.cboxIframe {
    background: #fff;
}
#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}
#cboxLoadedContent {
    border: 5px solid #000;
    background: #fff;
}
#cboxTitle {
    position: absolute;
    top: -20px;
    left: 0;
    color: #ccc;
}
#cboxCurrent {
    position: absolute;
    top: -20px;
    right: 0px;
    color: #ccc;
}
#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;
    top: -20px;
    right: 90px;
    color: #fff;
}
#cboxPrevious {
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -32px;
    background: url(images/controls.png) no-repeat top left;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#cboxPrevious:hover {
    background-position: bottom left;
}
#cboxNext {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -32px;
    background: url(images/controls.png) no-repeat top right;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#cboxNext:hover {
    background-position: bottom right;
}
#cboxClose {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    background: url(images/controls.png) no-repeat top center;
    width: 38px;
    height: 19px;
    text-indent: -9999px;
}
#cboxClose:hover {
    background-position: bottom center;
}

<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"});
        $( function () {
            $( ".caption" ) . colorbox({
                inline: true,
                href: "#caption"
             });
         });
    });
</script>


<head>
    <title>UberGallery</title>
    <link rel="shortcut icon" href="<?php echo THEMEPATH; ?>/images/favicon.png"/>

    <link rel="stylesheet" type="text/css" href="<?php echo THEMEPATH; ?>/rebase-min.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo THEMEPATH; ?>/style.css"/>
    <?php echo $gallery->getColorboxStyles(1); ?>

    <script type="text/javascript" src="/final_cleanup/resources/colorbox/jquery-2.2.3.min.js"></script>
    <?php echo $gallery->getColorboxScripts(); ?>

    <?php file_exists('googleAnalytics.inc') ? include('googleAnalytics.inc') : false; ?>

</head>

<body>

    <!-- Start UberGallery v<?php echo UberGallery::VERSION; ?> - Copyright (c) <?php echo date('Y'); ?> Chris Kankiewicz (http://www.ChrisKankiewicz.com) -->
    <div id="galleryWrapper">
        <h1>UberGallery</h1>
        <div class="line"></div>

        <?php if($gallery->getSystemMessages()): ?>
        <ul id="systemMessages">
            <?php foreach($gallery->getSystemMessages() as $message): ?>
            <li class="<?php echo $message['type']; ?>">
                <?php echo $message['text']; ?>
            </li>
            <?php endforeach; ?>
        </ul>
        <?php endif; ?>

        <div id="galleryListWrapper">
            <?php if (!empty($galleryArray) && $galleryArray['stats']['total_images'] > 0): ?>
            <ul id="galleryList" class="clearfix">
                <?php foreach ($galleryArray['images'] as $image): ?>
                <li><a class="caption" href="<?php echo html_entity_decode($image['file_path']); ?>" title="<?php echo  $image['file_title']; ?>" rel="colorbox">
                    <div id="caption-wrap">
                      <div id="caption"><img src="<?php echo $image['thumb_path']; ?>" alt="<?php echo $image['file_title']; ?>"/>
                        <div class="extra">Content for  class "extra" Goes Here</div>
                      </div>
                    </div>
                </a>
                </li>
                <?php endforeach; ?>
            </ul>
            <?php endif; ?>
        </div>

        <div class="line"></div>
        <div id="galleryFooter" class="clearfix">

            <?php if ($galleryArray['stats']['total_pages'] > 1): ?>
            <ul id="galleryPagination">

                <?php foreach ($galleryArray['paginator'] as $item): ?>

                <li class="<?php echo $item['class']; ?>">
                    <?php if (!empty($item['href'])): ?>
                    <a href="<?php echo $item['href']; ?>">
                        <?php echo $item['text']; ?>
                    </a>
                    <?php else: ?>
                    <?php echo $item['text']; ?>
                    <?php endif; ?>
                </li>

                <?php endforeach; ?>

            </ul>
            <?php endif; ?>

            <div id="credit">Powered by, <a href="http://www.ubergallery.net">UberGallery</a>
            </div>
        </div>
    </div>
    <!-- End UberGallery - Distributed under the MIT license: http://www.opensource.org/licenses/mit-license.php -->

</body>

</html>

1 个答案:

答案 0 :(得分：0)

您应该可以在图库包装器结束后将其放置在库下添加div。就在这一行之后：

<!-- End UberGallery - Distributed under the MIT license: http://www.opensource.org/licenses/mit-license.php -->

因此，您的HTML将如下所示：

<body>

    <!-- Start UberGallery v<?php echo UberGallery::VERSION; ?> - Copyright (c) <?php echo date('Y'); ?> Chris Kankiewicz (http://www.ChrisKankiewicz.com) -->
    <div id="galleryWrapper">
        <h1>UberGallery</h1>
        <div class="line"></div>

        <?php if($gallery->getSystemMessages()): ?>
        <ul id="systemMessages">
            <?php foreach($gallery->getSystemMessages() as $message): ?>
            <li class="<?php echo $message['type']; ?>">
                <?php echo $message['text']; ?>
            </li>
            <?php endforeach; ?>
        </ul>
        <?php endif; ?>

        <div id="galleryListWrapper">
            <?php if (!empty($galleryArray) && $galleryArray['stats']['total_images'] > 0): ?>
            <ul id="galleryList" class="clearfix">
                <?php foreach ($galleryArray['images'] as $image): ?>
                <li><a class="caption" href="<?php echo html_entity_decode($image['file_path']); ?>" title="<?php echo  $image['file_title']; ?>" rel="colorbox">
                    <div id="caption-wrap">
                      <div id="caption"><img src="<?php echo $image['thumb_path']; ?>" alt="<?php echo $image['file_title']; ?>"/>
                        <div class="extra">Content for  class "extra" Goes Here</div>
                      </div>
                    </div>
                </a>
                </li>
                <?php endforeach; ?>
            </ul>
            <?php endif; ?>
        </div>

        <div class="line"></div>
        <div id="galleryFooter" class="clearfix">

            <?php if ($galleryArray['stats']['total_pages'] > 1): ?>
            <ul id="galleryPagination">

                <?php foreach ($galleryArray['paginator'] as $item): ?>

                <li class="<?php echo $item['class']; ?>">
                    <?php if (!empty($item['href'])): ?>
                    <a href="<?php echo $item['href']; ?>">
                        <?php echo $item['text']; ?>
                    </a>
                    <?php else: ?>
                    <?php echo $item['text']; ?>
                    <?php endif; ?>
                </li>

                <?php endforeach; ?>

            </ul>
            <?php endif; ?>

            <div id="credit">Powered by, <a href="http://www.ubergallery.net">UberGallery</a>
            </div>
        </div>
    </div>
    <!-- End UberGallery - Distributed under the MIT license: http://www.opensource.org/licenses/mit-license.php -->
    <div class="myNewDiv">
        This div will show content below the gallery
    </div>
</body>
相关问题
最新问题