个人工具
名字空间
变换
操作

Gallery:我是如何将slider外观主题嵌入到我的网站中的

来自站长百科
(版本间的差异)
跳转到: 导航, 搜索
 
(未显示1个用户的7个中间版本)
第9行: 第9行:
  
 
== Gallery ==  
 
== Gallery ==  
现在我有了自己的设计方案。我喜欢滑动式的外观主题,因此我希望将其作为图片显示的基本方案。当你在box外使用gallery时,它就会变成一个独立的网页,并且具有自己的外观效果。你可以选用某个外观主题和颜色包,但它看起来仍和原来一样。网站往往不是这个样子,因此我开始逛论坛来看看如何修改gallery以更好地融入整合到我自己的网站中。
+
现在我有了自己的设计方案。我喜欢slider式的外观主题,因此我希望将其作为图片显示的基本方案。当你在box外使用gallery时,它就会变成一个独立的网页,并且具有自己的外观效果。你可以选用某个外观主题和颜色包,但它看起来仍和原来一样。网站往往不是这个样子,因此我开始逛论坛来看看如何修改gallery以更好地融入整合到我自己的网站中。
  
 
==== 阅读Gallery文档资料====
 
==== 阅读Gallery文档资料====
Gallery has quite a bit of information about embedding and integrating. Here are some links I used:
+
Gallery有不少关于嵌入和整合的信息。这里给出我用过的一些链接:
  
 
* [http://gallery.menalto.com/forum/g2_integration http://gallery.menalto.com/forum/g2_integration]
 
* [http://gallery.menalto.com/forum/g2_integration http://gallery.menalto.com/forum/g2_integration]
第19行: 第19行:
 
* [http://codex.gallery2.org/index.php/Gallery2:Embedding http://codex.gallery2.org/index.php/Gallery2:Embedding]
 
* [http://codex.gallery2.org/index.php/Gallery2:Embedding http://codex.gallery2.org/index.php/Gallery2:Embedding]
  
Since I wasn't using an existing CMS, I figured I could use the 'editing theme templates' method of integrating gallery. Basically you change the templates that the theme provides to fit your own design. That's what makes gallery such a wonderful tool, it allows you to seperate functionality from design.
+
由于我不在使用现有的CMS,因此我想我可以使用gallery整合的'编辑外观主题模板'这个方法。一般说来就是修改外观主题所提供的模板来符合你的设计意图。这使得gallery成为了最具吸引力的工具,它允许你从设计之中分离出各种功能。
  
 
==== 创建本地模板 ====
 
==== 创建本地模板 ====
Gallery has a great method to change the templates. Just go to the 'slider' theme directory, and create a directory 'local' in whatever directory the file you want to change exists in. I started by editing theme.tpl so I created a directory 'local' inside the 'templates' directory and copied 'theme.tpl' to that directory. Now I started to edit this template to have a navigation bar. This meant adding some HTML near the top of the templates. You can find the resulting file [http://wa.ter.net/docs/gallery/theme1.php here]. Look for comments marked by the string '''COR'''.
+
Gallery修改模板的方法很棒。打开'slider'外观主题目录,并在希望修改的文件所在目录创建一个'local'目录。我一开始是编辑theme.tpl的,因此我在'templates'目录中创建了一个'local'目录,并将'theme.tpl'复制到了该新建目录之中。现在我开始编辑此模板以使其具有一导航条。这就意味着要在模板顶部添加一些HTML代码。你可在[http://wa.ter.net/docs/gallery/theme1.php ]查看一下结果文件。查询标记有'''COR'''字串的评注。
  
==== 滑动外观主题的问题 ====
+
==== slider外观主题的问题 ====
Unfortunately, this didnt show me a navbar! Whats going on. Maybe I needed to reload the templates. This is something you always have to do when editing templates. Go the the Site Admin link, go to Maintenance, and find the template cache deletion link. Use it often. It didnt fix my problem though. I looked at the source, and saw that the navbar was actually there. So why didnt I see it? I looked a bit closer at the slider theme and noticed it uses absolute positioning. Basically it put the image on top of my navbar making it invisible. Ok, thats not good.
+
不巧的是,这样做看不到导航条!也许我该重新载入一下模板吧?因为这是编辑模板时常做的操作。打开站点管理(Site Admin)链接,维护(Maintenance),找到模板缓存清除链接。但还是没能解决我的问题。我检查了一下源代码,导航条确实存在于其中。但为何我看不到它呢?我更进一步查看了一下slider外观主题并且注意到它使用的是绝对定位。通常说来,它将图片覆盖于导航条之上,因此就看不到了。
  
== 滑动外观主题的修改 ==
+
== slider外观主题的修改 ==
Im not going to explain CSS or HTML. Buy a book :) I figured I had to change the css to fix this absolute positioning problem. So, I made a directory 'local' in the same directory as theme.css and copied theme.css there. Right at the top of the css file you see the problem. It positions the image area in the top left corner of the screen. Argh. Ok, what if I change it so the top is not at 0 but at 50 px? Ok, that did something. The image area was moved 50 pixels down and I saw my navbar at the top.
+
在此我是不会对CSS或HTML做讲解的,这些都可以在书本中学到。我发现必须修改css来解决此绝对定位问题。所以我在同目录下做了一个'local'目录并将theme.css复制其中。在css文件的顶部你可以看到问题所在。它将图片区定位在了评论的左顶角处。那么如果我对其做修改让顶部不为0而是50 px呢?好像有点效果。图片区被下移了50 px,接着导航条就能在顶部看到了。
  
 
==== 水平导航条 ====
 
==== 水平导航条 ====
Before I continue, I need to explain my navbar, because some people might not understand it. If you do what I did sofar, the navbar will look ugly. It's not a horizontal navbar at all, but an ugly list. Im not going to fully explain how to go from a vertical list to a horizontal navbar. Use google. It is styled using CSS, and I copied the style information from my site CSS file to the theme CSS file. You can see the resulting theme.css [http://wa.ter.net/docs/gallery/theme1css.php here]. With that CSS file you see my navbar on top, but the rest of the gallery stuff still looks like plain old slider theme.
+
在继续之前,我需要对导航条做个解释,因为某些人可能不了解。就我迄今所作操作得到的结果看来,导航条看起来不太美观。其实它根本不是一个水平的导航条,而是一个突兀的列表样式。我并不打算娓娓道来如何将竖直列表转为一个水平导航条。因为这可以在网上找到。它使用的是CSS,而我将其风格信息由站点CSS文件复制到外观主题CSS文件。你可以在[http://wa.ter.net/docs/gallery/theme1css.php ]看一下结果theme.css。有了这个CSS文件,我的导航条就在顶部了,但gallery其余部分看起来还是如老版普通的silder外观主题一样。
  
 
==== 调整色彩 ====
 
==== 调整色彩 ====
Next I figured id have to change the colors of the slider theme to match my own colors. This again means changing CSS information. I need to change all 'background-color' elements to my own background color. Here's the resulting [http://wa.ter.net/docs/gallery/theme2css.php theme.css]. Look for color #282828. This is starting to look good.
+
接着我想到必须修改slider外观主题的色彩来配合我自己的色彩。这意味着要贼此修改CSS信息。我需要将所有'背景色'的元素修改为自己的背景色。这里是结果 [http://wa.ter.net/docs/gallery/theme2css.php theme.css文件]。查看color #282828。现在开始入眼了。
  
 
==== 解决布局问题 ====
 
==== 解决布局问题 ====
Things arent quite finished though. First of all I wanted to do some more minor visual changes, but more importantly, there are some layout bugs. In IE (what else is new) the current CSS is not working correctly as the image is now being overlapped by the thumbnail bar, no doubt caused by lowering the image display area 50 pixels. Im also seeing some ugly jumping of the navbar when switching from my own pages to the gallery theme pages. In my own pages I needed to do some CSS tricks to avoid that from happening. It's basically working around CSS implementation differences. I need to add these workarounds to the theme.css file.
+
还没有完全结束呢。首先我想做更多的细小视觉上的修改,但更重要的是,布局方面还存在bug。在IE中,目前的CSS无法正确运作,可以看出图片现在被缩略图条所覆盖,这无疑是由图片显示区下移50px所导致的。还有在我的页面向gallery外观主题页面转换时会看到导航条呈现出不佳的跳转现象。在我自己的页面中我需要利用一些CSS小技巧来避免此类事故的发生。我需要将这些变通手段用于theme.css文件上。
  
To fix the overlapping layout in IE, it wasnt enough to change the CSS. The slider theme extensively uses Javascript, and it's in this JS that we have to fix another problem. It computes the size of the image area, and because we lowered the image area 50px, this computation is now wrong. The changed slider.js can be seen [http://wa.ter.net/docs/gallery/slider.php here]. The changes are around line 186. I also made another minor change to add a permanent scrollbar on the right. This fixes the jumping navbar problem. There may be better fixes for this, but this is what I did.
+
要修复IE中不当覆盖的问题,光是修改CSS还是不够的。slider外观主题广泛使用Javascript,针对其所在的JS我们还需解决另一问题。它会计算图片区域的尺寸,而我们将图片区域下移了50px,因此会导致计算上的误差。被修改的slider.js可在[http://wa.ter.net/docs/gallery/slider.php ]进行查看。修改位于186行左右。我还做的修改是在右侧添加一个永久性的滚动条,这可以解决导航条跳转的问题。可能还有更好的解决办法,这里给出的仅仅是我的方法。
  
 
  if (!getstr && !document.slide) return;
 
  if (!getstr && !document.slide) return;
第53行: 第53行:
 
  w = aw; h = Math.round(aw*a);
 
  w = aw; h = Math.round(aw*a);
  
Argh, this didnt work. The changed javascript wasnt being executed. I quickly noticed that I also need to change header.tpl in the templates directory. Copy it to the local dir and make it load slider.js from the local dir. Here's my [http://wa.ter.net/docs/gallery/header.php header.tpl]. I also had to make another small change in theme.tpl, as it has a line to hide the scrollbar, and I wanted to force the scrollbar to avoid jumping of the screen. You can decide for yourself if you want or need this. I commented out the line:
+
这没效果。经修改的javascript没有被执行。我很快发现我还需要修改模板目录下的header.tpl。将其复制到本地dir并使其由本地dir载入slider.js。这是我的[http://wa.ter.net/docs/gallery/header.php header.tpl]。我还需要在theme.tpl中做另一小修改,因为其中有一行隐藏了滚动条,而我希望该滚动条可以遏制屏幕的跳转。但此方法的使用与否取决于你。我对相应语句做了批注:
  
 
  {*body.gallery { overflow: hidden; }*}
 
  {*body.gallery { overflow: hidden; }*}
第84行: 第84行:
  
 
== 被修改的外观主题文件 ==
 
== 被修改的外观主题文件 ==
That concludes all the changes. I also changed some minor things in the theme configuration inside gallery. Specifically, I limited the max size each image could be viewed at by non-administrators. Experiment with it.
+
这就完成了所有的修改。我还对gallery外观主题配置做了一些mirror方面的修改。我特别限制了非管理员用户查看图片时的最大可见尺寸。
  
All the files that I changed can be [http://wa.ter.net/docs/gallery/index.php viewed here]. Changes are usually commented, but you may want to do a diff between the original and my version. I may have also forgotten some changes, as Im doing a long time after the actual work. If you have any questions, feel free to send me a message. Remember though, this doc is not meant to fix your own site. It is merely a diary of how I changed my site. You'll almost certainly have to deviate from this document for your own site. And I may also not have chosen the right way to do things, I dont know. But it works for me, so im happy.
+
所有我做修改的文件可以[http://wa.ter.net/docs/gallery/index.php 在此查看]。修改常常都加上了批注,但也许你会做一些自己的修改。某些修改我可能也没有印象了,因为到实际完成已隔了很长一段时间。如果你有什么问题的话,请尽管发短消息给我。但请记住,此份资料并不一定完全适用于你的网站的修改,这仅仅是我对自己网站所作修改的一个记录。你肯定要对此文档做一些取舍和修改才能符合你的网站需要。而且我也可能使用了不妥的方法来处理问题。但对我来说,以上的这些都没问题。
  
  
第93行: 第93行:
  
 
= '''额外的嵌入''' =
 
= '''额外的嵌入''' =
Besides changing the theme I also did some other forms of embedding. You can call gallery functions from within any PHP file which allows you to do interesting tricks outside of gallery itself. My site contains several such additions..
+
除了修改外观主题,我还做了其他形式的嵌入。你可以从任何PHP文件内部呼叫gallery函数。这使得你可以在gallery之外做一些有趣的尝试。我的站点就含有一些类似的附加..
  
* The homepage has two randomized images. I did that by making two special albums inside gallery, one for me, one for my wife. We can each drop images in that gallery and have them automatically be used for this random image. The code for it. Include() it in your regular php file, and change whatever you have to change to make it work for you.
+
* 首页有两张随机图片。我使用2个gallery内的特殊相册来达到此目的,其中一个相册是我的,另一个则是我妻子的。我们都可以分别向gallery中放入图片,并让它们自动为此随机图片所利用。下面是代码。你可以将常规的php文件中的Include()修改为符合你所需的任何东西。
  
 
'''''不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID的'''''
 
'''''不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID的'''''
第115行: 第115行:
 
  ?>
 
  ?>
  
* The travel page has a list of thumbnails on the right. These are auto-generated! If I add a travel album, it automatically gets displayed there. I do some extra tricks to allow me to only make it visible when im ready. All the albums here are children of 1 specific album, which allows me to traverse that album to fetch all these travel galleries.
+
* 旅游(travel)页面在右侧有一列缩略图。这些是自动生成的!如果我添加一个travel相册,就会被自动显示在这里。我通过额外手法让其在我准备好时才可见。这里的所有相册是1个特定相册的子相册;这里指的特定相册允许我对其进行纵览以获取所有这些travel相关的gallery。
  
 
'''''不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出HTML的'''''
 
'''''不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出HTML的'''''
第121行: 第121行:
 
  <?php
 
  <?php
 
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
 
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
  /* connect to embed library */
+
  /*连接到embed库*/
 
  $ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => '','fullInit' => true));
 
  $ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => '','fullInit' => true));
 
   
 
   
  /* fetch all albums by item id */
+
  /*按项目id获取所有相册*/
 
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(<font color="red">69</font>);
 
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(<font color="red">69</font>);
 
  /* fetch all thumbnails for these albums */
 
  /* fetch all thumbnails for these albums */
 
  if(!$error) {
 
  if(!$error) {
   /* fetch album info for all albums */
+
   /*获取所有相册的相册信息*/
 
   list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
 
   list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
 
   if(!$error) {
 
   if(!$error) {
第172行: 第172行:
 
  <?php
 
  <?php
 
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
 
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
  /* connect to embed library */
+
  /* 连接到embed库 */
 
  $ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => '','fullInit' => true));
 
  $ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => '','fullInit' => true));
 
   
 
   
  /* fetch all albums by item id */
+
  /* 按项目id获取所有相册 */
 
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(<font color="red">70</font>);
 
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(<font color="red">70</font>);
 
  if(!$error) {
 
  if(!$error) {
   /* fetch album info for all albums */
+
   /* 获取所有相册的相册信息 */
 
   list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
 
   list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
 
   if(!$error) {<font color="red"><nowiki>
 
   if(!$error) {<font color="red"><nowiki>
第197行: 第197行:
  
 
----
 
----
我希望此页面对某些人有所帮助。就算你不使用滑动外观主题你也可以明白如何修改使得gallery的视觉效果符合自己的网站设计风格。如果你是使用该份文档修改的自己的网站的话,请给留个信儿。我很想看看效果如何。
+
我希望此页面对某些人有所帮助。就算你不使用slider外观主题你也可以明白如何修改使得gallery的视觉效果符合自己的网站设计风格。如果你是使用该份文档修改的自己的网站的话,请给留个信儿。我很想看看效果如何。
  
 
致礼,
 
致礼,

2008年11月18日 (二) 05:47的最后版本

目录

使用模板的可视化嵌入

介绍

我曾多次被问到我的网站的样子是如何实现的。Gallery在我的网站 http://underwa.ter.net中融合地很好,机关我所使用的外观主题自身无法适用于这样的整合方式。但是我喜欢这样的哇你管主题,因此我根据自己的需要做了修改。我认为如果你真的希望gallery成为自己网站规划中不可或缺的一部分的话,某些形式的修改总是必要的。下面我就分享一下我在整合时的一些心得。

网站设计规划

首先在开始之前应当做一个网站设计规划。要使用什么样的布局?网站的导航方式?使用什么样的色彩?我想要的是一个非常简单的设计样式,简洁明快,这样就不会喧宾夺主了。我选择使用顶部导航条,这将我的站点分成了一些主要部分:文件夹,旅游报告和新闻以及关于。在整合gallery之前应当做好此步。我认为你应当让gallery来融入到你的设计中而不是反过来让你的设计来适应gallery。

除了PHP部分和gallery之外,我使用Dreamweaver进行站点的组建。对我来说,Dreamweaver在设计开发中表现得很不错,尤其是在CSS处理方面极为优秀。Dreamweaver允许我创建模板的特定部分,如导航条,因此如果我做出一些修改那么整个站点的对应部分就会改变(除了gallery不受影响,我会对此做解释的)。就我个人而言,我尝试使用某些形式的软件来做此事,因为维护起来较容易许多。

Gallery

现在我有了自己的设计方案。我喜欢slider式的外观主题,因此我希望将其作为图片显示的基本方案。当你在box外使用gallery时,它就会变成一个独立的网页,并且具有自己的外观效果。你可以选用某个外观主题和颜色包,但它看起来仍和原来一样。网站往往不是这个样子,因此我开始逛论坛来看看如何修改gallery以更好地融入整合到我自己的网站中。

阅读Gallery文档资料

Gallery有不少关于嵌入和整合的信息。这里给出我用过的一些链接:

由于我不在使用现有的CMS,因此我想我可以使用gallery整合的'编辑外观主题模板'这个方法。一般说来就是修改外观主题所提供的模板来符合你的设计意图。这使得gallery成为了最具吸引力的工具,它允许你从设计之中分离出各种功能。

创建本地模板

Gallery修改模板的方法很棒。打开'slider'外观主题目录,并在希望修改的文件所在目录创建一个'local'目录。我一开始是编辑theme.tpl的,因此我在'templates'目录中创建了一个'local'目录,并将'theme.tpl'复制到了该新建目录之中。现在我开始编辑此模板以使其具有一导航条。这就意味着要在模板顶部添加一些HTML代码。你可在查看一下结果文件。查询标记有COR字串的评注。

slider外观主题的问题

不巧的是,这样做看不到导航条!也许我该重新载入一下模板吧?因为这是编辑模板时常做的操作。打开站点管理(Site Admin)链接,维护(Maintenance),找到模板缓存清除链接。但还是没能解决我的问题。我检查了一下源代码,导航条确实存在于其中。但为何我看不到它呢?我更进一步查看了一下slider外观主题并且注意到它使用的是绝对定位。通常说来,它将图片覆盖于导航条之上,因此就看不到了。

slider外观主题的修改

在此我是不会对CSS或HTML做讲解的,这些都可以在书本中学到。我发现必须修改css来解决此绝对定位问题。所以我在同目录下做了一个'local'目录并将theme.css复制其中。在css文件的顶部你可以看到问题所在。它将图片区定位在了评论的左顶角处。那么如果我对其做修改让顶部不为0而是50 px呢?好像有点效果。图片区被下移了50 px,接着导航条就能在顶部看到了。

水平导航条

在继续之前,我需要对导航条做个解释,因为某些人可能不了解。就我迄今所作操作得到的结果看来,导航条看起来不太美观。其实它根本不是一个水平的导航条,而是一个突兀的列表样式。我并不打算娓娓道来如何将竖直列表转为一个水平导航条。因为这可以在网上找到。它使用的是CSS,而我将其风格信息由站点CSS文件复制到外观主题CSS文件。你可以在看一下结果theme.css。有了这个CSS文件,我的导航条就在顶部了,但gallery其余部分看起来还是如老版普通的silder外观主题一样。

调整色彩

接着我想到必须修改slider外观主题的色彩来配合我自己的色彩。这意味着要贼此修改CSS信息。我需要将所有'背景色'的元素修改为自己的背景色。这里是结果 theme.css文件。查看color #282828。现在开始入眼了。

解决布局问题

还没有完全结束呢。首先我想做更多的细小视觉上的修改,但更重要的是,布局方面还存在bug。在IE中,目前的CSS无法正确运作,可以看出图片现在被缩略图条所覆盖,这无疑是由图片显示区下移50px所导致的。还有在我的页面向gallery外观主题页面转换时会看到导航条呈现出不佳的跳转现象。在我自己的页面中我需要利用一些CSS小技巧来避免此类事故的发生。我需要将这些变通手段用于theme.css文件上。

要修复IE中不当覆盖的问题,光是修改CSS还是不够的。slider外观主题广泛使用Javascript,针对其所在的JS我们还需解决另一问题。它会计算图片区域的尺寸,而我们将图片区域下移了50px,因此会导致计算上的误差。被修改的slider.js可在进行查看。修改位于186行左右。我还做的修改是在右侧添加一个永久性的滚动条,这可以解决导航条跳转的问题。可能还有更好的解决办法,这里给出的仅仅是我的方法。

if (!getstr && !document.slide) return;
var w = data_iw[image_index], h = data_ih[image_index],
aw = image_area.offsetWidth, ah = image_area.offsetHeight, a=0;
  ah = ah - 6;
  aw = aw - 6;
  if(app_is_ie) {
    ah = ah - 80;
  }
if (w > aw || h > ah) {
if ((a = h/w) < ah/aw) {
w = aw; h = Math.round(aw*a);

这没效果。经修改的javascript没有被执行。我很快发现我还需要修改模板目录下的header.tpl。将其复制到本地dir并使其由本地dir载入slider.js。这是我的header.tpl。我还需要在theme.tpl中做另一小修改,因为其中有一行隐藏了滚动条,而我希望该滚动条可以遏制屏幕的跳转。但此方法的使用与否取决于你。我对相应语句做了批注:

{*body.gallery { overflow: hidden; }*}

额外的修改

我们还没有完成呢。我还想要更多的视觉效果修改。我会一一道来的。


  • 首先我希望图片周围有边界。这可以通过CSS来达成。在theme.css 文件的顶部某处加入下面的语句。
div#image img {
  border: 3px solid #ffffff;
}


  • 我希望gallery的明朝位于导航条的左侧。这就意味着要修改theme.tpl,也就是导航条添加之处。我加入了以下语句行。如果你是管理员的话,它还会添加一个下拉框。请别忘了清除模板缓存:)
{if !empty($theme.item.title)}
  {$theme.item.title|markup}
  {if $user.isRegisteredUser}
    {g->block type="core.ItemLinks"}
  {/if}
{/if}
  • 修改了CSS文件中的一些字体属性。这并非很重要的。
  • 我不想让普通读者看到维护菜单的扳手图标。所以我修改了slider.tpl,这样一来只有管理员可以看到。参见slider.tpl

被修改的外观主题文件

这就完成了所有的修改。我还对gallery外观主题配置做了一些mirror方面的修改。我特别限制了非管理员用户查看图片时的最大可见尺寸。

所有我做修改的文件可以在此查看。修改常常都加上了批注,但也许你会做一些自己的修改。某些修改我可能也没有印象了,因为到实际完成已隔了很长一段时间。如果你有什么问题的话,请尽管发短消息给我。但请记住,此份资料并不一定完全适用于你的网站的修改,这仅仅是我对自己网站所作修改的一个记录。你肯定要对此文档做一些取舍和修改才能符合你的网站需要。而且我也可能使用了不妥的方法来处理问题。但对我来说,以上的这些都没问题。



额外的嵌入

除了修改外观主题,我还做了其他形式的嵌入。你可以从任何PHP文件内部呼叫gallery函数。这使得你可以在gallery之外做一些有趣的尝试。我的站点就含有一些类似的附加..

  • 首页有两张随机图片。我使用2个gallery内的特殊相册来达到此目的,其中一个相册是我的,另一个则是我妻子的。我们都可以分别向gallery中放入图片,并让它们自动为此随机图片所利用。下面是代码。你可以将常规的php文件中的Include()修改为符合你所需的任何东西。

不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID的

<?php
require_once(dirname(__FILE__) . "/../gallery2/embed.php");
$ret = GalleryEmbed::init(array('embedUri' => '/gallery2','g2Uri' => '/gallery2/','fullInit' => true));
list ($ret, $imageBlockCor) = GalleryEmbed::getImageBlock(array('blocks' => 'randomImage', 'show' => 'none', 'itemId' => '120' ));
list ($ret, $imageBlockJulie) = GalleryEmbed::getImageBlock(array('blocks' => 'randomImage', 'show' => 'none', 'itemId' => '121' ));
$url = $_SERVER['REQUEST_URI'];
if(preg_match('/(<img.*\\>)/', $imageBlockCor, $matches)) {
  $cor = $matches[1];
}
if(preg_match('/(<img.*\\>)/', $imageBlockJulie, $matches)) {
  $julie = $matches[1];
}
echo "<td><a href=\"/gallery2/main.php?g2_view=core.ShowItem&g2_itemId=147\">$cor</a></td>\n";
echo "<td><a href=\"/gallery2/main.php?g2_view=core.ShowItem&g2_itemId=148\">$julie</a></td>\n";
GalleryEmbed::done();
?>
  • 旅游(travel)页面在右侧有一列缩略图。这些是自动生成的!如果我添加一个travel相册,就会被自动显示在这里。我通过额外手法让其在我准备好时才可见。这里的所有相册是1个特定相册的子相册;这里指的特定相册允许我对其进行纵览以获取所有这些travel相关的gallery。

不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出HTML的

<?php
require_once(dirname(__FILE__) . "/../gallery2/embed.php");
/*连接到embed库*/
$ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => ,'fullInit' => true));

/*按项目id获取所有相册*/
list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(69);
/* fetch all thumbnails for these albums */
if(!$error) {
  /*获取所有相册的相册信息*/
  list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
  if(!$error) {
    $urlGenerator =& $gallery->getUrlGenerator();
    foreach ($items as $item) {
      $title = $item->getTitle();
      $description = $item->getDescription();
      $keywords = $item->getKeywords();
      if(strstr($keywords, "visible")) {
        list($ret, $thumbnails) = GalleryCoreApi::fetchThumbnailsByItemIds(array($item->getid()));
        foreach($thumbnails as $thumbnail) {
          $thumbnailImg = $urlGenerator->generateUrl(array('view' => 'core.DownloadItem', 'href' => "/gallery2/main.php", 'itemId' => $thumbnail->getid()));
          $thumbnailUrl = $urlGenerator->generateUrl(array('view' => 'core.ShowItem', 'itemId' => $item->getid()));
        }
        echo "<div class=\"travelgalleriesgallery\">\n";
        echo "<p><a href=\"$thumbnailUrl\"><img src=\"$thumbnailImg\" /></a></p>\n";
        echo "<p>$title</p>\n";
        $description = unhtmlspecialchars($description);
        echo "<p>$description</p>\n";
        echo "</div> <!-- travelgalleriesgallery -->\n";
      }
    }
  }
}
function unhtmlspecialchars( $string )
{
  $string = str_replace ( '&', '&', $string );
  $string = str_replace ( ''', '\, $string );
  $string = str_replace ( '"', '"', $string );
  $string = str_replace ( '<', '<', $string );
  $string = str_replace ( '>', '>', $string );

  return $string;
}
?>


  • 在文件夹区域中的下拉列表显示所有可查看的文件夹。这些同样都是一特定相册的子,这样我就可以进行traverse。代码:

不要不做修改就使用此代码,因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出HTML的

<?php
require_once(dirname(__FILE__) . "/../gallery2/embed.php");
/* 连接到embed库 */
$ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => ,'fullInit' => true));

/* 按项目id获取所有相册 */
list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(70);
if(!$error) {
  /* 获取所有相册的相册信息 */
  list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
  if(!$error) {
     echo "<form>\n";
     echo "<select name=\"url\" onchange=\"location = this.options[this.selectedIndex].value;\">\n";
     echo "<option value=\"#\">View other portfolios</option>\n";
     foreach ($items as $item) {
       $title = $item->getTitle() ? $item->getTitle() :
       $item-> getPathComponent();
       echo "<option value=\"/gallery2/main.php?g2_view=core.ShowItem&g2_itemId=" . $item->getId() . "\">$title</option>\n";
     }
     echo "</select></form>\n";
  }
}
?>



我希望此页面对某些人有所帮助。就算你不使用slider外观主题你也可以明白如何修改使得gallery的视觉效果符合自己的网站设计风格。如果你是使用该份文档修改的自己的网站的话,请给留个信儿。我很想看看效果如何。

致礼,

Cor Bosman
http://underwa.ter.net

留言