Gallery:Lightbox JS教程
重要：仅相册管理员可进行此操作，因为需要在核心模板"BreadCrumb.tpl"中做修改！
这里给出详细步骤说明移除根目录相册链接的办法。如果你希望访问者被限制于某用户相册之内进行浏览的话，移除根目录相册链接是一个好主意。
详细步骤：
1. 首先在"gallery2/modules/core/templates/blocks/"下新建一个"local"子目录
2. 将BreadCrumb.tpl复制到该新建的子目录中
3. 按以下方法修改local/BreadCrumb.tpl：
{*
* $Revision: 1.4 $
* 如果你要对此文件进行自定义，不要直接对其进行编辑，因为将来的更新操作
* 会将其覆盖掉的。将其复制到新的"local"目录下并对该拷贝进行
* 编辑。Gallery会首先查看该文件并在存在的情况下首先应用它。
*}
{*
* 查看各breadcrumb并将其显示为链接。
*
* G2使用highlight id来明了当你跟随breadcrumb返回相册树时该
* 拉取哪个页面。请勿将最后一个项目作为链接。
*}
<div class="{$class}">
{section name=parent loop=$theme.parents}
{if !$smarty.section.parent.last}
{if !$smarty.section.parent.first}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.parents[parent].id`"
arg3="highlightId=`$theme.parents[parent.index_next].id`"}"
class="BreadCrumb-{counter name="BreadCrumb"}">
{$theme.parents[parent].title|default:$theme.parents[parent].pathComponent|markup:strip}</a>
{if isset($separator)} {$separator} {/if}
{else}
{* further in sub-album tree*}
{/if}
{else}
{if $smarty.section.parent.first}
{* first sub-album*}
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.parents[parent].id`"
arg3="highlightId=`$theme.item.id`"}"
class="BreadCrumb-{counter name="BreadCrumb"}">
{$theme.parents[parent].title|default:$theme.parents[parent].pathComponent|markup:strip}</a>
{if isset($separator)} {$separator} {/if}
{/if}
{/if}
{/section}
{if ($theme.pageType == 'admin' || $theme.pageType == 'module')}
<a href="{g->url arg1="view=core.ShowItem"
arg2="itemId=`$theme.item.id`"}" class="BreadCrumb-{counter name="BreadCrumb"}">
{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</a>
{else}
<span class="BreadCrumb-{counter name="BreadCrumb"}">
{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</span>
{/if}
</div>
引子[ ]
该教程涵盖Lightbox JS 2.0.2在Gallery2.1.2站点安装相关信息。据我所知，它是依赖外观主题的；你可以将其插入任何外观主题加以使用。
我并非程序员而且也无法提供有价值的帮助 – 这只是我安装Lightbox JS 的一些记录，目的就是为了能够帮助其他用户节省时间，少走弯路。
至少有2款已知的外观主题具有lightbox内置。它们是PGlightbox和Greypop
此教程包括了自定义所需的URL。我使用/[path]/[to]/的url开头 – 你则需要使用自己的url进行替换。
如大多数的电脑新手一样，我在自己的机器上完成所有的文本编辑工作，然后才是硬FTP将我的文件上传到服务器上。这些指导就是按这种程序编成的；如果你是直接在服务器上进行编辑的话，那么就必须对这些指导内容加以调整以符合你的方式加以利用。
教程[ ]
从http://www.huddletogether.com/projects/lightbox2/#download 下载Lightbox JS，将其解压并打开lightbox文件夹。
在lightbox文件夹中，打开js文件夹并使用趁手的文本编辑器打开"lightbox.js"。
将62和63行替换为如下语句，这会设定图片路径。将我写的图片路径修改为你网站上Gallery2的路径。
/* 该Lightbox JS经自定义的URL */ var fileLoadingImage = "/[path]/[to]/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "/[path]/[to]/lightbox/images/closelabel.gif"; /*该Lightbox JS经自定义的URL结束 */
在第426行左右，你可以看到一行this.preloadNeighborImages();。紧接此行并在},"之前，添加下面的语句。此处的增补将解决Firefox中鼠标闪烁的问题（我估计Lightbox JS的将来版本中不再会需要此修改，因为在做此修改前请先检查你所使用的版本）。
if (!document.all) document.getElementById('prevLink').focus(); // 解决Firefox中鼠标闪烁问题的修改
关闭lightbox.js，你已经完成了。将整个lightbox文件的文件夹上传到Gallery2的顶层文件夹中。
现在你需要对外观主题文件夹下的3个文件进行编辑。所以下载针对你的外观主题的文件夹（至少要下载"theme.inc"，"templates/local/theme.tpl"和"templates/local/album.tpl"这些文件）。
编辑你所使用Gallery2外观主题的"theme.inc"文件。你需要将以下语句添加到文件中，在$theme['columnWidthPct'] = floor(100 / $params['columns']);这一行之后进行添加：
/* 添加resizedId至子值，为Lightbox JS所必须 */
if ( $theme['children'] ){
foreach ( $theme['children'] as $key => $value ){
if ( $value['id'] ){
list($ret,$resizedIds) =
GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
if ($ret)
return $ret;
}
$theme['children'][$key]['resizedId'] = $value['id'];
if ( $resizedIds ){
/* 找到最佳的重设尺寸之选项
*
* 使用最大宽度/高度=800; */
$lboxMaxEdge = 800;
$resizedEdge = NULL;
$resizedId = NULL;
foreach ( $resizedIds[$value['id']] as $resize ){
$width = $resize->getWidth();
$height = $resize->getHeight();
$edge = ( $width > $height )? $width : $height;
if ( $edge <= $lboxMaxEdge ){
if ( !isset($resizedEdge) ){
$resizedId = $resize->getId();
$resizedEdge = $edge;
} else if ( $edge > $resizedEdge ){
$resizedId = $resize->getId();
$resizedEdge = $edge;
}
}
}
$theme['children'][$key]['resizedId'] = $resizedId;
}
}
}
/*结束添加resizedId至子值，为Lightbox JS所必须*/
在文本编辑器中打开theme.tpl文件，并添加以下的风格页及javascript链接，直接添加到</head>那一行之上：
{* stylesheet and javascript for Lightbox JS *}
<link rel="stylesheet" type="text/css" href="{g->theme url="lightbox/css/lightbox.css"}" />
<script type="text/javascript" src="{g->theme url="lightbox/js/prototype.js"}"></script>
<script type="text/javascript" src="{g->theme url="lightbox/js/lightbox.js"}"></script>
<script type="text/javascript" src="{g->theme url="lightbox/js/scriptaculous.js?load=effects"}"></script>
{* end stylesheet and javascript for Lightbox JS *}
关闭theme.tpl文件，已经完成对它的处理。
打开album.tpl文件。在第98行或98行左右，会看到如下代码：
<div>
{if isset($theme.params.$frameType) && isset($child.thumbnail)}
{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
width=$child.thumbnail.width height=$child.thumbnail.height}
<a href="{$linkUrl}">
{g->image id="%ID%" item=$child image=$child.thumbnail
class="%CLASS% giThumbnail"}
</a>
{/g->container}
{elseif isset($child.thumbnail)}
<a href="{$linkUrl}">
{g->image item=$child image=$child.thumbnail class="giThumbnail"}
</a>
{else}
<a href="{$linkUrl}" class="giMissingThumbnail">
{g->text text="no thumbnail"}
</a>
{/if}
</div>
将以上所有代码替换为如下内容：
<div>
{if isset($theme.params.$frameType) && isset($child.thumbnail)}
{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType width=$child.thumbnail.width height=$child.thumbnail.height}
{* Lightbox JS的备用链接代码 *}
{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
{else}
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
title="{$child.title|markup}"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >
{/if}
{* 结束Lightbox JS的备用链接代码*}
{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
</a>
{/g->container}
{elseif isset($child.thumbnail)}
{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
{else}
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
title="{$child.title|markup}"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >
{/if}
{g->image item=$child image=$child.thumbnail class="giThumbnail"}
</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
class="giMissingThumbnail">
{g->text text="no thumbnail"}
</a>
{/if}
</div>
好了，对album.tpl的编辑已经完成。你应当无需再对photo.tpl进行编辑了。这里描述的安装已足够将photo.tpl替换为Lightbox JS函数了。
将你的外观主题文件夹上传至服务器（或者，如果你编辑了3个文件，就将你的编辑内容上传至theme.inc，theme.tpl和album.tpl）。
完成了！就是这样，现在Lightbox JS应能很好地运作了。
鸣谢[ ]
感谢论坛的scormeny（Sara Cormeny，http://www.paperlantern.com），是她编写了此份教程的大部分内容。
衷心感谢mikeage.net 的Mike Miller，他的教程中包括了一个我尚未使用过的简洁的缩放功能的修改。http://mikeage.net/2006/09/03/gallery-2-lightbox/ 。
PGLightbox外观主题中的指导和注释也对此有帮助：http://codex.gallery2.org/index.php/PGlightbox .
Lightbox JS 2.0.2很酷，不得不承认的酷！膜拜Lokesh Dahar吧！http://www.huddletogether.com/projects/lightbox2/
当然还要感谢整个Gallery团队，我很喜欢将你们的软体用于我的网页设计客户端。
额外特色[ ]
使lightbox贯穿多个页面[ ]
使lightbox贯穿相册的多个页面需要达到2个要求。首先是包括在Greypop外观主题中的lightbox模块。 将以下代码添加到album.tpl的头部之后
{assign var="total" value=0}
{assign var="first" value=0}
{assign var="last" value=0}
{math equation="x * y" x=$theme.params.columns y=$theme.params.rows assign=total}
{if ($theme.currentPage > 1)}
{math equation="(x - 1) * y + 1" x=$theme.currentPage y=$total assign=first}
{g->block type="lightbox.Before" class="Peers" windowSize=$theme.childCount first=$first}
{/if}
并将此添加到文件末尾。
{if ($theme.currentPage < $theme.totalPages)}
{math equation="x * y" x=$theme.currentPage y=$total assign=last}
{g->block type="lightbox.After" class="Peers" windowSize=$theme.childCount last=$last}
{/if}
你必须也对下个部分做此修改以保证能够正常运作。 感谢论坛的lvthunder作出的修改方案。
为Javascript被禁用的浏览器找后路[ ]
使lightbox还原为普通的G2相片布局需要编辑lightbox.js以及所有的图片链接。
按如下所示修改lightbox.js文件
62行：
/* 硬编码的图片路径 */
181行：
if(anchor.getAttribute('rev') && (relAttribute.toLowerCase().match('lightbox'))){
320行：
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.6 });
331行：
imageArray.push(new Array(imageLink.getAttribute('rev'), imageLink.getAttribute('title')));
338行：
if (anchor.getAttribute('rev') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('rev'), anchor.getAttribute('title')));
343行：
while(imageArray[imageNum][0] != imageLink.getAttribute('rev')) { imageNum++;}
你还需要编辑album.tpl中的链接，从
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
title="{$child.title|markup}"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >
修改为
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" rev="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}" title="{$child.title|markup}" rel="lightbox[photos]">
感谢论坛的sewpafly作出的修改方案。
向现有的相片详细信息页面添加链接[ ]
此修改将会向一般相片显示页面的缩略图之下添加一个链接，以及Lightbox弹出窗口的字幕区域之中。 我于http://gallery.jentulman.co.uk之中使用了它，这样很小的重设尺寸图片也可用于Lightbox的快速预览，而访问高解析率的图片也很容易。
在大约80行的位置插入以下代码。
<div>
{if isset($theme.params.$frameType) && isset($child.thumbnail)}
{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType width=$child.thumbnail.width height=$child.thumbnail.height}
{* alternate link code for Lightbox JS *}
{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
{else}
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
title="{$child.title|markup}"<br /><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">Click for details.</a>"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}</a><br />
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Other Sizes
{/if}
</a>
{/g->container}
{elseif isset($child.thumbnail)}
{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >{g->image item=$child image=$child.thumbnail class="giThumbnail"}
{else}
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
title="{$child.title|markup}<br /><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">Click for details.</a>"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >{g->image item=$child image=$child.thumbnail class="giThumbnail"}<br /></a>
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Other Sizes
{/if}
</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
class="giMissingThumbnail">
{g->text text="no thumbnail"}
</a>
{/if}
</div>
这一行
(第9行) title="{$child.title|markup}<br /><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">Click for details.</a>"
在上述于字幕区域创建链接的代码中，注意在字幕中所使用的html含有如'<'的字符，它们作为实体编写出来以防止对javascript的破坏。
迷你水印效果教程[ ]
警告：仅当以下所述适用于你的Gallery时，才可以使用水印效果：
- 你不想再lightbox中使用任何重设尺寸的图片，而仅想显示主要的照片。技巧：如果这可以用于你的Gallery的话，可以在相册属性中设定"图片最大尺寸"来进行尺寸重设。
如果以上适用，那么就请按照下面的两点来获得lightbox水印效果：
1 首先完成上面的教程。遵照除了theme.inc修改（不管这一部分即可）之外的所有要点进行操作，我们无需重设尺寸图片的信息，因为我们压根不会使用它们。现在，由于你跳过了对theme.inc的修改，在完成后面步骤之前你的lightbox是无法运作的。在你完成以下第2点之前，如果Gallery无法运作的话还请少安毋躁。
2 现在编辑album.tpl。在前面教程的最后部分，即对album.tpl做修改的那部分 – 找到其中所述对应的语句行并将$child.resizedId替换为$child.thumbnail.derivativeSourceId – 就这样！你需要替换两次。 现在你的lightbox就会显示带有水印效果的图片了。
已知的局限性[ ]
- 对于旧版本的G2，在使用lightbox时，水印效果无法应用。目前版本的G2（2.2.3）则能很好地运作。旧版本相关信息请见上文。
- 对于Apple Safari：当某相册包含不同尺寸的重设尺寸图片的话（即某些图片可用的重设尺寸图片比其他的要大些），lightbox就会出现具有错误倾向的行为：不是较小重设尺寸图片会按浏览器进行缩放，就是较大重设尺寸图片会被忽略-但图片框会按较大重设尺寸图片的尺寸进行尺寸重设。
- 横向链接的相册项目也会通过lightbox打开，因为它们无法包含children（已在前文的album.tpl代码中解决，通过将{if $child.canContainChildren}替换为{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'} – 如果没有出现这类问题的话请将此有关局限性的注释删除--)
- lightbox似乎无法再创建的overlay中播放视频。所以目前电影文件都被排除在玩，就算打开的话也总不会使用lightbox的...或者还有别的解决办法能让流媒体在lightbox中播放？可以在此进行讨论或发布解决方案：http://gallery.menalto.com/node/59196#comment-218187
- 重要注释：Lightbox设计初衷是仅针对相片的。如果你想使用其他媒体，可以尝试整合Thickbox。
- 图片查看计数不再有效，因为photopage不被请求。或许某些编程高手能够解决此问题-即使用lightbox查看图片时，图片计数无法实现的问题。或许photopage可以在后台被请求而无需实际显示出来？可以在此进行讨论或发布解决方案：http://gallery.menalto.com/node/58419
- 在整个相册页面完成载入后，lightbox才能运作：解决办法或者说是某种强化就是整合页面载入进度条，如"请稍候"或"正在载入..."，这样在页面未完成载入前点击缩略图时用户就不会觉得困扰了。有何建议？