DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> WordPress 照片lightbox效果的運用幾點
WordPress 照片lightbox效果的運用幾點
編輯:JQuery特效代碼     
如果你的網站上已經使用了lightbox這類效果,或者下面的幾點運用經驗你也會覺合適(前提是使用JQuery實現)。
1. 指定哪些條件下運用Lightbox效果
在網站的js文件中添加如下語句:
代碼如下:
$(function() {
$('a[@rel*=lightbox]').lightBox();
$('.gallery a').lightBox();
});

這樣就決定只有在鏈接中添加“rel=lightbox”後,該鏈接才會出現lightbox效果;第二行中的'.gallery a'則是針對WordPress中原生相冊,添加該句後,相冊中的圖片也會出現lightbox的效果了。
2. 自動添加rel=lightbox屬性
因為在上述定義中只有帶“rel=lightbox”的鏈接才會有效果,一般我們是需要對每個上傳圖片都手動添加“rel=lightbox”這一句。但這樣顯得麻煩,我們可以讓它自動針對帶鏈接的圖片自動添加。
首先為每一個帶圖片的p段落自動添加一個樣式:
$("#content p:has(img)").addClass("imgbg");
比如上面一句就是指定在#content這個區域內,只要段落中帶有img的話,則添加樣式“imgbg”,使其原無樣式的p段落變為<p class="imgbg">的帶樣式了;
然後對<p class="imgbg">這一段中的鏈接自動添加“rel=lightbox”屬性:
代碼如下:
$(".imgbg a").attr({
rel: "lightbox"
});

經過上面兩部步,所有在文中帶鏈接的圖片就會自動執行lightbox的效果了。
3. 選擇性地加載lightbox
我們沒有必要全站加載lightbox的效果。一般來說我們是在單獨的文章頁面中才用到這種效果。所以我們可以把lightbox的js代碼單獨出來,然後在WordPress中header.php中這樣設置:
代碼如下:
<?php if ( is_single() ) : ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
<?php endif ?>

更進一步,如果你想對只有照片的文章才執行該效果,則你可以准確地只為標有“照片”標簽的文章才加載lightbox,設置改為:
代碼如下:
<?php if ( is_single() && has_tag('照片') ) : ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js.php"></script>
<?php endif ?>

上面幾點就是我對lightbox的運用了,希望對各位有所幫助啦。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved