Question

我正在尝试在页面加载上显示多个fancybox对话框。我可以让一个工作，但如何让javascript循环停止，而不是打开其他对话框，直到用户关闭第一个fancybox？现在，我只看到第二个对话框。我不知道在开始时我可能需要加载多少个fancybox消息。谢谢！

这是javascript代码。（更新）

$(document).ready(
    if("0x000000000112009b"!=""){  
        tbRowId="0x000000000112009b".split(",");  
        width="300".split(",");  
        height="300".split(",");  
        $.fancybox({  
            "autoDimensions":"false",  
            "width":width[0],  
            "height":height[0],  
            "transitionIn":"none",  
            "transitionOut":"none",  
            "modal":false,  
            "hideOnOverlayClick":false,  
            "hideOnContentClick":false,  
            "enableEscapeButton":false,  
            "overlayShow":true,  
            "showCloseButton":true,  
            "href":"announce_popup.html?sid=AppjfrfijfdfHvXC&tbRowId="+tbRowId[0],  
            "onClosed":function(){  
                alert("start");  
                $.fancybox({  
                    "autoDimensions":"false",  
                    "width":width[1],  
                    "height":height[1],  
                    "transitionIn":"none",  
                    "transitionOut":"none",  
                    "modal":false,  
                    "hideOnOverlayClick":false,  
                    "hideOnContentClick":false,  
                    "enableEscapeButton":false,  
                    "overlayShow":true,  
                    "showCloseButton":true,  
                    "href":"announce_popup.html?sid=AppjfrfijfdfHvXC&tbRowId="+tbRowId[1]  
                });  
                alert("end.");  
            }  
        });  
    }  
});

Answer 1

当时只能打开一个fancyBox实例。如果您多次拨打$.fancybox({..});，则只会打开最后一个。您可以使用“afterClose”回调打开下一个回调。例如：

$.fancybox.open([{
    href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title : '1st title'
}
], {
    afterClose : function() {
        //There you can decide if you need to open next one
        $.fancybox.open(
        {
            href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
            title : '2nd title'
        });
    }
});

请参阅操作 - http://jsfiddle.net/GE7hn/

Answer 2

我不完全确定您要做什么，但如果您希望用户循环浏览每条消息，您可以提供如此处所示的rel标记来创建组：

<a class="grouped_elements" rel="group1" href="image_big_1.jpg">
<img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><src="image_small_2.jpg" alt=""/></a>   
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

$("a.grouped_elements").fancybox();

我提供的代码直接来自fancybox文档，我建议将其检出。如果您有javascript创建消息和链接，则可以轻松创建组。

如果您需要在页面加载时显示对话框，可以通过以下

轻松完成

$('.your_group_class').fancybox().trigger('click');

希望我有所帮助。

加载页面时有多个fancybox对话框。仅显示最后一个fancybox

2 个答案: