开发者

FancyBox not scaling to the height of inline content

I've got a link which triggers a hidden div which is supposed to show in a fancybox. The content in each hidden div is of different heights. Right now, when开发者_运维百科 the fancybox opens, the div content extends beyond the borders of the fancybox. It's not resizing for some reason.

Here is a sample of the html:

<div class="faqWrapper">
<a class="faqLink" href="#faqContent1132116">How Do I Join?</a>
<div id="faqContent1132116" class="faqBox">
<div class="fancybox_wrapper_content"><p>How Do I Join?</p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum
   sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
  Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam 
  erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere 
  sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc 
  ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu 
  dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, 
  accumsan eu, blandit sed, blandit a, eros.<br></p>
</div>
</div>

Here is the trigger code for the fancybox:

$("a.faqLink").fancybox({
    type : 'inline',
    autoScale : false,
    autoDimensions : true

Any idea how to get the box to resize. I've tried the resize function but it breaks the code. I must be implementing wrong. Here's what I've tried.

$("a.faqLink").fancybox.resize();


Is the content hidden when you open Fancybox? If so, FancyBox can't tell the size of a hidden element.


In your code above you are not closing the first div.


having a similar issue where fancybox width defaults to 300 NOT 600 on Vimeo inline.

// slideshow function 
$('a.slide').fancybox({
    'autoWidth' :   false,
    'autoResize'    :   false,
    'width'     :   600
});


  <a href="#video-1" class="slide"><img src="/site/assets/files/1025/eyho.jpg" title="video"></a>
  <div style="display:none">
     <div id="video-1">
      <iframe width="500" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://player.vimeo.com/video/61541969?color=ff0179"></iframe>
     </div>
  </div>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