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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -