Shadowboxの使い方が分からない

前へ 次へ
このQ&Aのポイント
  • Shadowboxを使い方が分からないので、参照しているサイトの情報ではダウンロードしたShadowboxデータをどこに格納すればいいのか分からない。
  • 具体的な運用現状として、フォルダーを分けて格納しているが、LICENSEファイルとREADMEファイルはどこに置くべきかも分からない。
  • プラグイン「Shadowbox.js」は、lightbox系で便利でかっこいいと言われているが、ダウンロードしたShadowbox内にはCSSやJavaScriptのデータがあるのかも不明。
回答を見る
  • ベストアンサー

Shadowboxを使い方が分からない

下記のサイトを参照して、Shadowboxの運用を試みています。ただ、このサイトには、ダウンロードしたShadowboxデータをどこに格納するのか詳しく書かかれていないので、格納する場所が分かりません。どうかご教授下さい。 *************************************************** 私の運用現状(ある程度フォルダーを分けました。) top folder (全てこのフォルダーに下記データを格納) ⇂ ⇂➝css (folder) ⇂ ⇂ ⇂ ⇂➝shadowbox.css ⇂ ⇂➝images (folder) ⇂ ⇂ ⇂ ⇂➝close.png、 loading.gif next.png、pause.png、play.png、previous.pngが(imageフォルダ)入っている ⇂ ⇂➝js　(floder) ⇂ ⇂ ⇂ ⇂➝shadowbox.js ⇂➝img　(表示する画像や動画) ⇂ ⇂➝huku.html ダウンロードしたShadowbox-3.0.3内にある”LICENSE”ファイルと”README”ファイルは上のどこに置くのでしょうか。 **************************************** lightbox系プラグイン「Shadowbox.js」が便利でかっこいい http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html ************************** link type="text/css <script type="text/javascript" cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ********************

  • HTML
  • 回答数5
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

どこに置いてもいいですけど、shadowbox-3.0.3（名前変更可）をそのままフォルダごとアップロードで構いません。 LICENSEとREADMEは動作に必要ないのでアップロードしなくてもいいですが、アップロードしても大丈夫です。 使用方法はダウンロードサイトのUsageに書いてあるようにすれば問題なく動作します。 <head>内に入れる： <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> <body>内に入れる： <a href="myimage.jpg" rel="shadowbox">My Image</a>

その他の回答 (4)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.5

Windows8 + IE10 なら、Adobe Flash Playerが入っているようなことが書いてありますが、swf形式のファイルは再生できませんか。 当初の質問内容と異なってきましたので、改めて質問されて動画に詳しい方の回答を得てください。

imamuu0
質問者

補足

最後まで質問に付き合って頂きありがとうございました。 動画が上手く再生されるかわかりませんが、やってみます。

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.4

wmv形式のファイルで試しましたところ、メディアプレーヤーで再生されました、なのでメディアプレーヤーがインストールされていないと再生されないかも知れません。 swf形式に変換されてはいかがでしょうか、いずれにせよ対応するソフトがインストールされていなければ再生されないのではないでしょうか。 Shadowbox.jsをダウンロードする時には Select the player(s) for the types of content you want to display: Flash (swf files)～Windows Media Playerにチェックが必要です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css"> <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="mymovie.swf" rel="shadowbox;height=400;width=600">My Movie (swf)</a> <a href="mymovie.wmv" rel="shadowbox;height=400;width=600">My Movie (wmv)</a> </body> </html>

imamuu0
質問者

補足

Windows 8にはWindows media playerが入ってないからインストールするしかないんですね。 swfプレイヤーはそもそもPCにインストールするという概念があるんですか。SWFプレイヤ(playper.swf)をダウンロードして、どこかshadowboxのフォルダーに入れるとありますが。(情報源は下記) Shadowbox.js 3.0bの設置方法と使い方 http://blog.cheki.net/archives/1483 このサイトでは、swfプレイヤー（playper.swf）をshadowboxのフォルダー（何かフォルダーが沢山あるらしいですが）の、 とあるフォルダーに入れるそうです。 ただ今のShadowbox3.0.3には、フォルダーはありません。どこにswfプレイヤー(playper.swf)を置くのでしょうか。

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.3

回答No.1 です。 一部訂正します。 shadowbox-3.0.3（名前変更可）をそのままフォルダごとアップロードした場合は。 <head>内に入れる： <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css"> <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> 以上。

imamuu0
質問者

補足

outbraveさんご教授いただきありがとうございます。 画像のポップアップ表示が出来ました。ありがとうございます。 この画像は自分のPCに保存されていたものを使いました。 色々とやっているうちに、PCに保存さているmp4やwmv形式の動画もポップアップ表示を試してみましたが、画像が映りません。 PC：Windows 8 64 bit CPU:Intel Celeron CPU P4600 2.0GHz Memory：2GB Graphic Board:なし Quicktime、GOMソフト、未インストール(やろうと思えばできると思います) Shadowboxで動画を再生するには、パソコン側に対応ソフト(Windows Media PlayerやGOM Player)が入っていないと再生されないのでしょうか。 関連性がありそうですので、Shadowbox.initに手を加えました <head> <link type="text/css" href="css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ players: ['img','swf','flv','mp4','ifame','html'] }); </script> </head> これでも再生されません。 どうすれば、PCに保存されている動画が再生しますか、ご教授をお願いします。

  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.2

