问题
I'm working with Fancybox 2.0 and I want the titlebox to appear above the image or on top of the image, not below.
Just above all content.
I tried to make the fancybox-inner style position:absolute, but then the height of the fancybox-wrap wont be set to absolute pixels.
Could someone help me achieve that?
回答1:
Best and simplest - using the helpers:
helpers : {
title : {
type: 'inside',
position : 'top'
}
}
回答2:
Add the following fancybox CSS for these elements...
.fancybox-title{position: absolute;top: 0;}
.fancybox-skin{position: relative;}
That should put the title at the top.
回答3:
This code on jsfiddle: http://jsfiddle.net/JYzqR/.
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade'
});.fancybox-title {
padding: 0 0 10px 0;
}<a rel="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/oZFno.jpg"><img src="http://i.stack.imgur.com/eZSbk.jpg" alt=""/></a>
<a rel="gallery" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/tv3kk.jpg"><img src="http://i.stack.imgur.com/IWWbG.jpg" alt=""/></a>
<!-- External Resources -->
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fancybox --><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>Read "Set title at the top" there http://fancyapps.com/fancybox/#examples
回答4:
From default Fancybox 2.0.6 CSS, replace the following:
.fancybox-title {
position: absolute;
top: -36px;
left: 0;
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-title-float-wrap {
position: absolute;
z-index: 8030;
}
This positions the header top left, where it looks best in my opinion. Here's a screengrab:
回答5:
To place the title on top, by the use of Jquery, you can manipulate the relevant CSS using the Fancybox callbacks, when the contents are loaded load, by using beforeLoad or afterLoad, and when the Fancybox gets updated, with onUpdate.
So, you have some callbacks available to best fit your needs: Link to FancyBox Docs
Lets assume that you are loading your fancybox with the code bellow, and to manipulate the title position, you can call the "onUpdate" and "afterLoad" to trigger that change:
JQUERY EXAMPLE
$(document).ready(function() {
$("#my_popup_id").fancybox({
"onUpdate" : function() {
$(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
},
"afterLoad" : function() {
$(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
}
});
});
Now, the above example places the Fancybox title on top, but if you need it outside, away from the frame, you need to set a negative value to "top", but take into consideration that the frame cannot occupy the entire screen, hence the width and height parameters at this new example:
JQUERY EXAMPLE 2
$(document).ready(function() {
$("#my_popup_id").fancybox({
"autoSize" : false,
"width" : '70%',
"height" : '70%',
"onUpdate" : function() {
$(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
},
"afterLoad" : function() {
$(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
}
});
});
Check the provided link for the documentation, specially the tab "callbacks".
EDITED:
And here it is, the Fiddle link!
NEW EDIT NOTES:
neokio pointed out a solution with just a simple tweak to the Fancybox style sheet, so, indeed for a simple title position control, it is the best approach.
The one present on this answer is useful for some more complex CSS manipulations.
EDITED: And a Fiddle with the solution presented by neokio!
回答6:
Neokio is on the right track, but I think this is a little less destructive of the original code by just adding a new class style to the stylesheet and then referencing that.
// Put at bottom of jquery.fancybox.css, change as needed
.fancybox-title-top-wrap {
position: absolute;
top: -30px;
left: 0;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.7);
border-radius: 5px;
text-shadow: 0 1px 2px #222;
color: #FFF;
padding: 2px 20px;
font-size: 16px;
}
Then just use:
helpers: { title: 'top' }
You don't lose any of the original styles, and you can keep adding styles as you need them.
回答7:
Chris Mackie's answer is the cleanest. No mucking about with afterUpload etc. The only thing you can add to push the top of the FancyBox down is the margins:
$(document).ready(function() {
$('.fancybox').fancybox({
padding : 0,
margin : [60, 60, 20, 60],
autoSize : false,
autoCenter : true,
fitToView : true,
openEffect : 'fade',
closeEffect : 'fade',
openSpeed : 100,
closeSpeed : 100,
width : 900,
height : 600
});
});
回答8:
Override fancybox's default css by either adding the below snippet after you include fancybox.css
// set modal title above container (overriding default bottom)
.fancybox-title-float-wrap {
bottom: auto;
top: -35px;
}
or, if you use a build system (use GruntJS here) with LESS, then it's as easy as doing in your fancybox-custom.less.
@import "fancybox";
along with above snippet; that way you consolidate your patches in a single place vs. scattering around your app.
回答9:
afterLoad : function() {
this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
}
Try put that code in your fancybox function. for example
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad : function() {
this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
}
});
and setting the class "logoShow" css
来源：https://stackoverflow.com/questions/10499373/fancybox-put-title-on-top-and-stay-there