5月
27
2012

LightboxにDOWNLOADボタンをつけてみるテスト。

XOOPS Cubeとあるサイトで写真共有コンテンツを作りたいとの事で、WordPressで
やってみようかとか色々と考えたのですが、時間的な問題から結局
使い慣れたXoops X (Pack2012) でサイトを構築し、パッケージに
入っているGnaviを使ってみました。

このモジュールにはLightboxが入っているようで、画像をクリックすると
同一画面上に画像を上乗せ表示してくれます。ところが、登録する画像の
サイズが大きい都合、ノートPC等では画面から大きくはみ出してしまい、
表示サイズを調整する事になりまして。

ネットで調べてやってみたら、表示サイズ調整自体は出来たのですが、右クリックで
「名前を付けて画像を保存」が効かない事が判明。じゃぁ、いっそ「CLOSE」ボタンの隣に
「DOWNLOAD」ボタンくっつけて、ダウンロードできるようにしちゃえ!…となり、
ちょっとやってみました。

今回はxoops_trust_path側のファイルは修正しないので、以下の説明はhtml側の
modules/gnavi/ の話になります。
ディレクトリ名を変えてインストールしている場合は、緑色文字部分を
変更した名前に読み替えてください。
 

 
LightboxにDOWNLOADボタンをつけてみるテスト【目標】
Lightboxで表示された画像の右下にある「CLOSE」ボタンの隣に
「DOWNLOAD」ボタンを付けて、押下すると画像ファイルを
”表示”ではなく”ダウンロード”させるようにする。
尚、画像表示サイズは横幅・高さとも600pxを上限とする。
 
 
【材料】
・「DOWNLOAD」ボタン画像
 →今回は「CLOSE」ボタンと同じ
  横幅:高さ = 62px:22pxのものを用意しました。

DOWNLOADボタン
 
  これを modules/gnavi/images/ に
  アップロードしてきます。
 
 
【作り方1】
まずは、Lightboxの表示サイズのカスタマイズをします。
前述の通り、サイズは横幅・高さとも600pxを上限にするので、
imgWidthMax及びimgHeightMaxの値は「600」を設定しています。

修正ファイル: modules/gnavi/js/lightbox.js
441行目辺りの「imgPreloader.onload=function(){」の次の行に
下記ハイライト部分のコードを追加。

		// once image is preloaded, resize image container
		imgPreloader.onload=function(){

			var imgWidthMax  = 600;	// Max Width Size [px] 
			var imgHeightMax = 600;	// Max Height Size [px]
			var imgNewScale = 1;
			if( imgWidthMax < imgPreloader.width ) {
				imgNewScale = imgWidthMax / imgPreloader.width;
				imgPreloader.width   = imgWidthMax;
				imgPreloader.height *= imgNewScale;
			}
			if( imgHeightMax < imgPreloader.height ) {
				imgNewScale = imgHeightMax / imgPreloader.height;
				imgPreloader.width *= imgNewScale;
				imgPreloader.height = imgHeightMax;
			}

			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}

 
 
次にスタイルシートの調整。参考サイトを元にIE6用にもハックを追加してます。

修正ファイル: modules/gnavi/css/lightbox.css
下記コードを追加。

#lightbox img#lightboxImage{
width: auto; height: auto; max-width: 600px; max-height: 600px;
}
* html body #lightbox img#lightboxImage{
height: expression(this.height >= 600 ? "600px" : "auto");
}

 
 

【参考サイト】
》LightBox 2 で表示される画像サイズを指定する
》[WordPress] lightboxで画像の最大幅を設定

 
 
【作り方2】
さて、いよいよDOWNLOADボタンの追加です。
今回は、ファイルをダウンロードさせるプログラムをPHPで作っておいて、
Lightboxに追加した「DOWNLOAD」ボタンを押下すると、引数に画像の
URLをつけて渡すようにしています。

■ファイルをダウンロードさせるプログラム
作成ファイル:modules/gnavi/download.php

<?php

	//ダウンロードさせるファイルのURLを取得
	$downloadFileUrl = $_GET['url'];

	//ファイル名抽出
	$downloadFileName = basename($downloadFileUrl);

	// ヘッダ
	header("Content-Type: application/octet-stream");

	// ダイアログボックスに表示するファイル名
	header("Content-Disposition: attachment; filename=$downloadFileName");

	// 対象ファイルを出力
	readfile($downloadFileUrl);

	exit;

?>

 
 
■lightbox.jsの修正
修正ファイル: modules/gnavi/js/lightbox.js
 
 
まず、上の方の「Configuration」部分に下記コードを追加(ハイライト部分)。
(今回は67行目辺りに追加してみました。)
「DOWNLOAD」ボタン画像と、画像をダウンロードさせるPHPのファイル名の定義です。

