Hot!Ajax

  • Increase font size
  • Default font size
  • Decrease font size
  • default color
  • black color

Latest News

Gsearch

Google
Home arrow mootools arrow Mediabox中文教程
Mediabox中文教程
User Rating: / 5
PoorBest 
Wednesday, 26 September 2007

Mediabox利用mootools库，使你能够在具有lightbox效果的窗口中加载flash，视频及网页内容

本文译自http://iaian7.com/webcode/Mediabox

本站源文件下载

Mediabox利用mootools库，使你能够在具有lightbox效果的窗口中加载flash，视频及

网页内容。
升级到0.6.5版。
对IE7及其他浏览器更友好。
视频：

Mediabox能够将Youtube，Google Video，Metacafe及其它视频网站的链接嵌入到具有

lightbox效果的窗口中。

<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U"
   
rel="mediabox[480 380]">play video </a>
  

SWF

如果链接指向specific.swf并且不是来自Youtube， Google Video，Metacafe，那么你

可以直接将它嵌入到页面中，格式如下：

<a href="http://www.homestarrunner.com/tgs10.swf"
   
 rel="mediabox[550 410]">play </a>
  

FLV

如果你要加入的是flv格式的媒体，你将用到jeroen wiering's Mediaplayer或者使用

FLVplayer（你可以在mediabox.js选择你需要的）。flash播放器的控制条是隐藏的除

非你用鼠标滑过内容。

<a href="http://iaian7.com/media/2007/06/2007vfx.flv"
   
rel="mediabox[640 360]">play </a>
  

Quicktime
Quicktime影片几乎能在所有浏览器中使用，包括safari 1.5/2.0（当关闭时需要额外

的代码以实现停止回放）

<a href="http://iaian7.com/media/2007/06/2007preview.mov"
   
rel="mediabox[480 286]" title="play">play quicktime movie</a>
  

网页内容：
如果链接指向的不是上面任何一种媒体，那么将代开一个网页框架。然而框架的使用并

不像ajax那样引人注目，但是它支持表单，页面，甚至网站并且没有任何冲突，它非常

简单易用。

<a href="http://movies.yahoo.com"
   
rel="mediabox[800 600]">open Yahoo Movies </a>
   
<a href="http://www.google.com" rel="mediabox[640 360]">open

Google.com ?</a>
   
mediabox参考了Slimbox及其它lightbox的样式脚本。

 
  

脚本下载：

mediabox与Slimbox完全兼容，从链接的形式到css都非常相似，你可以共用slimbox的

css。

mediabox65.js version 0.6.5 Beta (about 13kb)
mediabox.css (this CSS also contains the necessary styling for Slimbox, see below)
mediaboxImages.zip (includes mediabox styled images used for Slimbox)

注：如果页面的其他元素使用了z-index,它们将会出现在最顶层，你可以修改css中的

z-index：z-index: 50; to #lbOverlay, 和 z-index: 51; to #lbCenter,

#lbBottomeContainer
  

安装：mediabox.js, mediabox.css, mootools.js, and swfobject.js都要被加载到页

面中。如果你还安装了slimbox，那么你只需要copy它的css

<head>
   
...
   
<link rel="stylesheet" href="/css/mediabox.css" type="text/css"
   
media="screen" />
   
...
   
<script src="/js/mootools.v1.11.js" type="text/javascript"></script>
   
<script src="/js/swfobject.js" type="text/javascript"></script>
   
<script src="/js/mediabox.js" type="text/javascript"></script>

<p>

...

 

 

</head></p>
  

打开mediabox.js你可以设置参数，大多数可以设为defaults但你必须选择使用

mediaplayer还是flvplayer播放flash，每种选择都有一段简单的代码，而且很容易配

置。
格式化链接：

<a href="link" rel="mediabox[width height]" >link text</a>
  
Comments (0)add comment

Write comment

busy
 
< Prev   Next >
[ Back ]