• 締切済み

【PHP+lightbox2】 キャプション自動化

WEBサイトの仕組みにあまり強くない方のWEBサイト制作を依頼されており、できるだけ更新を楽にできるようなサイトを制作しています。 作品展示のためのサイトなので、更新内容は作品画像とそれに伴うちょっとした説明文のみということで、 http://potapota.akinetworks.com/?eid=426167 ↑こちらのサイトの 『アップローダーで上げた画像をフォルダ指定してlightboxでまとめてギャラリー化する』 という仕組みを使おうと考えているのですが、 拡大画像が表示された時に画像の下部に出るキャプション(上のサイトでは画像ファイルの名前が表示されています)を画像と同じように、 ひとつのフォルダにテキストデータなどの形式で保存し、 PHPでそのフォルダを指定して、画像一つ一つにテキストを設定すること無く画像キャプションとして表示するには上のサイトのソースをどのように編集すれば良いでしょうか? テキストデータをアップロードする際は上のサイトのようなアップローダーを使用できなくても構いません。 どなたかご助言頂けたら幸いです。

  • AJAX
  • 回答数2
  • ありがとう数3

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

詳しく見てませんけど、lightalbum.phpの52行目 $output .= '<div class="section fade">' . '<a href="' . $album[$num]["img_path"] . '/' . $large . '" rel="lightbox[hreview]" title="' . $large . '"><img src="' . $album[$num]["img_path"] . '/' . $thumb . '" /></a></div>'; が、lightbox用のリンク要素を生成してるところみたいですね。ここの  title="' . $large . '~ がキャプションのセットになります。 $largeだと、その前の $large = str_replace($thumb_disc, $large_disc, $thumb); で、画像のファイル名自体がセットされているので、 その画像ファイル名をもとに、fread()でテキストファイルのフォルダーから該当するテキストファイルの中身を読み込んで、$captionにでもいったん格納して、  title="' . $caption . '~ としたらどうでしょう。 ※ページロード完了後javascript側で、テキストファイルを再度AJAXして取り込み、 title属性を書き換えるの技もありますが、そもそもPHPでページ生成してるんだから 動的にテキストの内容が変わっていくんじゃないから、AJAXの必要性が無いですね。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

その画像のキャプションに対応するテキストをどのように選ぶかが肝になると思います。

nyancoropon
質問者

補足

返答ありがとうございます。 そうですね。 関連付けはしなくとも、画像とテキストを同じファイル名にして昇順で表示というのが手っ取り早いのかな、と考えています。