//
//	Configuration
//
var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";

var filePicSaveImage = "images/picture_save.gif";
var downloadFilePgm = "download.php";

var overlayOpacity = 0.8;	// controls transparency of shadow overlay

var animate = true;			// toggles resizing animations
var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable

 
 
次に、329行目辺りに下記コードを追加(ハイライト部分)。

		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

		var objPicSave = document.createElement("div");
		objPicSave.setAttribute('id','picSave');
		objImageData.appendChild(objPicSave);

		var objPicSaveLink = document.createElement("a");
		objPicSaveLink.setAttribute('id','picSaveLink');
		objPicSave.appendChild(objPicSaveLink);

		var objPicSaveImage = document.createElement("img");
		objPicSaveImage.setAttribute('src', filePicSaveImage);
		objPicSaveLink.appendChild(objPicSaveImage);

	},

 
 
更に、437行目辺りに下記コードを追加(ハイライト部分)。

		// hide elements during transition
		if(animate){ Element.show('loading');}
		Element.hide('lightboxImage');
		Element.hide('hoverNav');
		Element.hide('prevLink');
		Element.hide('nextLink');
		Element.hide('imageDataContainer');
		Element.hide('numberDisplay');		
		Element.hide('picSaveLink');
		
		imgPreloader = new Image();

 
 
最後に、【作り方1】で追加したコードの最後の部分に
下記コードを追加(ハイライト部分)。

		// once image is preloaded, resize image container
		imgPreloader.onload=function(){

			var imgWidthMax  = 600;	// Max Width Size [px] 
			var imgHeightMax = 600;	// Max Height Size [px]
			var imgNewScale = 1;
			if( imgWidthMax < imgPreloader.width ) {
				imgNewScale = imgWidthMax / imgPreloader.width;
				imgPreloader.width   = imgWidthMax;
				imgPreloader.height *= imgNewScale;
			}
			if( imgHeightMax < imgPreloader.height ) {
				imgNewScale = imgHeightMax / imgPreloader.height;
				imgPreloader.width *= imgNewScale;
				imgPreloader.height = imgHeightMax;
			}

			Element.setHref('picSaveLink', downloadFilePgm + "?url=" + imageArray[activeImage][0]);

			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}

 
 
■lightbox.cssの修正
修正ファイル: modules/gnavi/csslightbox.css
下記コードを追加。

#imageData #picSaveLink {  width: 66px; height: 22px; float: right;  padding-bottom: 0.7em; padding-right: 20px; display: inline !important;}

 
 

【参考サイト】
》Lightbox 2.0 拡大した画像を右クリックで保存させたい
》Lightboxをカスタマイズして表示されている画像をダウンロードするボタンを用意することはできますか?
》Lightbox.js で学ぶ script.aculo.us アニメーションの使い方
》ファイルをダウンロードさせる。
》ファイルのパスからファイル名を取得

 
 
非営利サイトで仕事ではないのだが、結構気合入れて調べてしまった;
このサイト、何故かPHPデバッグをON若しくはAdelieDebugを入れてたりすると
特に問題なく、エラーも出ずにアカウント情報が表示できるのですが、
PHPデバッグをOFFにしてアカウント情報を表示すると500 Internal Server Errorに
なってしまうという、前例の無い障害が起きてまして。PHPのmemory_limitの値も
問題ないみたいだし、サーバのログとっても原因特定できず、ちょっとお手上げ状態。

良く解らないまま、とりあえず「PHPデバッグ」と「themes/ ディレクトリからの
自動アップデートを有効にする」をOFFにして一般公開用設定にしてみたら、
何故か問題なくアカウント情報が閲覧できる…ますます解らないTT
こちらは、後日時間がとれたら改めて調べてみようと思っています。

ところでGnavi、地域のエリアガイド等を作成するために開発したモジュールと
紹介されていますが、フォトアルバムモジュールであるMyAlbum-Pを元に作られていて、
何より裏側(管理メニュー)に行かなくても表側からある程度操作出来てしまうので
最近重宝しています。XCLも、来月には大きなイベントが開催されるという話も
あるようですし、WordPressみたいに盛り上がって欲しいものです。
 
 

 


