Basic application of GreyBox

GreyBox is a masking layer component developed by www.open-open.com , it can produce a nice interface after running. Similar to thinkbox, lightbox, etc.

First, let's take a look at the effect of the operation.

how about it? The effect is alright. There are many other effects.

Download Toolkit

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

Click Download to download the GreyBox toolkit (including source code, reference, demo , etc.).

Step 1: Add a page reference

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

2.Copy the folder to a new directory Demo , and create a new html file test.html in Demo .

3. Open test.html and add a reference to the file between the heads :

1 < script type = "text/javascript" > 2 var GB_ROOT_DIR = " ./greybox/ " ; // Point to the directory where greybox is located; it can be in http://xxx/ format 3

</ script >

4. Add js and css file references

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

Step 2: Add Effects

showImage

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

show gallery

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

You can also use GB_showImageSet ( collection , sequence ) to define image sets using 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

Basic application of GreyBox

Guess you like