WordPress

WordPress相册插件NextGEN Gallery的使用

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.     backgroundnone repeat scroll 0 0 #fff;   
  17.     border1px 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.     padding6px;   
  21. }   
  22. .ngg-album-compactbox .Thumb:hover {   
  23.     border1px 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.     backgroundnone repeat scroll 0 0 #FFFFFF;   
  3.     border1px 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);     padding6px;   
  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.     floatleft;
  3. }  

替换为:

  1. .ngg-gallery-thumbnail-box {   
  2.     floatleft;   
  3.     margin12px;   
  4. }  

4、按钮样式!在图集中有“图片列表模式”与“幻灯片模式”的切换按钮,默认是文字,我们给它添加一个按钮:

查找slideshowlink,把下面代码:

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

替换为:

  1. .slideshowlink{   
  2.     width960px;   
  3.     margin-bottom12px;   
  4. }   
  5. .slideshowlink a{   
  6.     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);   
  7.     width120px;   
  8.     border2px solid #fff;   
  9.     padding2px 20px;   
  10.     color#f8f8f8 !important;   
  11.     letter-spacing1px;   
  12.     line-height32px;   
  13.     background-color#1E8DCC;   
  14.     background-image:  url(../images/button_gradient.png);   
  15.     background-repeatrepeat-x;   
  16.     displayblock;   
  17.     text-aligncenter;   
  18.     margin: 0 auto;   
  19. }   
  20. .slideshowlink a:hover{   
  21.     background-color#3275a8;   
  22. }  

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

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

(1)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 101 条评论,访客:55 条,博主:41 条 ,当前引用:4 条

  • 派派网
    派派网 发布于:  回复

    这个实用,可以收藏

  • 克克博
    克克博 发布于:  回复

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

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

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

  • siyu
    siyu 发布于:  回复

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

  • dimo
    dimo 发布于:  回复

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

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

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

  • 酒衫
    酒衫 发布于:  回复

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

  • 庆华
    庆华 发布于:  回复

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

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

      没有明白你的意思?

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

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

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

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

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

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

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

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

  • 刘冰洋
    刘冰洋 发布于:  回复

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

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

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

  • 雪山
    雪山 发布于:  回复

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

  • 雪山
    雪山 发布于:  回复

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

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

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

  • 雪山
    雪山 发布于:  回复

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • nanchen
    nanchen 发布于:  回复

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

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

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

      • nanchen
        nanchen 发布于:  回复

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

  • aviapp
    aviapp 发布于:  回复

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

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

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

  • 小北
    小北 发布于:  回复

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

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

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

      • 小北
        小北 发布于:  回复

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

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

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

          • 小北
            小北 发布于: 

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

当前外部引用:4 条

  • WordPress相册插件NextGEN Gallery中文版分享及简单使用方法_恨雪博客
  • 我要安装NextGEN Gallery – 一千次知识分享
  • WordPress相册插件NextGEN Gallery的使用 | 百家讲谈
  • WordPress3.8全新的后台管理界面 | 远方的雪山