首页 > 特效插件 > 表格弹出层 >  jQuery fancybox弹出层——jQuery弹出层插件正文

jQuery fancybox弹出层——jQuery弹出层插件

特效介绍
jQuery fancybox弹出层插件

    jQuery fancybox弹出层插件,非常漂亮的一款弹出层插件,鼠标移动到图片上,会显示黑色半透明遮罩,遮罩上面会显示图片的详细信息。点击图片,会弹出带关闭按钮和左右组图浏览按钮,可以实现整个页面所有使用了此插件图片的浏览,本插件还集成了一个按钮插件,如果需要的话加入即可,非常方便。本插件兼容IE8+和其他浏览器。

使用方法
1、在您的html页面的head区域引入下面的css文件、jQuery库、fancybox插件。
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/application.js"></script>
2、对需要应用此插件的图片进行如下包装:
<!--图片外面包裹一层a,href为图片地址,class为"fancy"-->
<a href="img/kroko-full.gif" class="fancy" rel='webdesign' title='Admin template for themeforest'>
    <!--图片地址-->
    <img src="img/kroko.gif" alt="Kroko Admin Theme">
    <!--鼠标移动上去显示的遮罩层-->
    <div class="overlay">
        <!--图片标题-->
        <div class="title">
            Kroko Admin Theme
        </div>
        <!--图片描述-->
        <div class="slogan">
            Themeforest template
        </div>
    </div>
</a>
<!--额外的按钮,如果不需要,下面的div可以删除-->
<div class="details">
    <a href="###" class="button">Buy me</a>
</div>