• 締切済み

lightwindowでPDFを表示させるには？

lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか？ <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>

  • HTML
  • 回答数3
  • ありがとう数3

みんなの回答

  • medal
  • ベストアンサー率100% (3/3)
回答No.3

補足です。 私自身は、lightWindowのPDF表示は、FireFoxでの挙動がおかしかったので見送った経緯があります。（先に記述したFlashPaper表示に変更しました。） 但し、これは、私の環境だけかも知れないので、ブラウザチェックはこまめにやられた方がいいです。 以上、お目汚しいたしました。

  • medal
  • ベストアンサー率100% (3/3)
回答No.2

先ほどの回答を訂正いたします。 lightwindowの属性追加することで表示できるかもしれません。 params="lightwindow_type=external" を追加してみてください。 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"> ↓ <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号" params="lightwindow_type=external"> いかがでしょうか？ 間違った情報をお知らせしスイマセンでした。

higeukon
質問者

お礼

丁寧な回答ありがとうございます！ １年ぐらい前に質問し、誰にも回答いただけず、半ばあきらめていました。 教えていただいた方法を試してみます。 もちろん、ブラウザチェックもいろいろ試してみます。

  • medal
  • ベストアンサー率100% (3/3)
回答No.1

lightWindow2.0のサンプルには “Media Movies, Flash, PDF's... just link directly to the file!” と書かれていますが、実際にはPDFフォーマットのファイルはサポートされていないと思います。 サンプルもPDFをFlashPaperに変換したものを使用していると思います。 なので、私もPDFを表示させるときは面倒ですがFlashPaperに変換して表示させています。 しかし、ここで注意なのですがmacromedia社がAdobe社に吸収されFlashPaperのサポートが終了してしまっています。 現在は、まだFlashPlayerで表示できているみたいですが、今後、何時サポートされなくなるかも知れません。その辺を注意してPDFを表示させるかどうか検討してください。 ※FlashPaper自体をお持ちで無い場合はPDFの表示は別の手を考えるしかないと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • Light Window　IE6,7,8での不具合について

    こんにちは。javascript初心者です。 宜しくお願い致します。 Light Windowのサンプルを作成しております。 参考サイトの通りに作ってアップしたのですが、 WindowsIE6.7.8でおかしな事になって しまいました。 問題１：サムネール画像が表示されない パスはあっています。 マック版Safari.Firefoxでは問題なく表示されます。 問題2：フラッシュ動画が勝手に動いてしまいます。 マック版Safari.Firefoxでは問題ないです。 調べてみたのですが原因、解決方法が分かりません。 ブラウザに依存しないLightWindowというのも 見つかりませんでした。 以下、HTMLのソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="css/lightwindow.css" type="text/css"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightwindow.js"></script> <title>LightWindowサンプル</title> </head> <body> <!--グループではない画像を複数表示--> <div><a href="photo/002.jpg" class="lightwindow" title="夕焼け"><img src="thumb/002.jpg" width="96" height="54" alt="夕焼け" /></a> <a href="photo/003.jpg" class="lightwindow" title="富山湾"><img src="thumb/003.jpg" width="96" height="54" alt="富山湾"></a></div> <!--／グループではない画像を複数表示--> <!--グループで表示 --> <div> <a href="photo/001.jpg" class="lightwindow" rel="[00]" title="富士山"> <img src="thumb/001.jpg" width="96" height="54" alt="富士山"> </a> <a href="photo/002.jpg" class="lightwindow" rel="[00]" title="夕焼け"> <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け"> </a> <a href="photo/003.jpg" class="lightwindow" rel="[00]" title="富山湾"> <img src="thumb/003.jpg" width="96" height="54" alt="富山湾"> </a> </div> <!--／グループで表示 --> <div> <a href="photo/uranai.swf" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">swfの表示もOK</a> </div> <div> <a href="http://journal.mycom.co.jp/" class="lightwindow">毎コミジャーナル</a> </div> <div> <a href="http://www.yahoo.co.jp/" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=300">html大きさ指定入れるのもOK</a> </div> </body> </html> 参考にしたURLはこちらです。 http://journal.mycom.co.jp/articles/2007/10/02/lw/index.html 成果物はこちらです。 http://www1.odn.ne.jp/~cks23160/light_window_sample/ お分かりになる方、いらっしゃいましたらどうぞよろしくお願い します。

  • thickboxで画像ギャラリーが表示されない

    あるサーバー上でthickboxの画像ギャラリーが表示されていたんですが、別のサーバに移し変えたとたんに表示されなくなりました。 <script language="javascript" src="js/jquery.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="js/thickbox.js" charset="UTF-8"></script> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all"> </head> <body> <div class="others"><a href="new_bike/12413289033.jpg" title="花" rel="old" class="thickbox"><img src="images/other_button.gif" border="0" alt="その他の画像" class="rollover" /></a><a href="new_bike/12413289034.jpg" title="木" rel="old" class="thickbox" style="display : none;"></a></div> 表示されなくなってからはスクリプトタグ内にcharset="UTF-8"を追加しただけです。 サーバ環境に依存するのでしょうか？ 教えてください。 宜しくお願いします。

  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • fancyboxのポップアップ時の画像の白枠の削除

    http://fancyapps.com/fancybox/#examples このサイトを参考にして、 <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); ------------追加した部分------------ $(".fancybox") .attr('rel', 'gallery') .fancybox({ padding : 0 }); ------------------------------------ </script> と</head>の上に書いたのですが、白枠が残っています。 フォルダはほぼそのまま入れて、fancybox自体は挙動するのでリンクも間違っていないはずです。 htmlは <a class="fancybox" rel="group" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a> <a class="fancybox" rel="group" href="images/2_b.jpg"><img src="images/2_s.jpg" alt="" /></a> です。 念のためgalleryをgroupにしたり、paddingをmarginにしてもダメでした。 何が問題なのでしょうか？ご教示お願い致します。

  • jqueryについて（v 1.4.2）

    jqueryについて（v 1.4.2） <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。

    • ベストアンサー
    • AJAX
  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • IE6,IE7でThickBox3の画像がうまく表示されません。

    IE6,IE7でThickBox3の画像がうまく表示されません。 htmlへの記述は以下のような感じなのですが、Firefoxでは問題なく表示されるのですが IE6、IE7だと、画像だけ表示されなかったり、同じ画像が上下に２枚表示されたりします。 そしてたまに上手く表示されます。 検索するとIEで真中に表示されないというのがありましたが、それとは原因が違うようです。 どなたかご存知の方はいませんでしょうか？ 宜しくお願い致します。 <ul> <li><a href="../img/photo/flower/001.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/001_s.jpg" alt="花" width="100" height="66" /></a></li> <li><a href="../img/photo/flower/002.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/002_s.jpg" alt="花" width="100" height="66" /></a></li> </ul>

    • ベストアンサー
    • HTML
  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • サムネイル画像のclass切替がうまく動かない。

    すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして　class="current"　を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。

  • light boxが上手く表示されない

    はじめまして。 ホームページ作成初心者の者です。 今独学でホームページを作成してまして写真をlightboxを使って表示させたいのですが上手く拡大されず、そのままのサイズで中途半端に表示されます。 HTML内の<head>～</head>タグ内の記述は以下になります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css"/> <title>写真ギャラリー</title> </head> 以下1部省略 <div id="gallery-boxA"> <p> <a href="images/ナゴラン.jpg"rel="lightbox" title="ナゴラン"><img src="images/ナゴラン.jpg" width="200" height="180" /></a> <a href="images/ケイタイオウフウラン.jpg"rel="lightbox" title="ケイタイオウフウラン"><img src="images/ケイタイオウフウラン.jpg" width="200" height="180" /></a> <a href="images/サガリラン.jpg"rel="lightbox" title="サガリラン"><img src="images/サガリラン.jpg" width="200" height="180" /></a> </p> </div>になります。 初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。 上手く拡大表示するにはどうしたらいいのでしょうか？ 何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する