编辑“Gallery:Lightbox JS教程”

'''重要：仅相册管理员可进行此操作，因为需要在核心模板"BreadCrumb.tpl"中做修改！'''

这里给出详细步骤说明移除根目录相册链接的办法。如果你希望访问者被限制于某用户相册之内进行浏览的话，移除根目录相册链接是一个好主意。

详细步骤：

1. 首先在"gallery2/modules/core/templates/blocks/"下新建一个"local"子目录

2. 将BreadCrumb.tpl复制到该新建的子目录中

3. 按以下方法修改local/BreadCrumb.tpl：

<pre>
{*
 * $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>
</pre>







== 引子 ==

该教程涵盖Lightbox JS 2.0.2在Gallery2.1.2站点安装相关信息。据我所知，它是依赖外观主题的；你可以将其插入任何外观主题加以使用。

我并非程序员而且也无法提供有价值的帮助 – 这只是我安装Lightbox JS 的一些记录，目的就是为了能够帮助其他用户节省时间，少走弯路。

至少有2款已知的外观主题具有lightbox内置。它们是[[Gallery:Themes:PGlightbox|PGlightbox]]和[[Gallery:Themes:greypop|Greypop]]

此教程包括了自定义所需的URL。我使用/[path]/[to]/的url开头 – 你则需要使用自己的url进行替换。

如大多数的电脑新手一样，我在自己的机器上完成所有的文本编辑工作，然后才是硬FTP将我的文件上传到服务器上。这些指导就是按这种程序编成的；如果你是直接在服务器上进行编辑的话，那么就必须对这些指导内容加以调整以符合你的方式加以利用。

== 教程 ==

从http://www.huddletogether.com/projects/lightbox2/#download 下载Lightbox JS，将其解压并打开lightbox文件夹。

在lightbox文件夹中，打开js文件夹并使用趁手的文本编辑器打开"lightbox.js"。

将62和63行替换为如下语句，这会设定图片路径。将我写的图片路径修改为你网站上Gallery2的路径。
<pre>
/* 该Lightbox JS经自定义的URL */
var fileLoadingImage = "/[path]/[to]/lightbox/images/loading.gif";		
var fileBottomNavCloseImage = "/[path]/[to]/lightbox/images/closelabel.gif";
/*该Lightbox JS经自定义的URL结束 */
</pre>
在第426行左右，你可以看到一行this.preloadNeighborImages();。紧接此行并在},"之前，添加下面的语句。此处的增补将解决Firefox中鼠标闪烁的问题（我估计Lightbox JS的将来版本中不再会需要此修改，因为在做此修改前请先检查你所使用的版本）。
<pre>
if (!document.all) document.getElementById('prevLink').focus(); // 解决Firefox中鼠标闪烁问题的修改
</pre>
关闭lightbox.js，你已经完成了。将整个lightbox文件的文件夹上传到Gallery2的顶层文件夹中。

现在你需要对外观主题文件夹下的3个文件进行编辑。所以下载针对你的外观主题的文件夹（至少要下载"theme.inc"，"templates/local/theme.tpl"和"templates/local/album.tpl"这些文件）。

编辑你所使用Gallery2外观主题的"theme.inc"文件。你需要将以下语句添加到文件中，在$theme['columnWidthPct'] = floor(100 / $params['columns']);这一行之后进行添加：
<pre>
				/* 添加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所必须*/
</pre>
在文本编辑器中打开theme.tpl文件，并添加以下的风格页及javascript链接，直接添加到</head>那一行之上：
<pre>
	{* 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 *}
</pre>
关闭theme.tpl文件，已经完成对它的处理。

打开album.tpl文件。在第98行或98行左右，会看到如下代码：
<pre>
		<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>
</pre>
将以上所有代码替换为如下内容：
<pre>
<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>
</pre>
好了，对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个要求。首先是包括在[[Gallery:Themes:greypop|Greypop]]外观主题中的lightbox模块。
将以下代码添加到album.tpl的头部之后
<pre>
{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}
</pre>
并将此添加到文件末尾。
<pre>
{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}
</pre>
你必须也对下个部分做此修改以保证能够正常运作。
感谢论坛的lvthunder作出的修改方案。

=== 为Javascript被禁用的浏览器找后路 ===
使lightbox还原为普通的G2相片布局需要编辑lightbox.js以及所有的图片链接。

按如下所示修改lightbox.js文件
<pre>
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++;}
</pre>

你还需要编辑album.tpl中的链接，从 
<pre>
<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]" >
</pre>
修改为
<pre>
<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]">
</pre>
感谢论坛的sewpafly作出的修改方案。


=== 向现有的相片详细信息页面添加链接 ===
此修改将会向一般相片显示页面的缩略图之下添加一个链接，以及Lightbox弹出窗口的字幕区域之中。
我于http://gallery.jentulman.co.uk之中使用了它，这样很小的重设尺寸图片也可用于Lightbox的快速预览，而访问高解析率的图片也很容易。

在大约80行的位置插入以下代码。
<pre>
<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}"&amp;lt;br /&amp;gt;&amp;lt;a href=&amp;quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&amp;quot;&amp;gt;Click for details.&amp;lt;/a&amp;gt;"
			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}&amp;lt;br /&amp;gt;&amp;lt;a href=&amp;quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&amp;quot;&amp;gt;Click for details.&amp;lt;/a&amp;gt;"
			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>
</pre>

这一行
<pre>
(第9行)      title="{$child.title|markup}&amp;lt;br /&amp;gt;&amp;lt;a href=&amp;quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&amp;quot;&amp;gt;Click for details.&amp;lt;/a&amp;gt;"
</pre>
在上述于字幕区域创建链接的代码中，注意在字幕中所使用的html含有如'&lt;'的字符，它们作为实体编写出来以防止对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才能运作：解决办法或者说是某种强化就是整合页面载入进度条，如"请稍候"或"正在载入..."，这样在页面未完成载入前点击缩略图时用户就不会觉得困扰了。有何建议？