Loading inline content using FancyBox

Question

Well  I m simply writing this post to hopefully help others that might come across the same issue   The examples on the vendor website are a little vague and I had assumed the following scenario     You have a link with a hrefn to some content s  id    lt a href   content-div  class  fancybox  gt Open Example lt  a gt    And you have a div to hold that content    lt div id  content-div  style  display  none  gt Some content here lt  div gt    Then you simply run Fancybox through a 1-liner       fancybox   fancybox      Naturally  you d think that Fancybox will copy the content and change display  none to display  block and everything will be ok   But this doesn t happen  It still loads the content but the content is hidden and you have a blank Fancybox   cry

User · Answer

Just something I found for Wordpress users,

As obvious as it sounds, If your div is returning some AJAX content based on say a header that would commonly link out to a new post page, some tutorials will say to return false since you're returning the post data on the same page and the return would prevent the page from moving. However if you return false, you also prevent Fancybox2 from doing it's thing as well. I spent hours trying to figure that stupid simple thing out.

So for these kind of links, just make sure that the href property is the hashed (#) div you wish to select, and in your javascript, make sure that you do not return false since you no longer will need to.

Simple I know ^_^

User · Answer

The way I figured this out was going through the example index html style css that comes packaged with the Fancybox installation    If you view the code that is used for the demo website and basically copy paste  you ll be fine   To get an inline Fancybox working  you will need to have this code present in your index html file      lt head gt       lt link href    fancybox jquery fancybox-1 3 4 css  rel  stylesheet  type  text css  media  screen    gt       lt script gt  window jQuery  amp  amp  document write   lt script src  jquery-1 4 3 min js  gt  lt   script gt     lt  script gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt  script gt       lt script type  text javascript  src    fancybox jquery fancybox-1 3 4 pack js  gt  lt  script gt       lt script type  text javascript  gt        document  ready function              various1   fancybox                titlePosition         inside                transitionIn          none                transitionOut         none                           lt  script gt     lt  head gt     lt body gt        lt a id  various1  href   inline1  title  Put a title here  gt Name of Link Here lt  a gt       lt div style  display  none   gt           lt div id  inline1  style  width 400px height 100px overflow auto   gt                     Write whatever text you want right here            lt  div gt       lt  div gt     lt  body gt    Remember to be precise about what folders your script files are placed in and where you are pointing to in the Head tag  they must correspond

User · Answer

The solution is very simple  but took me about 2 hours and half the hair on my head to find it   Simply wrap your content with a  redundant  div that has display  none and Bob is your uncle    lt div style  display  none  gt       lt div id  content-div  gt Some content here lt  div gt   lt  div gt    Voila

[jquery] Loading inline content using FancyBox

Examples related to jquery

Examples related to html

Examples related to css

Examples related to fancybox