使用Fancybox显示每个div的特定内容,

时间:2012-08-23 17:23:22

标签: javascript jquery fancybox

我正在尝试使用fancybox为每个div加载特定的兄弟。

E.g:

<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>

我尝试使用属性Content进行配置,但没有得到它,是否可以为每个特定项目隐藏每个?

2 个答案:

答案 0 :(得分:4)

您可以使用以下代码:

$(function(){
   $("div.pop-ups span").click(function(){
      $.fancybox({ content: $(this).parent().next().html() });
   });
});

这将显示fancybox中相关div的内容。

答案 1 :(得分:1)

您可以调用此函数在fancybox中打开一些特定的div内容。

    function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection 
    {
        $(document).ready(function ()
        {
            $.fancybox.open(
                {
                    href: divtoopen
                }
                );
        }
        );
    }