ここから本文です

Lightboxをカスタマイズして表示されている画像をダウンロードするボタンを用意す...

gdskp601さん

2010/12/2119:14:26

Lightboxをカスタマイズして表示されている画像をダウンロードするボタンを用意することはできますか?

Lightboxをカスタムしたいと思っています。CLOSEボタンをクリックしたときに
表示されている画像をダウンロードできるようにしたいのですが具体的な方法がわかりません。どうしたらいいでしょうか?

jquery.lightbox-0.5.jsを書き換えてdownload.phpにジャンプさせてダウンロードさせるようには出来きました
---jquery.lightbox-0.5.js----
...
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
location.href="download.php";
return false;
});
...
--------------
---download.php----
<?php
$file = "images/1.jpg";
$file_length = filesize($file);
header("Content-Disposition: attachment; filename=$file");
header("Content-Length:$file_length");
header("Content-Type: application/octet-stream");
readfile ($file);
?>
--------------

しかし上記方法では複数枚表示している場合、ダウンロードされる画像はどれを表示していても1.jpgになってしまいますよね。。
これを表示されている画像をダウンロードさせるようにしたいです。可能でしょうか?
可能な場合、具体的な方法をお教えいただけませんか?
javascriptは初心者でどこをどうすればいいのか検討がつかなくなってしまいました。ご教授お願いします。

補足beebeegrantsさん ご回答ありがとうございます
教えて頂いた通りやってみたところ2.jpgをクリックしてhttp://test.com/download.php?filename=2.jpgに飛ぶようになりました!しかしダウンロードが始りません。というとdownload.phpがおかしいのかなと思ったのですが原因がわかりません。。もしくはdownload.phpと同じ階層に2.jpgがあるのですが間違っているんでしょうか?

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
1,689
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

beebeegrantsさん

編集あり2010/12/2809:16:28

jquery.lightbox-0.5.js の追加記述は、$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() { } だけという前提とします。(他に追加してもかまいませんが、後述のように、parentとchildrenを使っているので階層がずれてしまう場合正常に動かないかもしれません。)

download.phpを追加したところの関数を次のようにします。

$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
var files = $(this).parent().parent().parent().parent().children()[0].children[0].firstChild.getAttribute('src').split('/');
var filename = files[files.length-1];
location.href="download.php?filename="+filename;
_finish();
return false;
});

次に、download.php を次のように変更します。

<?php
$filename = htmlspecialchars($_GET['filename']);
$file = "photos".$filename;

if( is_readable( $file )) {
$file_length = filesize($file);
header("Content-Disposition: attachment; filename=$filename");
header("Content-Length:$file_length");
header("Content-Type: application/octet-stream");
readfile ($file);
}
else {
// ファイルがない場合にエラーの表示を出す?それか代替の画像をダウンロードさせる?
}
?>

なお、もしもファイルが存在しない場合、、といってもあらかじめWebページに表示されていると思うので、ファイルがなければそこで気づくと思いますが、PHP中のelse節で何か処理を追加するもよし、しないもよしです。

一歩進んで、lightboxのjsファイル中のdownload.phpの記述を追加したところで、location.hrefとやっていますが、ajaxでdownload.phpと同期通信してみてもいいかもしれません。

-----------------------------------------------------------

【補足】
申し訳ありません。1行ミスってました。

×:$file = "photos".$filename;
○:$file = "images/".$filename;

以上に変更してください。

こちらのテスト環境を変更せずにコピペしてしまいました。
提示いただいたdownload.php中で、$file = "images/1.jpg"; の記述があったので、画像ファイルはすべてimagesフォルダにあると仮定してます。

簡単にフォルダ/ファイル構成を下に書きます。(ずれたら・・・すみません)
他にもcssとかありますがとりあえず関係ありそうなとこだけ。

┌htmlファイル

├download.php

├imagesフォルダ - 1.jpg ~ 5.jpg(画像ファイルがここに入る。例として1~5.jpg)

└jsフォルダ(lightbox関連とか自作のjavascriptファイル)

先ほども書きましたが、もしも画像ファイルの場所を変更する場合は、訂正してもらった文の images/ のところを実際のフォルダに合うように修正してください。

これで動くとよいのですが・・・。

質問した人からのコメント

2010/12/28 14:13:59

降参 再度ご回答ありがとうございます!
phpを修正したところバッチリ出来ました!
いやあ勉強になります。ありがとうございます!

ajaxでdownload.phpと同期通信
も勉強してやってみようと思います!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。