7 Comments + Add Comment

  • 最新版Lightbox2.51でダウンロードボタンをつける方法を
    教えていただきたいです。

    • コメントありがとうございます。
      ご返信遅くなりまして、大変失礼致しました。

      さて、取り急ぎLightbox 2.51をダウンロードして
      中を見て見たのですが、大分変わった様ですね。
      jQuery勉強中なので調べながらやってみたところ、
      とりあえずlightbox.jsの50行目あたりのfunction LightboxOptions() に
      ダウンロード画像ファイル等を定義して、85行目あたりの
      Lightbox.prototype.build = function() のところをいじって
      ダウンロード画像を表示させて…までは出来たのですが、アクティブに
      なっている画像のファイル名を取得する方法が変わったようで、
      ぱっと見では解りませんでした。お力になれず、すみません。

      これを実装するような機会に恵まれましたら、より調査を行って
      記事なりにしたいと思います。

  • 気になってしまって引き続き調べてたら、
    何となく出来たようなのでご報告します。

    lightbox.jsの50行目あたりから下記記述がありますので、
    ハイライト部分を追記してください。(画像のパスは環境に応じて変えてください)

        function LightboxOptions() {
          this.fileLoadingImage = 'images/loading.gif';
          this.fileCloseImage = 'images/close.png';
          this.resizeDuration = 700;
          this.fadeDuration = 500;
          this.labelImage = "Image";
          this.labelOf = "of";
          this.filePicSaveImage = "images/picture_save.gif";
          this.downloadFilePgm = "download.php?url=";
        }
    

    次に、85行目あたりから下記記述がありますので、
    ハイライト部分を追記・変更してください。

        Lightbox.prototype.build = function() {
          var $lightbox,
            _this = this;
          $("<div>", {
            id: 'lightboxOverlay'
          }).after($('<div/>', {
            id: 'lightbox'
          }).append($('<div/>', {
            "class": 'lb-outerContainer'
          }).append($('<div/>', {
            "class": 'lb-container'
          }).append($('<img/>', {
            "class": 'lb-image'
          }), $('<div/>', {
            "class": 'lb-nav'
          }).append($('<a/>', {
            "class": 'lb-prev'
          }), $('<a/>', {
            "class": 'lb-next'
          })), $('<div/>', {
            "class": 'lb-loader'
          }).append($('<a/>', {
            "class": 'lb-cancel'
          }).append($('<img/>', {
            src: this.options.fileLoadingImage
          }))))), $('<div/>', {
            "class": 'lb-dataContainer'
          }).append($('<div/>', {
            "class": 'lb-data'
          }).append($('<div/>', {
            "class": 'lb-details'
          }).append($('<span/>', {
            "class": 'lb-caption'
          }), $('<span/>', {
            "class": 'lb-number'
          }) , $('<div/>', {
            "class": 'lb-picdlContainer'
          }).append($('<a/>', {
            "class": 'lb-picdl'
          }).append($('<img/>', {
            src: this.options.filePicSaveImage
          })))), $('<div/>', {
            "class": 'lb-closeContainer'
          }).append($('<a/>', {
            "class": 'lb-close'
          }).append($('<img/>', {
            src: this.options.fileCloseImage
          }))))))).appendTo($('body'));
          $('#lightboxOverlay').hide().on('click', function(e) {
            _this.end();
            return false;
          });
          $lightbox = $('#lightbox');
          $lightbox.hide().on('click', function(e) {
            if ($(e.target).attr('id') === 'lightbox') _this.end();
            return false;
          });
          $lightbox.find('.lb-outerContainer').on('click', function(e) {
            if ($(e.target).attr('id') === 'lightbox') _this.end();
            return false;
          });
          $lightbox.find('.lb-prev').on('click', function(e) {
            _this.changeImage(_this.currentImageIndex - 1);
            return false;
          });
          $lightbox.find('.lb-next').on('click', function(e) {
            _this.changeImage(_this.currentImageIndex + 1);
            return false;
          });
          $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
            _this.end();
            return false;
          });
          $lightbox.find('.lb-picdl').on('click', function(e) {
            window.location.href = _this.options.downloadFilePgm + _this.album[_this.currentImageIndex].link;
            return false;
          });
        };
    

    これでダウンロード自体は実装できると思います。
    見栄えは考慮していないので、ボタンの配置やCSSは
    お好みで変更してください。
    参考にして頂ければ幸いです。

  • すごい!ボクの環境でもできました!!
    感謝です!!

    • お役に立てて光栄です^^
      僕も、勉強になりました。

  • 初心者です。
    wordpressのプラグインlightbox-2.7.1での実装方法をお教え頂けないでしょうか。
    また、ダウンロードボタンを押すと別ページへリンクさせる方法も差し支えなければご教示願います。

    • コメントありがとうございます。
      ご返信遅くなりまして、大変失礼致しました。

      さて、現在少々たてこんでおりまして、
      プラグインのソースを追う時間が取れない状況です。
      WordPressのフォーラムには凄い方々が揃っておいでですので、
      お急ぎであればそちらでお聞きになるのが良いと愚考致します。
      お役に立てず、申し訳ございません。

コメントする

*

2017年9月
« 7月    
 123
45678910
11121314151617
18192021222324
252627282930  

Archives

Recommended