べつにただのJavaScriptだから、きちんとパス通ってれば置く場所はどこでもいいです。 画像見れないとかだったらCSSの書き換えミスです。書き換えできないとかは考慮してないでしょうな・・・。 まぁ、指定してないので書かれてないだけですね。 ・ReadMeって取説だよ。 ・Licenseって配布におけるライセンス記述文書だよ。 どちらも目を通してから使うものだよ。ただのtxtです。設置しなくていいです。 で、ReadMeに簡単な仕様は書いてある。 ＞cssもjavascriptもダウンロードしたShadowbox内にデータがあるのでしょうか ・・・？ 質問の意図がちょっとわかりかねます。 shadowbox.css shadowbox.js って書いてるのは？

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

関連するQ&A

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • Shadowbox.jx3.0.3が動かない。

    初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、 公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。 色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。 何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。 以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="1.jpg" rel="shadowbox" title="My Image">My Image</a> </body> </html> ※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。 jqueryもDLして、ヘッダ部分に <script type="text/javascript" src="/jquery-1.5.1.min.js"></script> という一文も入れてみましたが全く動かない状態です。 説明足らずな点も多いと思いますが、どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • shadowbox について

    最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • shadowbox3.0.3で画像が開きません

    環境 Mac OSX DreamweaverCS5.5 上記環境でサイト制作しまして、Dwの"ブラウザでプレビュー"の使用してSafariとFirefoxで問題なく動作、表示する事を確認した後、FC2ホームページにアップロードしたところshadowbox.jsが動作せずに困っております。 具体的には <a href="image/image01.JPG" rel="shadowbox"><img src="image/image01_thumb.jpg"></a> とゆうコードでサムネイル画像をクリックして拡大表示したいのですが、クリックするとブラウザが暗転し"Loading"の文字とアニメーションが表示されますが、そこから進まず画像が表示出来ません。 またshadowboxの.jsファイルと.cssファイルを読み込む記述は以下のようになってます <link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" /> <script type="text/javascript" src="js/shadowbox/shadowbox.js"> </script> <script type="text/javascript"> Shadowbox.init({ language: 'ja', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script> これまでshadowboxに関するブログや質問など見てみましたが、特にコードの記述には問題が無さそうに思い、どこに問題があるのか全く分からなくなってしまいました。 これにはどのような問題が考えられるでしょうか？　初歩的な質問だとは思いますがよろしくお願いし致します。

    • ベストアンサー
    • CSS
  • fc2blogでshadowboxを使用したいと思い

    fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 参考サイトを順に追っていきますと 最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css　以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。 ○○○○にはアップロード先のURLが入ります。 {background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;} {background-image:url(http://○○○○/close.png);} {background-image:url(http://○○○○/next.png);} {background-image:url(http://○○○○/previous.png);} {background-image:url(http://○○○○/play.png);} {background-image:url(http://○○○○/pause.png);} 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> を貼り付けて更新ボタンを押して、新しく記事を書くで <a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

  • shadowboxについて

    こんばんわ。 以前こちらでshadowbox使用の際のライブラリについて質問させて頂き、 お陰で設置する事が出来ました。ありがとうございます。 さて本題なのですが・・・。 iframeの中からshadowboxを使うと、中のフレーム内だけに画像が表示されてしまいます。 これをフレームの外に画像を表示させたいのです。（呼び出す感じですかね？） http://www.shadowbox-js.com/faq.html リンク先におそらく同じであろう質問と回答がありました。（自信はありませんが；） 翻訳して言いたい事は何となくわかるような気もするのですが、 正直javascriptに関する知識があまり無いので、自分の記述ミスが原因だと思います。 lightboxでは無理と聞いた事があるので、もしかしたら出来ないかもしれませんが・・・。 お力をお借りしたく質問いたしました。宜しくお願いします。

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • lightboxの設置

    <html lang="ja"> <head> <link href="css/lightbox.css" rel="stylesheet" media="all" type="text/css" /> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <title></title> </head> <body><a href="img/bb123.jpg" data-lightbox="group" data-title="S001"><img src="img/bb123.jpg" alt="" width="256" /></a> <script src="css/lightbox.js" type="text/javascript"></script> <script> lightbox.option({ 'fitImagesInViewport' : true, 'wrapAround': false }) </script> </body> </html> とりあえずテストで、lightbox2の設置をしようとしているのですが、 サイトに書いてあるのと同じように、入力してみたのですが、 サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox２が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。

  • 画像拡大機能のjsをスマホで読み込まない

    ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。

  • 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> お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する