遠方畫廊

NextGEN Gallery 2.0 更新之後中文漢化不了，自定義樣式也沒有用，選項設置樣式完全變化，建議不升級。而且這款插件的作者又開發了一款收費的，更強大的 NextGENpro 插件，所以這免費的 NextGEN Gallery 出現這麼問題都沒有解決，有點遺憾，所以一直用着 1.9 的版本。

已經找到不能漢化的原因，是 NextGEN Gallery 2.0 程序調用語言的路徑沒有修改，修改的方法有兩種：

1 、打開 nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy 目錄下的 nggallery.php，修改第 284-288 行代碼為：

  1. function load_textdomain() {
  3.     load_plugin_textdomain('nggallery', false, NGGFOLDER . '/products/photocrati_nextgen/modules/ngglegacy/lang');
  5. }

2 、第二種方法就簡單了，把 nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy 目錄下的 lang 文件夾剪貼到 nextgen-gallery 根目錄。

最終還是沒有徹底漢化，2.0 版本的改動太大，中文漢化也不完整，而且點擊圖集時進入不了圖集中，感覺問題太多就沒有折騰下去，等下一個版本有沒有修復這些問題。

（2013.11.24）

筆者一開始建站就想要有一個相冊，把自己旅行的照片和一些攝影放在網站上，增強網站個性化的同也時不時的欣賞欣賞，回憶回憶。

有很多主題集成了圖集功能，但很多一張圖片就是一片文章，所有得一張一張的添加，對於一些設計、繪畫作品，或產品的展示是很好，但對於一個主題的很多照片就不適合。這時就得用到強大的相冊插件 NextGEN Gallery 。

先來説下 NextGEN Gallery 的基本原理與圖片、圖集和相冊這三者的關係 （對於剛使用相冊的朋友比較難搞懂，筆者就是這樣）：NextGEN Gallery 的相冊結構是由圖片 （Image） 、圖集 （Gallery） 和相冊 （Album） 組成，圖集是包含一個主題的相關圖片，例如我們拍攝了一組布達拉宮的照片，就可以把這些照片放在 「布達拉宮」 這個圖集中；而相冊則包含一些相關的圖集，例如遠方畫廊中的 「騎行路上」 就把所有騎行的圖集放在這個相冊中。我們可以根據需要新建多個圖集，也可以新建多個相冊，把圖片分類好上傳到各個相關圖集中，並把圖集添加到相關的相冊中，這是 NextGEN Gallery 一個基本的原理！

WordPress 有很多的相冊插件，但 NextGEN Gallery 是筆者見過最強大的相冊插件，下面就看下 NextGEN Gallery 可以實現哪些功能：

  • 1 、提供了一個強大的引擎上傳和管理畫廊的功能，能夠批量上傳，導入圖像；
  • 2 、可以在文章和頁面的任意地方調用相冊、圖集和單獨的照片；
  • 3 、添加/刪除/重建/排序圖像縮略圖，編輯、組織成相冊；
  • 4 、 NextGEN Gallery 本身的相冊樣式不是很漂亮，插件後台提供了自定義樣式編輯器；
  • 5 、上傳圖片多種方式，可以從電腦中直接選擇圖片上傳，也可以上傳 zip 壓縮文件，筆者比較喜歡通過 FTP 客户端把圖片上傳到 NextGEN Gallery 默認文件夾下，再使用 「導入圖片目錄」；
  • 6 、內建多種圖片暗箱特效： JavaScript 效果、 Thickbox 、 Greybox 、 Lightbox ，效果很炫；
  • 7 、兩種前台顯示模式 (幻燈片和縮略圖模式)，縮略圖與幻燈片之間可以隨意切換；
  • 8 、 NextGEN Gallery 提供了三個小工具，可以在側邊欄添加圖片展示與幻燈片；
  • 9 、水印功能，輕鬆給相冊中圖片添加水印，可以使用文字或圖片水印，後台都可以設置 （但筆者還是建議在 PS 中添加好水印，因為為了減少圖片容量都輸出成 WEB 格式圖像，而在 NextGEN Gallery 中添加水印會將原本的 WEB 格式圖像成倍增加容量，小小的建議）；

