first attempt for item-option-overlay
This commit is contained in:
parent
d024eba878
commit
9a937a1aa2
17
css/pear.css
17
css/pear.css
@ -1,3 +1,20 @@
|
|||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.g-hover-item {
|
||||||
|
|
||||||
|
border: 1px solid #000;
|
||||||
|
position: absolute !important;
|
||||||
|
z-index: 1000 !important;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#g-place-holder {
|
||||||
|
position: relative;
|
||||||
|
visibility: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
.gallery-thumb {
|
.gallery-thumb {
|
||||||
float: left;
|
float: left;
|
||||||
padding: 3px 5px 7px 5px;
|
padding: 3px 5px 7px 5px;
|
||||||
|
43
js/pear.js
43
js/pear.js
@ -494,6 +494,49 @@ function bodyLoad(vm, bgcolor) {
|
|||||||
$('#loading').hide();
|
$('#loading').hide();
|
||||||
window.setTimeout("preFetch()", 500);
|
window.setTimeout("preFetch()", 500);
|
||||||
setKeys();
|
setKeys();
|
||||||
|
|
||||||
|
// Initialize thumbnail hover effect
|
||||||
|
$(".g-item").hover(
|
||||||
|
function() {
|
||||||
|
if(mosaicView) { return; }
|
||||||
|
// Insert a placeholder to hold the item's position in the grid
|
||||||
|
var placeHolder = $(this).clone().attr("id", "g-place-holder");
|
||||||
|
$(this).after($(placeHolder));
|
||||||
|
// Style and position the hover item
|
||||||
|
var position = $(this).position();
|
||||||
|
$(this).css("top", position.top).css("left", position.left);
|
||||||
|
$(this).addClass("g-hover-item");
|
||||||
|
// Initialize the contextual menu
|
||||||
|
$(this).gallery_context_menu();
|
||||||
|
// Set the hover item's height
|
||||||
|
$(this).height("auto");
|
||||||
|
var context_menu = $(this).find(".g-context-menu");
|
||||||
|
var adj_height = $(this).height() + context_menu.height();
|
||||||
|
if ($(this).next().height() > $(this).height()) {
|
||||||
|
$(this).height($(this).next().height());
|
||||||
|
} else if ($(this).prev().height() > $(this).height()) {
|
||||||
|
$(this).height($(this).prev().height());
|
||||||
|
} else {
|
||||||
|
$(this).height(adj_height);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function() {
|
||||||
|
if(mosaicView) { return; }
|
||||||
|
// Reset item height and position
|
||||||
|
if ($(this).next().height()) {
|
||||||
|
var sib_height = $(this).next().height();
|
||||||
|
} else {
|
||||||
|
var sib_height = $(this).prev().height();
|
||||||
|
}
|
||||||
|
if ($.browser.msie && $.browser.version >= 8) {
|
||||||
|
sib_height = sib_height + 1;
|
||||||
|
}
|
||||||
|
$(this).css({"height": sib_height, "position": "", "top": "", "left": ""});
|
||||||
|
// Remove the placeholder and hover class from the item
|
||||||
|
$(this).removeClass("g-hover-item");
|
||||||
|
$("#g-place-holder").remove();
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function preFetch() {
|
function preFetch() {
|
||||||
|
@ -40,10 +40,12 @@ $(function() {
|
|||||||
<? endif ?>
|
<? endif ?>
|
||||||
<? if ($child->has_thumb()): ?>
|
<? if ($child->has_thumb()): ?>
|
||||||
<?= $child->thumb_img(array("class" => $img_class, "id" => "thumb_$child->id", "style" => "width: 200px; height 200px;")) ?>
|
<?= $child->thumb_img(array("class" => $img_class, "id" => "thumb_$child->id", "style" => "width: 200px; height 200px;")) ?>
|
||||||
|
<? else: ?>
|
||||||
|
<span style="display: block; width: 200px; height: 200px;"></span>
|
||||||
|
<? endif ?>
|
||||||
<? if ($child->is_movie()): ?>
|
<? if ($child->is_movie()): ?>
|
||||||
<span class="p-video"></span>
|
<span class="p-video"></span>
|
||||||
<? endif ?>
|
<? endif ?>
|
||||||
<? endif ?>
|
|
||||||
<?// Begin skimming
|
<?// Begin skimming
|
||||||
if($child->is_album()):
|
if($child->is_album()):
|
||||||
$granchildren = $child->viewable()->children();
|
$granchildren = $child->viewable()->children();
|
||||||
@ -59,6 +61,7 @@ if($child->is_album()):
|
|||||||
endforeach;
|
endforeach;
|
||||||
endif;
|
endif;
|
||||||
// End skimming // ?>
|
// End skimming // ?>
|
||||||
|
<?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
|
||||||
<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify(text::limit_chars($child->title, 20)) ?> </p>
|
<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify(text::limit_chars($child->title, 20)) ?> </p>
|
||||||
<? if($child->is_album()): ?><div class="giInfo"><?= count($granchildren)?> photos</div><? endif ?>
|
<? if($child->is_album()): ?><div class="giInfo"><?= count($granchildren)?> photos</div><? endif ?>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user