7自定义标题格式-lightbox样式

JavaScript脚本

函数格式title（title、currentArray、current Index、currentOpts）{return'<div id=“tip7-title”><span><a href=“javascript:；”onclick=“$.fancybox.close（）；”><img src=“/data/closelabel.gif”/></a></span>'+（title&title.length？'<b>'+title+'</b>'：''）+'Image'+（currentIndex+1）+'of'+currentArray.length+'</div>'；}$（“.tip7”）.fancybox({“showCloseButton”：false，“title位置”：“内部”，“titleFormat”：格式标题});

CSS公司

#提示7-title{text-align:左；}#提示7-titleb{display:块；margin-right:80px；}#提示7-标题跨度{float:right；}

例子

6页面加载时启动FancyBox

如果您附加了FancyBox，则可以触发单击方法

jQuery（document）.ready（function（）{$（“#your_selector”）.trigger（'click'）；});

另一种方法是使用手动调用

jQuery（document）.ready（function（）{$.花瓶(嗨</h2><p>Lorem ipsum dolor sit amet，consectetur adipiscing精英。Etiam quis mi eu elit tempora facilisis id et neque</p>'，{“autoDimensions”：false，“宽度”：350，'高度'：'自动'，“transitionIn”：“无”，“transitionOut”：“none”});});

5显示登录表单现在就试试

HTML表单示例：

<div style=“display:none”><form id=“login_form”method=“post”action=“”><p id=“login_error”>请输入数据</p><p><label for=“login_name”>登录：</label><input type=“text”id=“login_name”name=“login_name”size=“30”/></p><p>密码：<input type=“password”id=“login_pass”name=“login_pass”size=“30”/></p><p><input type=“submit”value=“Login”/></p><p><em>留空以便查看调整大小</em></p></form></div>

连接FancyBox：

$（“#tip5”）.fancybox({“滚动”：“否”，“titleShow”：false，“onClosed”：函数（）{$（“#login_error”）.hide（）；}});

简单验证；使用Ajax提交数据并显示响应

$（“#login_form”）.bind（“submit”，function（）{if（$（“#login_name”）.val（）.length<1||$（“#login_pass”）.val（）.length<1）{$（“#login_error”）.show（）；$.fancybox.resize（）；返回false；}$.fancybox.showActivity（）；$.ajax（美元）({类型：“POST”，缓存：false，url:“/data/login.php”，数据：$（this）.serializeArray（），成功：函数（数据）{$.fancybox（数据）；}});返回false；});

4显示youtube剪辑。现在就试试

如果视频的href具有参数&fs=1，则此脚本还启用全屏模式

$（“#tip4”）.点击（function（）{$.花瓶({“填充”：0，“自动缩放”：false，“transitionIn”：“无”，“transitionOut”：“无”，“标题”：this.title，'宽度'：680，‘高度’：495，'href'：this.href.replace（新RegExp（“watch\\？v=”，“i”），'v/'），“type”：“swf”，“swf”：{'wmode'：'透明'，“allowfullscreen”：“true”}});返回false；});

三。悬停时显示/隐藏标题。现在就试试

$（“#tip3”）.fancybox({“titlePosition”：“超过”，“onComplete”：函数（）{$（“#fancybox-wrap”）.hover（函数（）{$（“#fancybox-title”）.show（）；}，函数（）{$（“#fancybox-title”）.hide（）；});}});

2选择包含图像标记的所有锚定标记

$（“a:has（img）”）.fancybox（）；

替代方法-仅将Fancybox应用于那些href属性以.jpg、.png或.gif结尾的<a>标记：

$（“a[href$='.jpg']，a[href$='.png']，a[href$='.gif']”）.fancybox（）；

1从jQuery对象集合创建库

$（“a.fancybox”）.attr（'rel'，'gallery'）.fancybos（）；