更多功能等待你來發現，下面就説下 NextGEN Gallery 插件的使用：

一、安裝插件

首頁下載 NextGEN Gallery 插件，可以在 WordPress 官網下載，WordPress 網站後台插件中搜索安裝，也可以在 NextGEN Gallery 官網下載，安裝後啓用，在左側菜單中就新增了一個 「Gallery」 的菜單。

二、漢化插件

NextGEN Gallery 官方提供多國語言，所以不用擔心沒有中文版本。在 Gallery 菜單的 Overview 菜單頁面的右邊找到 Translation 這個邊欄，點擊 Download 更新中文語言包，刷新頁面就完成 NextGEN Gallery 的漢化。

三、插件菜單的功能

  • 1 、總覽

    介紹了圖集的概況，插件的相關信息，服務器的配置，最重要的是更新中文語言包；

  • 添加新的圖集、從電腦中上傳單獨的圖片或 zip 壓縮文件、導入圖片文件夾等操作；
  • 其實就像 「所有文章」 一樣，是所有圖片的列表，可以對圖集進行編輯、刪除、添加水印、重建縮略圖、導入 meta 信息，從備份中恢復等操作；
  • 添加新的相冊，可以把建立好的圖集拖放到新建好的相冊中，也可以重新編輯相冊；

  • 管理圖片的相關標籤，新建、刪除、編輯標籤，這裏的標籤與文章中的標籤是相關聯的，

    筆者

    文章中 「推薦閲讀」 上面的小圖片就是通過圖集與文章中的標籤相關聯顯示的；

    • 這裏可是 「高手雲集」 了，太多強大的功能，説幾條比較實用的吧，其實有一些筆者也沒有用過：
    • 圖集路經：圖片存儲的路徑，筆者設置為 wp-content/gallery/，你也可以設置其它目錄；
    • 使用固定鏈接：首頁得點擊下面的 「創建新的 URL 友好的圖片別名」 中的按鈕創建別名，選中 「使用固定鏈接」，後面的 「圖集別名」 可以根據需要輸入，遠方畫廊為 「gallery」；（注：使用固定鏈接時，地址欄地址顯示正常，而瀏覽器標籤中的 title 會亂碼，暫沒有找到解決的方法。）
    • 標籤與分類：設置在文章關聯圖片，近分類還是標籤，顯示圖片的多少；
    • 縮略圖：設置縮略圖的高寬與品質，這裏的最大值要改動需要修改源文件 （最後介紹）；
    • 圖片：圖片的一些簡單設置，高寬與品質等；
    • 圖集：圖片顯示的數量，默認是以縮略圖顯示還是幻燈片，排列順序等；
    • 效果：設置圖片暗箱效果，不顯示、 Thickbox 、 Lightbox 、 Highslide 、百葉窗、自定義，有些效果是需要安裝相應的插件；
    • 水印：設置簡單明瞭，效果也不錯，但唯一不好的是生成的圖片容量比較大；
    • 幻燈片：幻燈片的參數設置，背影音樂的添加，以及 JW Image Rotator 插件的安裝；

  • NextGEN Gallery 提供的自定義樣式編輯器，

    重新定義了圖集的樣式；

  • 可以為不同的角色設置不同的權限，其實個人網站沒有必要設置；
  • NextGEN 的版權、開發團隊，贊助人員與貢獻人員的介紹；
  • 重置選項與卸載插件數據。

