使用greybox

最新推荐文章于 2019-09-24 23:50:05 发布

转载最新推荐文章于 2019-09-24 23:50:05 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/562535

文章标签：

#javascript #ViewUI

本文介绍如何使用GreyBox插件创建一个简单的图片展示项目。步骤包括：创建项目、添加图片资源、配置GreyBox支持及编写jsp文件引用图片，并通过引入必要的js和css文件实现图片的弹窗展示效果。

1.创建项目
   aboutgreybox
2.添加图片
   images
       0.jpg
       1.jpg
3.添加GreyBox支持
   greybox
4.缩写jsp文件
   index.jsp
       <a href="images/0.jpg" rel="gb_imageset[nice_pics]" title="我的相册">
           <img alt="" src="images/0.jpg">
        </a>
        <a href="images/1.jpg" rel="gb_imageset[nice_pics]" title="我的相册">
           <img alt="" src="images/1.jpg">
        </a>
5.引入js文件
   <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>
    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="static_files/help.js"></script>

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1561334