関連するQ&A

  • Lightbox2でのキャプションについて

    画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、(当然ですが)サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか? ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想(こんな感じに出来たらいいなぁというイメージです) <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。(JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません) 他に何か良い方法はありますでしょうか?

  • highslideでキャプションを画像の右側に出す方法

    highslideでキャプションを画像の右側に出す方法 こんにちわ。 highslideを使用しているんですが、 設定した画像をクリックすると、ポップアップで画像とキャプションが表示されますが、キャプションが画像の下に出ます。 キャプションを画像の右側に出すにはどうすればいいでしょうか? CSSやJSと変更箇所が多いので回答しづらいとはおもいますが、 よろしくお願いします。

  • highslideHPのEDITORでキャプションを画像の右側に出すサ

    highslideHPのEDITORでキャプションを画像の右側に出すサンプルの取得方法 こんにちわ。 highslideを使用しているんですが、 設定した画像をクリックすると、ポップアップで画像とキャプションが表示されますが、 キャプションを画像の右側に出すにはどうすればいいでしょうか? やりたいことは以下のURLにあるサンプルでいうと、四つ目のセピアになった木が画像のイメージです。 http://highslide.com/ 以下のエディターでサンプルソースをGETできそうですが、 クリックすると左に画像、右にテキストという形にこのEDITORで表示させるには、 どこをどう設定すればできるんでしょうか? http://highslide.com/editor/ できるだけ私のイメージに近づけてそのまま貼り付けたいと思っています。 以上、よろしくお願い致します。

  • 動画にキャプションをつける方法

    ループ動画にhtml5でキャプションをつけたいと考えています。 動画は背景にフルスクリーンで表示します。 動画自体にキャプションをつけた場合、ブラウザサイズによって文字が劣化したりするので、テキストとして表示させたいです。 JSのCuepointは現在サイトがないみたいで使用することができませんでした。 WEBVTTはフォントの背景に黒いベタがひかれているので除外です。 jQueryで動画にキャプションをつけられるものはありますか。 ご回答お願い致します。

  • 画像の下部にキャプションを入れる

    現在スマホサイトを作成しています。 そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 http://subculsheets.blog.fc2.com/blog-entry-19.html 上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。 キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。 下記が現在のコードです。 HTML----------------------------------------------------------- <div class="photo-center2"> <img src="../img/○○.jpg"> <div class="caption-txt2">キャプションテキスト</div> </div> --------------------------------------------------------------- CSS----------------------------------------------------------- .photo-center2 img{ width:100%; max-width:380px; } .photo-center2{ position: relative; border:1px solid rgb(204, 204, 204); padding: 5px; background-color:#ffffff; margin:0 auto; margin-bottom: 15px; width:90%; max-width:380px; } .caption-txt2{ position: absolute; color: #fff; padding: 5px; font-size: 12px; bottom: 9px; background-image: url("../images/caption.png"); text-align:center; width:95%; max-width:382px; } ------------------------------------------------------ どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか? ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • lightboxがなぜ嫌われるか

    はじめまして。 自分はデザイン系の学生で、ポートフォリオサイトを持っています。このたび作品紹介のページのデザインを更新するにあたって、lightboxの導入を考えています。 ちなみに使用を考えているサンプルスクリプトは以下です。 http://www.dolem.com/lytebox/ しかし、ネット上で調べてみると「lightboxを多用してるのが嫌でページ訪問をやめた」など、lightboxを嫌ってる人がある程度いるようです。雰囲気としてはFlashのみで構築されたページ(しかもページ移動などが考慮されていない)を毛嫌いするのと同じように自分は感じたのですが、どうしてlightboxが嫌がられるのかいまいちわかりません。 自分は今までlightboxを使ったサイトを見てきましたが、特にストレスを感じたことも無いのです(とはいえ、プロがデザインしたものがほとんどですが)。 なぜ自分がLightboxを使うかというと、作品写真のサムネイルを並べ、それをLightboxで表示する、という方法を使いたいからです。サムネイルはページに10枚以内。サムネイルページには極力少ない文字情報でプロジェクト等の情報を掲載し、あとはスライドショー形式でLightboxを使いたいのです。レイアウト上、サムネイルとメイン画像を同時に表示するスペースは確保しずらいです。なので別窓ではないけどオーバーレイで元のレイアウトを無視して大きく画像を表示できるLightboxは適当な解決策なのです。 ちなみにページレイアウトは、[TOP]-[作品一覧]-[個々の作品のサムネイル] となる予定です。 lightboxが嫌われる理由、ご存知の方教えていただけますでしょうか。

  • ◆大至急!ヤバイです!◆カムタジアスタジオの不具合

    見て頂きまして、ありがとうございます!! 今カムタジアスタジオ スタジオ7 という動画編集ソフトを使い、 編集しています。 画像1のように動画にキャプション(テキストのナレーション)を 挿入しています。 ソフト内のプレビュー再生ではきちんとキャプションが正しく生じされるのですが、 「制作と共有」→「WEBで共有 もしくは YOU TUBEで共有で動画をレンダリングして 作成したものは何回してもキャプションが全く表示されません。 今日中に絶対に動画編集を間に合わせなければならず、会社のサポート30,31日は休みなので とても困っています>< どうか正しくキャプションを表示させるための思い当たるところなどがありましたら 教えて下さい! お手数おかけしますが、どうぞよろしくお願いします!!

  • lightbox風なもののCSSの使い方

    http://www.e-magine.ro/web-dev-and-design/36/moodalbox/ ↑のサイトのlightbox風の機能を使って、HTMLファイルをページ遷移なしで読み込もうとしています。読み込むページと読み込まれるページは違うフォルダにあり、それぞれに違うCSSを適用しているのですが、どうやっても読み込まれるページで画像が取得できません。外部CSS内のbackgroundやHTML内のimgも表示されません。その他の配置に関するCSSはちゃんと適用されているので、なぜ画像だけが取得できないのかが理解できません。 読み込まれるページのCSSを読み込むページのheadで読み込んでみたり、読み込まれるページのHTMLに直接CSSを書いてみたりもしましたが、変化がありませんでした。CSSはおろか画像やリンクなどすべてを全ページで相対指定しているので、そういうところに差異が出たのかなと疑っています。 そこで、こういう風なツールを使った時、読み込まれるCSSは読み込むページと読み込まれるページのどちらで読み込むべきなんでしょうか。また、ページ遷移していない以上、読みこまれるページの相対指定も読み込むページからの指定とするべきなんでしょうか。よろしくお願いします。

  • wordpressでキャプション内で改行するには

    どなたか教えてください。 wordpressでサイトを作っているのですが、 photospaceというプラグインで写真とその説明文を表示するページを作成中です。 写真に説明文を表示させるのに、画像にキャプションを表示させているのですが、 キャプション内の文章の改行や文字揃えなどは可能でしょうか。 現状は文章が右揃えで羅列されています。 <br>タグはそのまま文字列として表示されてしまい、ダメでした。 方法があれば教えてください。 もしくは、ギャラリーページに、写真を表示させると同時に、長めの説明文が表示できる方法(プラグインなど)があれば教えていただきたいです。 よろしくお願いいたします。

  • lightboxでの画像表示

    お世話になっております。 フレームを使った上でlightboxを使用して画像の表示を試みています。 以前同じような質問をされている方がいらっしゃったのですが、 そちらのご回答では分からない事があったので、それについて質問させていただきます。 吉野家様の「吉野家メニュー」の「朝定食」の各画像の表示方法や、 http://www.yoshinoya.com/menu/index.html/ webデザインの見本帳様の「おすすめサイトをご紹介」の各画像の表示方法のような http://www.web-mihon.com/ 画像の表示方法なのですが、どちらのサイト様もフレームを使用し その上で画像を全体表示させているように見えます。 しかし、以前「フレーム使用でそのページ全体にlightboxで画像を表示させる事は出来ない(出来ても難しい)」といった記述や問答を拝見しているので、上記サイト様はフレームではなく、フレームの様なデザインをされているという事でしょうか? フレームでlightbox使用を諦めていた矢先、上記のサイト様を拝見したので希望を持ってしまったのですが、もしも上記サイト様のような画像表示方法をご存知の方がいらっしゃいましたらご回答をお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう