WordPress相册插件NextGEN Gallery的使用

发表评论

 

文章目录

  • 1、安装插件
  • 2、汉化插件
  • 3、菜单介绍
  • 4、插件使用
  • 5、幻灯片设置
  • 6、自定义设置

NextGEN Gallery 2.0更新之后中文汉化不了，自定义样式也没有用，选项设置样式完全变化，建议不升级。而且这款插件的作者又开发了一款收费的，更强大的NextGENpro插件，所以这免费的NextGEN Gallery出现这么问题都没有解决，有点遗憾，所以一直用着1.9的版本。

（2013.08.01）

已经找到不能汉化的原因，是NextGEN Gallery 2.0程序调用语言的路径没有修改，修改的方法有两种：

1、打开nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy目录下的nggallery.php，修改第284-288行代码为：

  1. function load_textdomain() {   
  2.   
  3.     load_plugin_textdomain('nggallery', false, NGGFOLDER . '/products/photocrati_nextgen/modules/ngglegacy/lang');   
  4.   
  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. // Thumbnail Settings   
  2. $ngg_options['thumbwidth']          = 150;                          // Thumb Width   
  3. $ngg_options['thumbheight']         = 150;                          // Thumb height  

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

效果可以查看远方画廊
nextgen-gallery1.9远方的雪山修改版本下载（2013-10-17）提取码为：50a3
nextgen-gallery1.9远方的雪山修改版本下载（2014-01-22）提取码为：4pd7。
两个版本没有多大的区别，第一个版本的画框样式是3D效果，第二个版本的画框样式与远方的雪山现在的样式一样，而且按钮也做了修改。

NextGEN Gallery还有很多强大的功能，没有深入的使用，等待你的发现，在使用过程中有什么问题可以给我留言。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。