entrymootools版的lightbox

lightbox是个经典的东西,造就了一种新的图片浏览方式。mootools是一个新发布的framework,现在要说的是这两个的结合品。

本来lightbox是使用Prototype + Scriptaculous的方式,不可否认Prototype是一个很好的framework,(mootools也有很多借鉴它的地方),不过这些天用下来,总觉得mootools有一种很轻逸的感觉(- -!)

转到正题,我们要做的就是mootools + ?? 做出Prototype + Scriptaculous + lightbox的效果。原作者:Christophe Beyls(可能需要代理才能访问,方正我是访问不了)

需要的东西

mootools.77 可以到mootools download页面下载,需要至少

  • Native scripts: 全部选择
  • Addons: 选一个Fx.js
  • Plugins: 选一个Window.js

然后就是那个??moobox.js使用的方式跟lightbox2一样,预览的效果在这里

entryLightbox and Hoverbox

早就发现Lokesh Dhakarlightbox的效果很酷,今天又发现另一个国外达人NathanHoverbox,纯CSS的技巧,酷。

把两个东西简单结合一下,其实花不了什么技巧,不过东西更酷了一点。

Lightbox and Hoverbox: 看效果演示 | 下载 (338kb)

Nathan向我们解释了Hoverbox的实现:

The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6, a series of * html hacks place the positioning on the containing a href.
 1