necoのひとりごと Lightbox2.04改良 (プリント機能追加編)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Lightbox2.04改良 (プリント機能追加編)

今回はLightbox2.04にプリンタ機能を追加する方法について書きます。
クライアントからライトボックスで画像を拡大した時に、そのままその画像をプリントしたいと言う要望がだされました。
ライトボックスに印刷機能を追加する方法について、いろいろ調べてみましたが説明しているものを見つけることができませんでした。
しかたないので、ライトボックスを解析して、自分でプログラムを修正することにしました。
その結果、ライトボックスに印刷ボタンを追加し、そのボタンをクリックすることで表示している画像が印刷できるようにライトボックスを改良したのでその方法について報告します。
まず、通常のライトボックスで印刷させる方法として右クリックで「印刷」を表示させそれをクリックするという方法があります。
しかしこの方法では、ライトボックスを実行する前の画面が拡大画像の前に印刷されます。
プリント用CSSを作っておくのも手ですが、そうするとライトボックスを実行させない元画面を印刷したいときに、その画面を印刷できなくなってしまいます。

そこで、ここでは、
まず、ライトボックスに印刷ボタンと、機能を追加する方法と
ライトボックスを実行しているときだけに有効になるプリント用CSSの作り方について説明します。

印刷機能の追加方法
lightbox.jsの修正箇所


50行目の
fileBottomNavCloseImage: 'images/closelabel.gif',

の下に、ライトボックスで表示させる印刷ボタンの画像ファイル名(ここではlightboxprint.gif)を追加します。
(当然印刷ボタン用の画像は自分で作成してimagesフォルダーに入れてください)

fileBottomNavCloseImage: 'images/closelabel.gif',
fileBottomNavPrintImage: 'images/lightboxprint.gif',

158行目の
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)


に、プリントボタン用領域を作るためのコマンド文(赤文字)を追加、

Builder.node('div',{id:'bottomNav'},[
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
),   //)の後ろに , を忘れないこと
Builder.node('a',{id:'bottomNavprint', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavPrintImage })
)



171行目(青文字)の下に
$('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;
(function(){

次のコマンド文(赤文字)を追加します。
これはプリントボタンをクリックした時に、ライトボックス用の印刷用CSSが適用されるようにするためです。

$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavprint').observe('click', (function() { this.lightboximageprint();}).bind(this));
var th = this;
(function(){

ここで、関数lightboximageprint() は、あとで後述するしますが、ライトボックスプリント用のCSSに切り替えるための関数で、lightbox.jsの最後に記述します。

177行目に
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';

bottomNavprint(赤文字)を追加する
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose bottomNavprint ';

493行目の
return [pageWidth,pageHeight];
}
の後に以下のコマンド文を追加する

return [pageWidth,pageHeight];
},   //}の後に,(カンマ)を忘れないこと

//(プリント用に追加)プリント用CSSに切り換える関数
lightboximageprint: function() {
document.getElementById("lightboxprintcss").href = "プリント用CSSファイル名";
print();

//元のCSSに戻すのが早いとプリントのときにプリント用CSSが反映されないので、プリンタにデータ転送される時間を稼ぐため、少し時間をおいてCSSをもとに戻す
setTimeout("cssreturn()",1000);
},

cssreturn: function(){
document.getElementById("lightboxprintcss").href = "元の通常の印刷用CSSファイル名";
}


以上で、ライトボックスにプリント用ボタンが表示され、それをクリックすると印刷できるようになります。


次に、プリント用CSSでの注意
通常画面のプリント用CSSとライトボックス画面を印刷するためのプリント用CSSを用意する。
htmlファイルのCSS読み込みには、以下のようにid追加する。このプログラムではid=lightboxprintcssとしている。
<link href="通常画面のプリント用CSSファイル名" rel="stylesheet" type="text/css" media="print" id="lightboxprintcss" />

ライトボックス印刷用CSSには、プログラムの最後に次の文を追加しておくとよいです。
これは、ライトボックスによって作られる余計な<div>領域を印刷させないようにするためです。

/* lightbox.jsによって作成された<div id="overlay">を削除する。*/
#overlay {
display:none;
}

/* lightbox.jsによって作成されたcloseと printボタン領域を削除する。*/
#bottomNav {
display: none;
}
/* 画像番号を削除する */
#numberDisplay {
display: none;
}

以上で印刷機能を持つライトボックスができます。
これまでの3回にわたって報告した改良ライトボックスを使用した例を以下に示します。
http://nyankonchi.web.fc2.com/mycats-gallery/mycats2009_7-12/index.html

今回報告した内容がどなたかの参考になれば幸いです。


テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

trackback


この記事にトラックバックする(FC2ブログユーザー)

-

管理人の承認後に表示されます

コメント

非公開コメント

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
プロフィール

webneco

Author:webneco
日々ニャンズ達の妨害と戦いながら、Webデザインを制作しています。

necoのリンク
ニャンコんち

うちの子日誌

猫ママの絵日記
カテゴリ
月別アーカイブ
Feed Me!
necoのひとりごとのRSSフィード
検索フォーム
最新記事
最新コメント
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。