花式盒子在关闭重新加载 div

Question

如果我关闭花式框，我只想重新加载一个div而不是整个页面......我已经阅读了很多关于同一问题的帖子，但任何人都为我提供了可行的解决方案。

有什么想法吗？

谢谢！

Answer 1

在指定 Fancybox 显示参数后使用 Fancybox on afterClose 函数。

您的部门：

 <div id="tree-image" class="tree-list-image"><a id="inline" href="PATH TO 
 YOUR 
 IMAGE" data-caption="YOUR IMAGE TITLE"><img src="PATH TO YOUR IMAGE" 
 alt="THIS IS AN IMAGE"/></a></div>

花式盒子脚本功能：

<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#inline").fancybox({
'opacity' : 0.4,
'autoSize' : true,      
'transitionIn'  :   'elastic',
'transitionOut' :   'elastic',
'speedIn'       :   100, 
'speedOut'      :   200, 
'overlayShow'   :   false,
'hideOnContentClick': true,
         afterClose : function( instance, current ) {
            $('#tree-image').load(document.URL +  ' #tree-image');
        }
});
});
</script>

您也可以使用 -->

window.location.reload(true);

在关闭后函数中。

当我说我不明白为什么任何一个或选项总是有效时，我是诚实的。我总是尝试一个然后另一个，在大多数情况下我很幸运。我想这与你正在使用的jQuery版本有关。

有时当我使用 fancybox 打开对话框时，我会使用相同的功能在 fancybox 关闭后重定向到另一个页面。

您可以在 https://treeco.co.za/our-trees/上看到上述演示

Answer 2

在onClosed事件中 http://fancybox.net/api 您可以重新加载div

$("#div").load("/url/to/reload");

或

 $("#div").html("refreshed content");