WordPress

WordPress相册插件NextGEN Gallery的使用

萨龙龙萨龙龙 WordPress 11 年前
11.20W 101
LensNews

远方画廊
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、提供了一个强大的引擎上传和管理画廊的功能，能够批量上传，导入图像；
  • 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、总览

    介绍了图集的概况，插件的相关信息，服务器的配置，最重要的是更新中文语言包；

  • 2、新增图集/图片

    添加新的图集、从电脑中上传单独的图片或zip压缩文件、导入图片文件夹等操作；

  • 3、管理图集

    其实就像“所有文章”一样，是所有图片的列表，可以对图集进行编辑、删除、添加水印、重建缩略图、导入meta信息，从备份中恢复等操作；

  • 4、相册

    添加新的相册，可以把建立好的图集拖放到新建好的相册中，也可以重新编辑相册；

  • 5、标签

    管理图片的相关标签，新建、删除、编辑标签，这里的标签与文章中的标签是相关联的，远方的雪山文章中“推荐阅读”上面的小图片就是通过图集与文章中的标签相关联显示的；

  • 6、选项

    • 这里可是“高手云集”了，太多强大的功能，说几条比较实用的吧，其实有一些萨龙龙也没有用过：
    • 图集路经：图片存储的路径，萨龙龙设置为wp-content/gallery/，你也可以设置其它目录；
    • 使用固定链接：首页得点击下面的“创建新的URL友好的图片别名”中的按钮创建别名，选中“使用固定链接”，后面的“图集别名”可以根据需要输入，远方画廊为“gallery”；（注：使用固定链接时，地址栏地址显示正常，而浏览器标签中的title会乱码，暂没有找到解决的方法。）
    • 标签与分类：设置在文章关联图片，近分类还是标签，显示图片的多少；
    • 缩略图：设置缩略图的高宽与品质，这里的最大值要改动需要修改源文件（最后介绍）；
    • 图片：图片的一些简单设置，高宽与品质等；
    • 图集：图片显示的数量，默认是以缩略图显示还是幻灯片，排列顺序等；
    • 效果：设置图片暗箱效果，不显示、Thickbox、Lightbox、Highslide、百叶窗、自定义，有些效果是需要安装相应的插件；
    • 水印：设置简单明了，效果也不错，但唯一不好的是生成的图片容量比较大；
    • 幻灯片：幻灯片的参数设置，背影音乐的添加，以及JW Image Rotator插件的安装；

  • 7、样式

    NextGEN Gallery提供的自定义样式编辑器，远方画廊重新定义了图集的样式；

  • 8、权限

    可以为不同的角色设置不同的权限，其实个人网站没有必要设置；

  • 9、关于

    NextGEN的版权、开发团队，赞助人员与贡献人员的介绍；

  • 10、重置与卸载

    重置选项与卸载插件数据。

四、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，下面两行就是缩略图最大值的参数，根据需要设置缩略图的最大值：

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

两个版本没有多大的区别，第一个版本的画框样式是3D效果，第二个版本的画框样式与远方的雪山现在的样式一样，而且按钮也做了修改。

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

赞(7)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：, ,
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

