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内置。它们是PGlightboxGreypop

此教程包括了自定义所需的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}"&lt;br /&gt;&lt;a href=&quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&quot;&gt;Click for details.&lt;/a&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}&lt;br /&gt;&lt;a href=&quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&quot;&gt;Click for details.&lt;/a&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>

这一行

(第9行)      title="{$child.title|markup}&lt;br /&gt;&lt;a href=&quot;{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}&quot;&gt;Click for details.&lt;/a&gt;"

在上述于字幕区域创建链接的代码中,注意在字幕中所使用的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才能运作:解决办法或者说是某种强化就是整合页面载入进度条,如"请稍候"或"正在载入...",这样在页面未完成载入前点击缩略图时用户就不会觉得困扰了。有何建议?