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

    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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！