标签: lightbox

启用jQuery Lightbox,弃用Lightbox 2

刚开始用Lightbox 2还是不错的,很简洁。但后来发现很多插件要用到jQuery的时候,就想着Lightbox 2能否不加载自己的库,而转用jQuery。目的就是简化博客,使加载的速度更快,更高效。最终选用的是jQuery Lightbox。当然还有其他的,但目前我找到的只有
1. Lightbox 2
2. Lightbox Plus
3. jQuery Lightbox
4. jQuery Lightbox Plus
这四种实现Lightbox显示的插件,大家也可以自己尝试。

使用Lightbox 2时,本博加载的js库
<script type=’text/javascript’ src=’https://moper.me/wp-includes/js/prototype.js?ver=1.6.1′></script>
<script type=’text/javascript’ src=’https://moper.me/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3′></script>
<script type=’text/javascript’ src=’https://moper.me/wp-includes/js/scriptaculous/effects.js?ver=1.8.3′></script>
<script type=’text/javascript’ src=’https://moper.me/wp-content/plugins/lightbox-2/lightbox-resize.js?ver=1.8′></script>

使用jQuery Lightbox时,本博加载的js库
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.4′></script>

PS:启用以后还出现了WP-PostViews Plus无法计数的毛病,但最终解决了,详情请看《总结wp-postviews不计数的解决方法

lightbox效果运用几点经验

如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现)。
1. 指定哪些条件下运用Lightbox效果
在网站的js文件中添加如下语句:
复制代码 代码如下:
$(function() {
$(‘a[@rel*=lightbox]’).lightBox();
$(‘.gallery a’).lightBox();
});
这样就决定只有在链接中添加“rel=lightbox”后,该链接才会出现lightbox效果;第二行中的’.gallery a’则是针对WordPress中原生相册,添加该句后,相册中的图片也会出现lightbox的效果了。 阅读详细 »