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

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

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

发表回复

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

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