jquery - Custom overlay in fancybox -
i show overlay content. cannot touch title here, used. basically, i've got gallery of images not want call iframe. with, inline i'll have discreetly provide height , width (i guess), stop images resizing accordingly.
i guess, clear on requirement.
thanks, appreciated.
if understood question, create "custom overlay" content (hidden) inline
html :
<div id="mydata"> <div class="dataoverlay"></div> <div class="datatext">lorem ipsum blah, blah, blah</div> </div>
with style position :
#mydata { position: absolute; width: 100%; height: 100%; display: none; top: 0; left: 0; } #mydata .dataoverlay { position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.4; width: 100%; height: 100%; z-index: 12; } #mydata .datatext { position: absolute; top: 0; left: 0; color: #fff; font-size: 18px; z-index: 13; padding: 20px; }
then append (cloned) content .fancybox-inner
selector using beforeshow
callback :
$(".fancybox").fancybox({ beforeshow: function(){ $("#mydata") .clone(true, true) .appendto(".fancybox-inner") .show(); } });
see jsfiddle
Comments
Post a Comment