使用Fancybox版本2 - 关闭第二个fancybox重新打开第一个fancybox而不是简单地关闭 [英] Using Fancybox version 2 - When Closing 2nd fancybox reopen first fancybox instead of simply closing
问题描述
使用由 http://fancyapps.com/fancybox/#support 提供的Fancybox版本2
我想从我的主页打开一个fancybox，但在第一个花式框中可以调用第二个fancybox。但是，当第二个花式框关闭。而不是简单地关闭（在角落按X或按Esc），我希望它重新打开第一个fancybox。
谢谢 - 我已经在网上搜索了一个答案，但发现了有关我的查询应用于fancybox的早期版本的答案，而不是新版本（2.0 ）...
我的代码如下：
主页 -
<！DOCTYPE html>
< head>
<！ - 添加jQuery库 - >
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js>< / script>
<！ - 添加fancyBox主JS和CSS文件 - >
< script type =text / javascriptsrc =./ source / jquery.fancybox.js>< / script>
< link rel =stylesheettype =text / csshref =./ source / jquery.fancybox.cssmedia =screen/>
< script type =text / javascript>
$（document）.ready（function（）{
/ *
简单的图片库，使用默认设置
* /
$（'。 fancybox'）。fancybox（）;
/ *
不同的效果
* /
//更改标题类型，叠加开启速度和不透明度
$（。fancybox-effects-a）。fancybox（{
helpers：{
title：{
type：'outside'
}，
覆盖：{
speedIn：500，
opacity：0.95
}
}
}）;
/ *
缩略图助手，禁用动画，隐藏关闭按钮，箭头，如果点击则滑动到下一个图库项目
* /
$（'。fancybox-thumbs'）。fancybox（{
prevEffect：'none'，
nextEffect：'none'，
closeBtn：false，
arrows：false，
nextClick：true，
helpers：{
thumbs：{
width：50，
height：50
}
}
}）;
}）;
< / script>
< a href =1stFancyBox.htmlclass =fancybox fancybox.ajax> 1st Fancy Box< / a>
< / html>
1stFancyBox.html -
< HTML>
< a href =2ndFancyBox.htmlclass =fancybox fancybox.ajax>第2个FancyBox< / a>
< / html>
2ndFancyBox.html -
< HTML>
< body>
Hellloooooooooo< / body>
< / html>
谢谢：）
一个，所以在
主要页面中有： < a href =1stFancyBox.htmlclass =fancybox1 fancybox.ajax> 1st Fancy Box< / a>
请注意，类现在是 fancybox1 ..那么这个脚本会触发第一个fancybox。
$（。fancybox1）。fancybox（）;
里面 1stFancyBox.html link
< a href =2ndFancyBox.htmlclass =fancybox2 fancybox.ajax>第2个FancyBox< / a> ;
请注意，类现在是 fancybox2
同样在主要页面中，添加脚本来触发第二个fancybox（从第一个fancybox中）：
$（。fancybox2）。fancybox（{
afterClose：function（）{
$（。 fancybox1）。trigger（click）;
}
}）;
上面的脚本会在关闭后关闭第一个无论
更新的内容，第二
Using Fancybox version 2 supplied by http://fancyapps.com/fancybox/#support
I want to open a fancybox from my main page, but within that 1st fancy box a second fancybox can be called. But when that 2nd fancy box is closed. Rather than simply closing(pressing X in the corner or by pressing Esc) it I want it to reopen the first fancybox. How do I do this?
Thank you - I have searched the internet for an answer but found answers regarding my query applying to previous versions of fancybox not the new version (2.0)...
My code is below:
Main Page-
<!DOCTYPE html>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="./source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
Different effects
*/
// Change title type, overlay opening speed and opacity
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedIn : 500,
opacity : 0.95
}
}
});
/*
Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
<a href="1stFancyBox.html" class="fancybox fancybox.ajax">1st Fancy Box</a>
</html>
1stFancyBox.html -
<html>
<a href="2ndFancyBox.html" class="fancybox fancybox.ajax">2nd FancyBox</a>
</html>
2ndFancyBox.html -
<html>
<body>
Hellloooooooooo</body>
</html>
Thanks :)
You could create two scripts, one for each link
so in the main page you have:
<a href="1stFancyBox.html" class="fancybox1 fancybox.ajax">1st Fancy Box</a>
Notice that class is now fancybox1 ... then the script tha fires the first fancybox.
$(".fancybox1").fancybox();
Inside 1stFancyBox.html you can have this link
<a href="2ndFancyBox.html" class="fancybox2 fancybox.ajax">2nd FancyBox</a>
Notice that class is now fancybox2
Also in the main page add the script that fires the second fancybox (from within the first fancybox):
$(".fancybox2").fancybox({
afterClose: function(){
$(".fancybox1").trigger("click");
}
});
The script above will fire the first fancybox after closing the second fancybox regardless the content of 2ndFancyBox.html.
UPDATE: I added a DEMO here
这篇关于使用Fancybox版本2 - 关闭第二个fancybox重新打开第一个fancybox而不是简单地关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
