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才能运作:解决办法或者说是某种强化就是整合页面载入进度条,如"请稍候"或"正在载入...",这样在页面未完成载入前点击缩略图时用户就不会觉得困扰了。有何建议?