四、 NextGEN Gallery 的使用

  • 1 、新建圖集與上傳圖片，有四種方法
    a 、上傳圖集：前提是要有已建立好的圖集，添加上傳的圖片，選擇好圖集，然後上傳圖片；
    b 、新建圖集：輸入圖集名稱，新增圖集，再編輯圖集；
    c 、上傳 ZIP 壓縮文件：與 a 方法是一樣的，這裏只是把圖片打包上傳或引入一個 zip 鏈接導入；
    d 、導入圖片目錄：這是筆者一直用的方法。通過 FTP 客户端把圖集或圖片上傳到 NextGEN Gallery 默認路徑中，點擊 「瀏覽」 就可以看到 NextGEN Gallery 默認路徑的所有圖集，選擇新的圖集，導入目錄即可；
  • 2 、編輯圖集，通過上面四種導入圖集的方法，頁面中都會出現 「編輯圖集」 的提示，進入 「編輯圖集」 頁面中，就是圖集的一些相關設置，一目瞭然，完成後保存。需要注意的是：圖集中的標籤與文章中的是相關聯的！
  • 3 、把圖集添加到相冊中，在相冊菜單中，新增相冊，選擇要添加圖集的相冊，把圖集拖放到相冊中，就新增了一個相冊；
  • 4 、到現在還沒有完成，我們需要把相冊插入到頁面中，在編輯文章與頁面的編輯器上一欄的最右邊有一個圖片的按鈕，點開後，一目瞭然，插入相冊、圖集與圖片的方式是一樣的，但顯示的效果不同，筆者覺得還是自己去試試，這裏就不寫出插入的相冊、圖集與圖片的代碼。
遠方畫廊中插入到頁面中的都是精簡的相冊，因為完整的相冊與博客文章列表一樣，在縮略圖右邊顯示完整的圖集描述，進入圖集中的效果與精簡的相冊是一樣的，既然是相冊就得像相冊，看個人喜好。

五、幻燈片的設置

1 、幻燈片的播放需要用到 JW Player 這個 flash 播放器，我們在 Longtail 這個網站下載 JW Player，下載步驟 (嫌麻煩的可以在百度網盤下載，不保證是最新版本)：

  • a 、進入 Longtail 官網，點擊 「GET JW PLAYER」 按鈕
  • b 、輸入 Email，點擊 「GET JW PLAYER FREE」 按鈕，系統會發一封郵件到你輸入的郵箱，查看你的郵件
  • c 、打開郵箱查看郵件，在郵件中點擊 「Click to Go to Your Account」 這個鏈接，在新的頁面輸入密碼，確認後，頁面右側就出現了 「JW Player」 播放器的下載鏈接，點擊 「Download JW Player」 下載

2 、下載完成後，把 jwplayer.flash.swf 文件解壓並放到網站任意目錄下，打開網站後台，在 「圖集」——「選項」 菜單中，找到 「幻燈片」 選項，勾選 「為所有支持 Flash 的設備集成 Flash 效果的幻燈片」 選項，然後在 「Path to the JW Image Rotator (URL)」 中輸入 jwplayer.flash.swf 文件的完整路徑，例如：https://yfdxs.com/wp/jwplayer.flash.swf，點擊搜索系統會把 jwplayer.flash.swf 加載進來。幻燈片的播放就設置好了，到圖集中點擊 「幻燈片模式」 試試看。

3 、幻燈片可以播放，「音樂」，對，背景音樂是必須的，依然在 「幻燈片」 選項中，找到最下面的 「背景音樂 (URL)」 輸入框，輸入音樂文件的鏈接地址，保存，一個完美的幻燈片就設置完成。

4 、看着自己拍攝的漂亮圖像一張張的切換，聽着自己喜歡的音樂，是不是有點成就感？享受吧！

六、自定義設置

NextGEN Gallery 默認的樣式不是每個人都會喜歡，我們可以自己重新設計，以下是筆者重新設置的地方：

1 、縮略圖的大小！插件默認的縮略圖最大值為 75*75，很多時候我們需要更大的縮略圖顯示，而後台提供的最大的縮略圖參數是在源文件中設置好的，這時只能修改源文件，打開插件目錄下的 admin 文件夾下的 install.php 文件

查找 Thumbnail Settings，下面兩行就是縮略圖最大值的參數，根據需要設置縮略圖的最大值：

  2. $ngg_options['thumbwidth']          = 150;
  3. $ngg_options['thumbheight']         = 150;

2 、圖集顯示的樣式！遠方畫廊設置的樣式如下 （不喜歡可以自己重新設計），找到插件 CSS 文件夾下的 nggallery.css 文件，也可以在後台 「圖集」——「樣式」——「樣式編輯器」 中，選擇 「Default Styles」 進行編輯

