Mar*_*rko 68 html css jquery fancybox
好吧,我只是写这篇文章,希望能帮助那些可能遇到同样问题的人.
供应商网站上的示例有点模糊,我假设了以下场景.
你有一个链接与href一些内容的链接#id.
<a href="#content-div" class="fancybox">Open Example</a>
你有一个div来保存那些内容.
<div id="content-div" style="display: none">Some content here</div>
然后你只需通过1-liner运行Fancybox.
$(".fancybox").fancybox();
当然,您认为Fancybox会复制内容并更改display: none为display: block一切都会好的.
但这不会发生.
它仍然加载内容但内容被隐藏,你有一个空白的Fancybox.*cry*
Mar*_*rko 122
解决方案非常简单,但是我头上花了大约2个半小时才发现它.
简单地包裹了你的内容(冗余) div拥有display: none和鲍勃是你的叔叔.
<div style="display: none">
<div id="content-div">Some content here</div>
</div>
瞧
我想出来的方式是通过Fancybox安装打包的示例index.html/style.css.
如果你查看用于演示网站的代码并基本上复制/粘贴,你会没事的.
要使内联Fancybox正常工作,您需要在index.html文件中包含此代码:
<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>
请记住准确地确定脚本文件放在哪些文件夹中以及在Head标记中指向的位置; 他们必须对应.