0
Ich benutze die Jquery Ubergallery für meine Website, ich möchte ein div unter den Hauptfotos hinzufügen, so kann ich Sachen (wie share buttons, Kommentare und etc) ich sah der Code dabei mit Colorbox, aber Ubergallery verwendet Colorbox mit PHP. wie ich den Code nicht nur die Daumen verschwinden hinzufügen, aber das Hauptbild unter heres den Code zeigen tut, was mache ich falsch kann mir bitte jemand helfen:Wie kann ich ein Div unter Foto mit Ubergallery
#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>
Das ist nicht, wie ich will es, ihre getan, wie dies die colorbox verwenden, hier eine examaple http: // jsfiddle .net/UFtrK/132 /, jetzt Ubergallery verwendet Colorbox mit PHP-Codierung und es kommt anders wegen der PHP-Codierung in es brauche ich Hilfe, es zu korrigieren, so dass ich das Div in die Fotos unter jedem Foto, wenn Sie darauf klicken können –
Also, willst du ein div in der Lightbox unter der Bildunterschrift? Oder anstelle der Beschriftung? – sol
Ja, in der Lightbox unterhalb der Beschriftung, wie in dem Beispiel-Link gezeigt, den ich zur Verfügung gestellt habe –