Menu
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.
<a href="#content-div" class="fancybox">Open Example</a> And you have a div to hold that content.
<div id="content-div" style="display: none">Some content here</div> 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*
713
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses.
Galleries are created by adding the same attribute data-fancybox value to multiple elements. For example, adding data-fancybox="gallery" attribute to multiple elements, will create a gallery from all these elements. You can also use groupAll and groupAttr options to control grouping, see these examples.
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.
<div style="display: none"> <div id="content-div">Some content here</div> </div> Voila
171
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:
<head> <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#various1").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> </head> <body> <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a> <div style="display: none;"> <div id="inline1" style="width:400px;height:100px;overflow:auto;"> Write whatever text you want right here!! </div> </div> </body> 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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
