貧しいXWiki、一言で言えば

{{velocity}} #panelheader($services.localization.render('xe.panels.navigation')) ## Escape special characters in macro parameter values. #set ($openToDoc = $doc.documentReference.toString().replaceAll('([~"])', '~$1')) {{documentTree showSpaces="false" showWikis="true" showTranslations="false" showAttachments="true" showChildDocuments="true" compact="true" openTo="document:$openToDoc" /}} #panelfooter() {{/velocity}} 

 {{velocity}} #set($myArray=$doc.AttachmentList) #set($myArray=$sorttool.sort($myArray, 'filename')) #foreach ($item in $myArray)#if($item.isImage()){{lightbox image=$item.filename title="Hello" width="20%" group="d1" height="20%"/}}#end#end {{/velocity}} 

 // ------------------------------------------------ ----------------------------
 //
 //ライトボックスv2.04
 // Lokesh Dhakar-http://www.lokeshdhakar.com
 //
 // Creative Commons Attribution 2.5 License-http://creativecommons.org/licenses/by/2.5/でライセンスされています
 //-個人プロジェクトと商用プロジェクトの両方で使用できます
 //-帰属には、著者名、著者リンク、およびライセンス情報をそのまま残す必要があります。
 //
 // jslintを使用してクリーンアップしました。
 // ------------------------------------------------ ----------------------------------
 / *グローバルLightboxOptions、Lightbox、Builder、Class、Prototype、$、$$、$ w、効果* /
 LightboxOptions = Object.extend（{
 fileLoadingImage： '$ doc.getAttachmentURL（ "loading.gif"）'、
 fileBottomNavCloseImage： '$ doc.getAttachmentURL（ "closelabel.gif"）'、
 overlayOpacity：0.8、//シャドウオーバーレイの透明度を制御します
 animate：true、//アニメーションのサイズ変更を切り替えます
 resizeSpeed：10、//画像サイズ変更アニメーションの速度を制御します（1 =最も遅く、10 =最も速い）
 borderSize：10、// CSSのパディングを調整する場合、この変数を更新する必要があります
 //画像をグループ化するとき、これは次の記述に使用されます：Image＃of＃。
 //英語以外のローカライズ用に変更します
 labelImage： "Image"、
 labelOf： "of"
 }、window.LightboxOptions ||  {}）;
 // ------------------------------------------------ -----------------------------------
 var Lightbox = Class.create（）;
 Lightbox.prototype = {
 imageArray：[]、
 activeImage：未定義、
 //初期化（）
 //コンストラクターは、DOMロードの完了時に実行されます。  updateImageListを呼び出してから
 //この関数は、影を表示するために使用されるページの下部にhtmlを挿入します
 //オーバーレイと画像コンテナ。
 //
初期化：関数（）{
 this.updateImageList（）;
 this.keyboardAction = this.keyboardAction.bindAsEventListener（this）;
 if（LightboxOptions.resizeSpeed> 10）{
 LightboxOptions.resizeSpeed = 10;
 }
 if（LightboxOptions.resizeSpeed <1）{
 LightboxOptions.resizeSpeed = 1;
 }
 this.resizeDuration = LightboxOptions.animate？  （（11-LightboxOptions.resizeSpeed）* 0.15）：0;
 this.overlayDuration = LightboxOptions.animate？  0.2：0;  //シャドウのフェードイン/フェードアウト期間
 // Lightboxが起動すると、250から250から現在の画像のサイズに合わせてサイズが変更されます。
 //アニメーションがオフになっている場合、画面のちらつきを防ぐために非表示になります
 //白250 x 250ボックス。
 var size =（LightboxOptions.animate？250：1）+ 'px';
 //コードは、次のようなHTMLをページの下部に挿入します。
 //
 // <div id = "overlay"> </ div>
 // <div id = "lightbox">
 // <div id = "outerImageContainer">
 // <div id = "imageContainer">
 // <img id = "lightboxImage">
 // <div style = "" id = "hoverNav">
 // <a href="#" id="prevLink"> </a>
 // <a href="#" id="nextLink"> </a>
 // </ div>
 // <div id = "loading">
 // <a href="#" id="loadingLink">
 // <img src = "images / loading.gif">
 // </a>
 // </ div>
 // </ div>
 // </ div>
 // <div id = "imageDataContainer">
 // <div id = "imageData">
 // <div id = "imageDetails">
 // <span id = "caption"> </ span>
 // <span id = "numberDisplay"> </ span>
 // </ div>
 // <div id = "bottomNav">
 // <a href="#" id="bottomNavClose">
 // <img src = "images / close.gif">
 // </a>
 // </ div>
 // </ div>
 // </ div>
 // </ div>
 var objBody = $$（ 'body'）[0];
 objBody.appendChild（Builder.node（ 'div'、{id： 'overlay'}））;
 objBody.appendChild（Builder.node（ 'div'、{id： 'lightbox'}、[
   Builder.node（ 'div'、{id： 'outerImageContainer'}、
       Builder.node（ 'div'、{id： 'imageContainer'}、[
           Builder.node（ 'img'、{id： 'lightboxImage'}）、
           Builder.node（ 'div'、{id： 'hoverNav'}、[
               Builder.node（ 'a'、{id： 'prevLink'、href： '＃'}）、
               Builder.node（ 'a'、{id： 'nextLink'、href： '＃'}）
           ]）、
           Builder.node（ 'div'、{id： 'loading'}、
               Builder.node（ 'a'、{id： 'loadingLink'、href： '＃'}、
                   Builder.node（ 'img'、{src：LightboxOptions.fileLoadingImage}）
               ）
           ）
       ]）
   ）、
   Builder.node（ 'div'、{id： 'imageDataContainer'}、
       Builder.node（ 'div'、{id： 'imageData'}、[
           Builder.node（ 'div'、{id： 'imageDetails'}、[
               Builder.node（ 'span'、{id： 'caption'}）、
               Builder.node（ 'span'、{id： 'numberDisplay'}）
           ]）、
           Builder.node（ 'div'、{id： 'bottomNav'}、
               Builder.node（ 'a'、{id： 'bottomNavClose'、href： '＃'}、
                   Builder.node（ 'img'、{src：LightboxOptions.fileBottomNavCloseImage}）
               ）
           ）
       ]）
   ）
 ]））;
 $（ 'overlay'）。hide（）。observe（ 'click'、（function（）{
 this.end（）;
 }）。bind（this））;
 $（ 'lightbox'）。hide（）。observe（ 'click'、（function（event）{
 if（event.element（）。id == 'lightbox'）{
 this.end（）;
 }
 }）。bind（this））;
 $（ 'outerImageContainer'）。setStyle（{幅：サイズ、高さ：サイズ}）;
 $（ 'prevLink'）。observe（ 'click'、（function（event）{
 event.stop（）;
 this.changeImage（this.activeImage-1）;
 }）。bindAsEventListener（this））;
 $（ 'nextLink'）。observe（ 'click'、（function（event）{
 event.stop（）;
 this.changeImage（this.activeImage + 1）;
 }）。bindAsEventListener（this））;
 $（ 'loadingLink'）。observe（ 'click'、（function（event）{
 event.stop（）;
 this.end（）;
 }）。bind（this））;
 $（ 'bottomNavClose'）。observe（ 'click'、（function（event）{
 event.stop（）;
 this.end（）;
 }）。bind（this））;
 var th = this;
 （関数（）{
   var ids =
       'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink' +
       'imageDataContainer imageData imageDetailsキャプション番号Display bottomNav bottomNavClose';
   $ w（ids）.each（function（id）{
 th [id] = $（id）;
 }）;
 }）。defer（）;
 }、
 //
 // updateImageList（）
 //アンカータグをループして「ライトボックス」参照を探し、onclickを適用します
 //適切なリンクへのイベント。  ajaxを使用して画像を動的に追加した後、再実行できます。
 //
 updateImageList：function（）{
 this.updateImageList = Prototype.emptyFunction;
 document.observe（ 'click'、（function（event）{
   var target = event.findElement（ 'a [rel ^ = lightbox]'）||  event.findElement（ 'area [rel ^ = lightbox]'）;
   if（ターゲット）{
       event.stop（）;
       this.start（ターゲット）;
   }
 }）。bind（this））;
 }、
 //
 //開始（）
 //オーバーレイとライトボックスを表示します。 イメージがセットの一部である場合、兄弟をimageArrayに追加します。
 //
 start：function（imageLink）{
 $$（ 'select'、 'object'、 'embed'）。each（関数（ノード）{
 node.style.visibility = 'hidden';
 }）;
 //オーバーレイをストレッチしてページを埋め、フェードインします
 var arrayPageSize = this.getPageSize（）;
 $（ 'overlay'）。setStyle（{width：arrayPageSize [0] + 'px'、height：arrayPageSize [1] + 'px'}）;
 var effect = new Effect.Appear（this.overlay、{duration：this.overlayDuration、from：0.0、to：LightboxOptions.overlayOpacity}）;
 this.imageArray = [];
 var imageNum = 0;
 if（（imageLink.rel == 'lightbox'））{
   //画像がセットの一部でない場合、単一の画像をimageArrayに追加します
   this.imageArray.push（[imageLink.href、imageLink.title]）;
 } else {
   //画像がセットの一部である場合..
   this.imageArray =
       $$（imageLink.tagName + '[href] [rel = "' + imageLink.rel + '"]'）。
       collect（関数（アンカー）{
 return [anchor.href、anchor.title];
 }）。
       uniq（）;
   while（this.imageArray [imageNum] [0]！= imageLink.href）{
 imageNum ++;
 }
 }
 //ライトボックスの上下のオフセットを計算します
 var arrayPageScroll = document.viewport.getScrollOffsets（）;
 var lightboxTop = arrayPageScroll [1] +（document.viewport.getHeight（）/ 10）;
 var lightboxLeft = arrayPageScroll [0];
 this.lightbox.setStyle（{top：lightboxTop + 'px'、left：lightboxLeft + 'px'}）。show（）;
 this.changeImage（imageNum）;
 }、
 //
 // changeImage（）
 //画像コンテナのサイズ変更に備えて、ほとんどの要素を非表示にして画像をプリロードします
 //
 changeImage：関数（imageNum）{
 this.activeImage = imageNum;  //グローバル変数を更新します
 //遷移中に要素を非表示にします
 if（LightboxOptions.animate）{
 this.loading.show（）;
 }
 this.lightboxImage.hide（）;
 this.hoverNav.hide（）;
 this.prevLink.hide（）;
 this.nextLink.hide（）;
 //ハック：Opera9は現在、scriptaculous opacityをサポートせず、fxを表示します
 this.imageDataContainer.setStyle（{opacity：0.0001}）;
 this.numberDisplay.hide（）;
 var imgPreloader = new Image（）;
 //画像がプリロードされると、画像コンテナのサイズを変更します
 imgPreloader.onload =（function（）{
   var maxheight = 640;
   if（imgPreloader.height> maxheight）
     {
     var scale = imgPreloader.height / maxheight
     imgPreloader.height = maxheight;
     imgPreloader.width = imgPreloader.width / scale;
      }
       
   this.lightboxImage.src = this.imageArray [this.activeImage] [0];
   this.resizeImageContainer（imgPreloader.width、imgPreloader.height）;
 }）。bind（this）;
 imgPreloader.src = this.imageArray [this.activeImage] [0];
 }、
 //
 // resizeImageContainer（）
 //
 resizeImageContainer：function（imgWidth、imgHeight）{
 //現在の幅と高さを取得します
 var widthCurrent = this.outerImageContainer.getWidth（）;
 var heightCurrent = this.outerImageContainer.getHeight（）;
 //新しい幅と高さを取得
 var widthNew =（imgWidth + LightboxOptions.borderSize * 2）;
 var heightNew =（imgHeight + LightboxOptions.borderSize * 2）;
 //古いものから新しいものへの変更に基づいたスカラー
 var xScale =（widthNew / widthCurrent）* 100;
 var yScale =（heightNew / heightCurrent）* 100;
 //新しい画像と古い画像のサイズの差を計算し、必要に応じてサイズを変更
 var wDiff = widthCurrent-widthNew;
 var hDiff = heightCurrent-heightNew;
 if（hDiff！= 0）{
 var scaleXEffect = new Effect.Scale（this.outerImageContainer、yScale、{scaleX：false、duration：this.resizeDuration、queue： 'front'}）;
 }
 if（wDiff！= 0）{
 var scaleYEffect = new Effect.Scale（this.outerImageContainer、xScale、{scaleY：false、duration：this.resizeDuration、delay：this.resizeDuration}）;
 }
 //新しい画像と古い画像が同じサイズで、スケーリングの移行が不要な場合、
 //画像のちらつきを防ぐために短時間停止します。
 var timeout = 0;
 if（（hDiff == 0）&&（wDiff == 0））{
  タイムアウト= 100;
   if（Prototype.Browser.IE）{
タイムアウト= 250;
 }
 }
 （関数（）{
   this.prevLink.setStyle（{height：imgHeight + 'px'}）;
   this.nextLink.setStyle（{height：imgHeight + 'px'}）;
   this.imageDataContainer.setStyle（{width：widthNew + 'px'}）;
   this.showImage（）;
 }）。bind（this）.delay（timeout / 1000）;
 }、
 //
 // showImage（）
 //画像を表示し、隣人のプリロードを開始します。
 //
 showImage：function（）{
 this.loading.hide（）;
 var effectAppear = new Effect.Appear（this.lightboxImage、{
  期間：this.resizeDuration、
  キュー：「終了」、
   afterFinish：（関数（）{
 this.updateDetails（）;
 }）。bind（this）
 }）;
 this.preloadNeighborImages（）;
 }、
 //
 // updateDetails（）
 //キャプション、画像番号、下部ナビゲーションを表示します。
 //
 updateDetails：function（）{
 //キャプションがnullでない場合
 if（this.imageArray [this.activeImage] [1]！= ""）{
   this.caption.update（this.imageArray [this.activeImage] [1]）。show（）;
 }
 //画像がset display 'Image x of x'の一部である場合
 if（this.imageArray.length> 1）{
   this.numberDisplay.update（LightboxOptions.labelImage + '' +（this.activeImage + 1）+ '' + LightboxOptions.labelOf + '' + this.imageArray.length）.show（）;
 }
 var effectParallel = new Effect.Parallel（
   [
新しいEffect.SlideDown（this.imageDataContainer、{sync：true、duration：this.resizeDuration、from：0.0、to：1.0}）、
      新しいEffect.Appear（this.imageDataContainer、{sync：true、duration：this.resizeDuration}）
   ]、
   {
      期間：this.resizeDuration、
       afterFinish：（関数（）{
      //オーバーレイサイズを更新し、navを更新します
      var arrayPageSize = this.getPageSize（）;
      this.overlay.setStyle（{height：arrayPageSize [1] + 'px'}）;
      this.updateNav（）;
       }）。bind（this）
   }
 ）;
 }、
 //
 // updateNav（）
 //適切な前後のホバーナビゲーションを表示します。
 //
 updateNav：function（）{
 this.hoverNav.show（）;      
 //セットの最初の画像でない場合、前の画像ボタンを表示します
 if（this.activeImage> 0）{
 this.prevLink.show（）;
 }
 //セットの最後の画像でない場合、次の画像ボタンを表示します
 if（this.activeImage <（this.imageArray.length-1））{
 this.nextLink.show（）;
 }
 this.enableKeyboardNav（）;
 }、
 //
 // enableKeyboardNav（）
 //
 enableKeyboardNav：function（）{
 document.observe（ 'keydown'、this.keyboardAction）;
 }、
 //
 // disableKeyboardNav（）
 //
 disableKeyboardNav：function（）{
 document.stopObserving（ 'keydown'、this.keyboardAction）;
 }、
 //
 // keyboardAction（）
 //
 keyboardAction：function（event）{
 var keycode = event.keyCode;
 var escapeKey;
 if（event.DOM_VK_ESCAPE）{// mozilla
   escapeKey = event.DOM_VK_ESCAPE;
 } else {//すなわち
   escapeKey = 27;
 }
 var key = String.fromCharCode（keycode）.toLowerCase（）;
 if（key.match（/ x | o | c /）||（keycode == escapeKey））{//ライトボックスを閉じる
   this.end（）;
 } else if（（key == 'p'）||（keycode == 37））{//前の画像を表示
   if（this.activeImage！= 0）{
       this.disableKeyboardNav（）;
       this.changeImage（this.activeImage-1）;
   }
 } else if（（key == 'n'）||（keycode == 39））{//次の画像を表示
   if（this.activeImage！=（this.imageArray.length-1））{
       this.disableKeyboardNav（）;
       this.changeImage（this.activeImage + 1）;
   }
 }
 }、
 //
 // preloadNeighborImages（）
 //前の画像と次の画像をプリロードします。
 //
 preloadNeighborImages：function（）{
 var preloadNextImage、preloadPrevImage;
 if（this.imageArray.length> this.activeImage + 1）{
   preloadNextImage = new Image（）;
   preloadNextImage.src = this.imageArray [this.activeImage + 1] [0];
 }
 if（this.activeImage> 0）{
   preloadPrevImage = new Image（）;
   preloadPrevImage.src = this.imageArray [this.activeImage-1] [0];
 }
 }、
 //
 //終了（）
 //
 end：function（）{
 this.disableKeyboardNav（）;
 this.lightbox.hide（）;
 var effectFade = new Effect.Fade（this.overlay、{duration：this.overlayDuration}）;
 $$（ 'select'、 'object'、 'embed'）。each（関数（ノード）{
 node.style.visibility = 'visible';
 }）;
 }、
 //
 // getPageSize（）
 //
 getPageSize：function（）{
 var xScroll、yScroll、pageHeight、pageWidth、windowWidth、windowHeight;
 if（window.innerHeight && window.scrollMaxY）{ 
 xScroll = window.innerWidth + window.scrollMaxX;
 yScroll = window.innerHeight + window.scrollMaxY;
 } else if（document.body.scrollHeight> document.body.offsetHeight）{// Explorer Mac以外
 xScroll = document.body.scrollWidth;
 yScroll = document.body.scrollHeight;
 } else {// Explorer Mac ... Explorer 6 Strict、Mozilla、Safariでも動作します
 xScroll = document.body.offsetWidth;
 yScroll = document.body.offsetHeight;
 }
 if（self.innerHeight）{// Explorerを除くすべて
 if（document.documentElement.clientWidth）{
 windowWidth = document.documentElement.clientWidth;
 } else {
 windowWidth = self.innerWidth;
 }
 windowHeight = self.innerHeight;
 } else if（document.documentElement && document.documentElement.clientHeight）{// Explorer 6厳格モード
 windowWidth = document.documentElement.clientWidth;
 windowHeight = document.documentElement.clientHeight;
 } else if（document.body）{//その他のエクスプローラー
 windowWidth = document.body.clientWidth;
 windowHeight = document.body.clientHeight;
 } 
 //総高さがビューポートの高さよりも小さい小さなページの場合
 if（yScroll <windowHeight）{
 pageHeight = windowHeight;
 } else {
 pageHeight = yScroll;
 }
 //合計幅がビューポートの幅より小さい小さなページの場合
 if（xScroll <windowWidth）{ 
 pageWidth = xScroll; 
 } else {
 pageWidth = windowWidth;
 }
 return [pageWidth、pageHeight];
 }
 };
 document.observe（ 'dom：loaded'、function（）{
 var lightbox = new Lightbox（）;
 }）;