快捷導(dǎo)航

WordPress 照片lightbox效果的運(yùn)用幾點(diǎn)

更新時(shí)間：2009年06月22日 13:29:56 作者：

應(yīng)該大家都知曉lightbox這類燈箱效果了，它一般更多地被運(yùn)用在網(wǎng)站照片的顯示上。當(dāng)然還有更推廣的應(yīng)用，如facebox這種更漂亮全面的效果。

如果你的網(wǎng)站上已經(jīng)使用了lightbox這類效果，或者下面的幾點(diǎn)運(yùn)用經(jīng)驗(yàn)?zāi)阋矔?huì)覺合適（前提是使用JQuery實(shí)現(xiàn)）。
1. 指定哪些條件下運(yùn)用Lightbox效果
在網(wǎng)站的js文件中添加如下語句：

復(fù)制代碼代碼如下:

$(function() { 
$('a[@rel*=lightbox]').lightBox(); 
$('.gallery a').lightBox(); 
}); 

這樣就決定只有在鏈接中添加“rel=lightbox”后，該鏈接才會(huì)出現(xiàn)lightbox效果；第二行中的'.gallery a'則是針對(duì)WordPress中原生相冊(cè)，添加該句后，相冊(cè)中的圖片也會(huì)出現(xiàn)lightbox的效果了。
2. 自動(dòng)添加rel=lightbox屬性
因?yàn)樵谏鲜龆x中只有帶“rel=lightbox”的鏈接才會(huì)有效果，一般我們是需要對(duì)每個(gè)上傳圖片都手動(dòng)添加“rel=lightbox”這一句。但這樣顯得麻煩，我們可以讓它自動(dòng)針對(duì)帶鏈接的圖片自動(dòng)添加。
首先為每一個(gè)帶圖片的p段落自動(dòng)添加一個(gè)樣式：
$("#content p:has(img)").addClass("imgbg");
比如上面一句就是指定在#content這個(gè)區(qū)域內(nèi)，只要段落中帶有img的話，則添加樣式“imgbg”，使其原無樣式的p段落變?yōu)?lt;p class="imgbg">的帶樣式了；
然后對(duì)<p class="imgbg">這一段中的鏈接自動(dòng)添加“rel=lightbox”屬性：

復(fù)制代碼代碼如下:

$(".imgbg a").attr({ 
rel: "lightbox" 
}); 

經(jīng)過上面兩部步，所有在文中帶鏈接的圖片就會(huì)自動(dòng)執(zhí)行l(wèi)ightbox的效果了。
3. 選擇性地加載lightbox
我們沒有必要全站加載lightbox的效果。一般來說我們是在單獨(dú)的文章頁面中才用到這種效果。所以我們可以把lightbox的js代碼單獨(dú)出來，然后在WordPress中header.php中這樣設(shè)置：

復(fù)制代碼代碼如下:

<?php if ( is_single() ) : ?> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script> 
<?php endif ?> 

更進(jìn)一步，如果你想對(duì)只有照片的文章才執(zhí)行該效果，則你可以準(zhǔn)確地只為標(biāo)有“照片”標(biāo)簽的文章才加載lightbox，設(shè)置改為：

復(fù)制代碼代碼如下:

<?php if ( is_single() && has_tag('照片') ) : ?> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js.php"></script> 
<?php endif ?> 

上面幾點(diǎn)就是我對(duì)lightbox的運(yùn)用了，希望對(duì)各位有所幫助啦。

您可能感興趣的文章: