GreyBox basic application

GreyBox is www.open-open.com component development of a mask layer, can produce good interface after it runs. Similar thinkbox, lightbox and so on.

First, we can look at the effect of running.

how about it? The effect can also be right. There are many other effects of it.

Download Kit

Enter the official website: http://orangoo.com/labs/GreyBox/

Click to download, you can download GreyBox kit (including source code, reference, Demo , etc.).

The first step: Adding page references

1. Unzip the downloaded kit, you can first run example.html see the effect.

2.Copy folder to a new directory Demo , the Demo new one html file test.html .

3. Open the test.html in the head Add files between references:

1 < script type ="text/javascript" >
2 var GB_ROOT_DIR = " ./greybox/ " ; // 指向greybox所在目录;可以为http://xxx/ 格式
3 </ script >

4.添加js与css文件引用

< 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" />

第二步：添加效果

显示Image

格式:<a href="URL" title="CAPTION" rel="gb_image[]">HTML</a>

显示图片集

格式:<a href="URL" title="CAPTION" rel="gb_imageset["集名称"]">HTML</a>

也可使用GB_showImageSet(集合,序列)来使用JSON定义图片集。

            imgs = [{ caption: " 卡丁车1 " , url: " http://images.cnblogs.com/cnblogs_com/netwenchao/159931/r_http_imgload.jpg " }, { caption: " 卡丁车2 " , url: " http://images.cnblogs.com/cnblogs_com/netwenchao/159931/r_http_imgload1.jpg " }, { caption: " 卡丁车3 " , url: " http://images.cnblogs.com/cnblogs_com/netwenchao/159931/r_http_imgload3.png " }];
         </ script >

         < a href ="#" onclick ="return GB_showImageSet(imgs,1);" > 显示图片集 </ a >

显示页面：

格式：<a href="URL" title="CAPTION" rel="gb_page[WIDTH, HEIGHT]">HTML:</a>

显示页面集

格式：<a href="URL" title="CAPTION" rel="gb_pageset[WIDTH, HEIGHT]">HTML:</a>

全屏显示页面

格式：<a href="URL" title="CAPTION" rel="gb_page_fs[WIDTH, HEIGHT]">HTML:</a>

居中显示页面

格式：<a href="URL" title="CAPTION" rel="gb_page_center[WIDTH,

源代码

转载于:https://www.cnblogs.com/netwenchao/archive/2009/08/25/1553521.html

GreyBox basic application

Guess you like