遠方畫廊

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. }