查找註釋：Album Styles Compact，把這個註釋下的所有 CSS 代碼替換成下面的樣式就跟遠方畫廊的一樣了：

  1. .ngg-album-compact {
  2.     float:left;
  3.     height:240px;
  4.     padding:0 8px !important;
  5.     margin:0px !important;
  6.     text-align:left;
  7.     width:180px;
  8. }
  9. .ngg-album-compactbox {
  10.     height:160px;
  11.     margin:0 0 16px !important;
  12.     padding:12px 0 0 0 !important;
  13.     width:160px;
  14. }
  15. .ngg-album-compactbox .Thumb {
  16.     background: none repeat scroll 0 0 #fff;
  17.     border: 1px solid #FFFFFF;
  18.     border-radius: 4px;
  19.     box-shadow: 0 1px 0 #D0D0D0, 0 4px 0 #D7D7D7, 0 5px 0 #C1C1C1, 0 6px 4px rgba(0, 0, 0, 0.6);
  20.     padding: 6px;
  21. }
  22. .ngg-album-compactbox .Thumb:hover {
  23.     border: 1px solid #f60;
  24.     background-color:#f2f2f2;
  25. }
  26. .ngg-album-compact h4 {
  27.     font-weight:bold;
  28.     margin-bottom:0px;
  29.     margin-top:0px;
  30.     width:150px;
  31. }
  32. .ngg-album-compact p {
  33.     font-size:12px;
  34. }

3 、圖片顯示的樣式！進入到圖集中，圖片的樣式與圖集不一樣，還是在 nggallery.css 中修改

a 、查找：ngg-gallery-thumbnail img，把下面代碼:

  1. .ngg-gallery-thumbnail img {
  2.     background-color:#FFFFFF;
  3.     border:1px solid #A9A9A9;
  4.     display:block;
  5.     margin:4px 0px 4px 5px;
  6.     padding:4px;
  7.     position:relative;
  8. }
  10. .ngg-gallery-thumbnail img:hover {
  11.     background-color: #A9A9A9;
  12. }

替換為：

  1. .ngg-gallery-thumbnail img {
  2.     background: none repeat scroll 0 0 #FFFFFF;
  3.     border: 1px solid #FFFFFF;
  4.     border-radius:4px;
  5.     box-shadow: 0 1px 0 #D0D0D0, 0 4px 0 #D7D7D7, 0 5px 0 #C1C1C1, 0 6px 4px rgba(0, 0, 0, 0.17);     padding: 6px;
  6. }
  7. .ngg-gallery-thumbnail img:hover {
  8.     background-color: #f2f2f2;
  9.     border:1px solid #F60;
  10. }

b 、查找 ngg-gallery-thumbnail-box，把下面代碼：

  1. .ngg-gallery-thumbnail-box {
  2.     float: left;
  3. }

替換為：

  1. .ngg-gallery-thumbnail-box {
  2.     float: left;
  3.     margin: 12px;
  4. }

4 、按鈕樣式！在圖集中有 「圖片列表模式」 與 「幻燈片模式」 的切換按鈕，默認是文字，我們給它添加一個按鈕：

查找 slideshowlink，把下面代碼：

  1. .slideshowlink {
  2.     margin-left:10px;
  3. }

替換為：

  1. .slideshowlink{
  2.     width: 960px;
  3.     margin-bottom: 12px;
  4. }
  5. .slideshowlink a{
  6.     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  7.     width: 120px;
  8.     border: 2px solid #fff;
  9.     padding: 2px 20px;
  10.     color: #f8f8f8 !important;
  11.     letter-spacing: 1px;
  12.     line-height: 32px;
  13.     background-color: #1E8DCC;
  14.     background-image:  url(../images/button_gradient.png);
  15.     background-repeat: repeat-x;
  16.     display: block;
  17.     text-align: center;
  18.     margin: 0 auto;
  19. }
  20. .slideshowlink a:hover{
  21.     background-color: #3275a8;
  22. }