本文演示了PIROBOX插件多种演示效果,包括文字内容、图片、视频video、iframe等多种形式。支持上一页、下一页、关闭、loading、自定义标题、拖动等功能。
引入pirobox弹出层插件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/pirobox_extended.js"></script>
<script type="text/javascript">
$(function() {
$().piroBox_ext({
piro_speed: 700,
bg_alpha: 0.5,
piro_scroll: true // pirobox always positioned at the center of the page
});
});
</script>
演示一:图片画廊
只要给a标签加上class="pirobox_gall"即可,标题则是title属性值
<ul>
<li><a href="img/27.jpg" rel="gallery" class="pirobox_gall" title="jQuery特效"><img src="img/27s.jpg" /></a></li>
<li><a href="img/29.jpg" rel="gallery" class="pirobox_gall" title="网站模板"><img src="img/29s.jpg" /></a></li>
<li><a href="img/30.jpg" rel="gallery" class="pirobox_gall" title="网站源码"><img src="img/30s.jpg" /></a></li>
</ul>
演示二:单个图片
<a href="img/32.jpg" rel="single" class="pirobox" title="素材火合作伙伴"><img src="img/32s.jpg" /></a>支持自定义标题、图片
演示三:图片url出错
<a href="img/fòòflglnnb.jpg" rel="single" class="pirobox">
<img src="img/13s.jpg" />
</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791