101 条评论，访客：0 条，博主：0 条
  1. 派派网
    派派网发布于： 
    回复

    这个实用，可以收藏

  2. 克克博
    克克博发布于： 
    回复

    老的版本好像不适用了，希望博主百忙之中抽空折腾下最新版本，写个教程，谢谢！

    • 萨龙龙
      萨龙龙发布于： 
      回复

      嗯，一直没得时间来测试相册新版本，等有时间看下。

  3. siyu
    siyu发布于： 
    回复

    你好，我是最近才接触WP，也想建立一个相册，但是在使用NEXTGEN插件的过程中遇到点问题。我将插件中的图集和相册都清空之后，仍然会有N个图片（插件中指定的路径gallery已经是清空的），请问我怎么清除依旧存在的图片。
    想要清除的原因是，如果没有清除，将图集导入新页面后，会出现N个空白的图片，这样一来显示效果就很不好了。

  4. dimo
    dimo发布于： 
    回复

    我想问下 为何我本地测试上传图片没反应

    • 萨龙龙
      萨龙龙发布于： 
      回复

      1.9的版本老掉了，很多功能用不了，导入图片时先用FTP把图片上传到gallery文件夹中，再使用“导入图片目录”。

  5. 酒衫
    酒衫发布于： 
    回复

    正准备自己弄一个，一会开始。谢谢

  6. 庆华
    庆华发布于： 
    回复

    可以为不同图片添加页面链接吗？

    • 萨龙龙
      萨龙龙发布于： 
      回复

      没有明白你的意思？

  7. 从良未遂
    从良未遂发布于： 
    回复

    请问如何控制打开图片的大小啊

    • 萨龙龙
      萨龙龙发布于： 
      回复

      打开的图片是指弹窗的图片？相册只能控制缩略图

      • 从良未遂
        从良未遂发布于： 
        回复

        哦，谢谢，我觉得打开的图片就是弹窗的图片笑了一点。

        • 萨龙龙
          萨龙龙发布于： 
          回复

          你把上传的原始图片搞大点，不就得了

  9. 刘冰洋
    刘冰洋发布于： 
    回复

    大神，我有一个问题想要麻烦你，，我修改了css但是图集显示的样式，还是那么小。是我主题问题么？http://www.liubingyang.com/lll 麻烦博主帮我看下可以么

    • 萨龙龙
      萨龙龙发布于： 
      回复

      用的是我修改的插件吗？我看你的样式是没有修改

  10. 雪山
    雪山发布于： 
    回复

    能加下您qq吗 我刚试验过了 已经可以显示文字了 我现在使用的是图集显示模式 但是图片失真了 和原图相比比较模糊 是怎么回事 后台图片质量我写的100%

  11. 雪山
    雪山发布于： 
    回复

    非常感谢您的回复 只是我还是 没太懂 我想要的效果是 图片上显示文字 在前台 每张图片都有对应的描述 您的回复“可以，编辑图集时可以添加，但前台是不会显示，只是title和alt标签显示” 重点是我需要在前台展示图片的时候显示文字描述 我应该如何做？

    • 萨龙龙
      萨龙龙发布于： 
      回复

      需要在图片下显示文字是需要修改相册源文件的，QQ66895271

  12. 雪山
    雪山发布于： 
    回复

    博主你好 我想问一下 给图片添加文字描述 应该如何添加呢？ 这个插件可以为每一张图片添加文字描述 吗？

    • 萨龙龙
      萨龙龙发布于： 
      回复

      可以，编辑图集时可以添加，但前台是不会显示，只是title和alt标签显示

  13. 非常白板
    非常白板发布于： 
    回复

    博主你好，我调了几天的2.0，实在不尽如人意，刚刚下载了你的1-22这个版本，安装好后，点击图集不知道为啥页面显示不全哈！

    另外，我一共是三个图集，其中前两个用lightbox显示图片即可，第三个想连接到视频，也就是说第三个是视频的缩略图集，请问有什么办法吗？

    • 非常白板
      非常白板发布于： 
      回复

      图集地址是：http://www.softbase.org.cn/gallery

      另外，那个视频播放的问题，我想把视频地址添加到图集的描述里，然后在点击缩略图的时候打开描述里的地址就好，而不是用lightbox打开图片！

    • 萨龙龙
      萨龙龙发布于： 
      回复

      NextGEN Gallery没听说可以添加视频啊，这个你就得专门做一个自定义视频类型的文章了。

      图集下的图片不显示，也不至于连页脚都不显示了，是不是插件与你的主题不兼容？

      • 非常白板
        非常白板发布于： 
        回复

        视频的问题没关系，现在是兼容的问题怎么调呢？

  14. nanchen
    nanchen发布于： 
    回复

    博主使用这个插件后，点击缩略图之后的浏览方式是怎么设置的？我安装后点击后的效果很丑呢。谢谢博主~~

    • 萨龙龙
      萨龙龙发布于： 
      回复

      安装auto-highslide这个插件，网上有下载，安装好插件启用就可以，然后在相册图集-选项-效果-JavaScript 缩略图效果量，选择Highslide。

      • nanchen
        nanchen发布于： 
        回复

        问题已解决，非常感谢博主！以后会常来的~

  15. aviapp
    aviapp发布于： 
    回复

    你好,我下载使用的是你修改的 2014 1月22日的那个版本,安装激活插件后,我新建了个图集,并上传了几张图,然后在WP后台新建 文章,插入刚才新建的图集是以图片游览器的方式,样式效果不如意,我就修改插件CSS文件夹下的nggallery.css文件相应的代码,但修改完成后没有效果?请问还需要修改那些地方吗?我看到你的教程中只需要修改nggallery.css文件.

    • 萨龙龙
      萨龙龙发布于： 
      回复

      是修改nggallery.css这个文件，你的图片放在文章中会被style.css这个文件中的一些样式覆盖，有些样式需要在后面添加!important强制执行。

  16. 小北
    小北发布于： 
    回复

    您好，看了你的这篇文章让我学到不少东西，自己的相册也基本能建立。现在就是在查看图片的时候有一点问题，图片列表模式下默认的是点击图片关闭，下一张和上一张在图片的左右下角显示，查看起来很不方便。我参考了你的远方画廊，图片下方有上一张，下一张，关闭等控制按键。所以我想请教一下是怎么实现这个的。麻烦你了。

    • 萨龙龙
      萨龙龙发布于： 
      回复

      是通过auto-highslide这个插件，网上有下载，安装好插件启用就可以，然后在相册图集-选项-效果-JavaScript 缩略图效果量，选择Highslide。

      • 小北
        小北发布于： 
        回复

        谢谢你的指点，这个插件已经安装好了，也试用了一下，效果确实有，但是不知道为什么点击图片后会先出来一个浏览的效果，和highslide的效果十分类似，在点击关闭图片后再出现远方画廊的一个浏览效果。

        • 萨龙龙
          萨龙龙发布于： 
          回复

          你的博客是多少？没有看到什么效果，也不好说。

          • 小北
            小北发布于： 

            你好，是因为和一个效果插件重叠，先显示的那个插件，现在卸载了那个插件这个就能正常显示了。谢谢你的指点。

发表回复