i'm using the jquery ubergallery for my website, i want to add a div underneath the main photos so i can add stuff (like share buttons, comments and etc) i saw the code when doing this with colorbox, but ubergallery is using colorbox with php. as i add the code not only the thumbs disappear, but the main picture doesnt show up heres the code below what am i doing wrong can someone help me please:
#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>
