• ベストアンサー
  • 困ってます

wordpress内lightbox 画像階層

コンフリクト対策でwordpress内包のjQuery(プラグイン)を使わないで普通のjQueryだけを使うように設定しました。 その後に jquery.lightbox-0.5.jsを入れましたが、 「close」や「next」やらの画像が入ったimagesフォルダをどこに置いていいのか分かりません。 wordpress内でなかったら、lightboxを使用するページと同階層というのは知っていて、 テーマ内のindex.phpと同階層にimagesフォルダ置いてみたり、 cssフォルダと同階層にimagesフォルダ置いてみたりしましたが 画像が表示されません。 jquery.lightbox-0.5.js自体は動作しています。 lightbox適用したい画像は固定ページ内にあるのですがwordpressもPHPも初心者故、 固定ページもどのファイルから書き出されているのかもよく分かっていません。 (index.phpとデータベースから書き出されている内容の組み合わせなのでしょうか?) ざっくりと書いた質問で分かりにくいとは思いますが、宜しくお願い致します。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数357
  • ありがとう数0

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

  • ベストアンサー
  • 回答No.1

とりあえずimagesの置き場所はlightboxのcssフォルダと同階層でOK 固定ページにどのテンプレートファイルが使われてるかは http://wpdocs.sourceforge.jp/テンプレート階層 ↑ここ見てください しかしいまいち情報不足です lightboxのフォルダを[WPフォルダ外|WPフォルダ内|テーマフォルダ内]に置いて [固定ページ|index.php]に[サンプルコードをコピー|リンク付画像を挿入]してみたが [サンプル画像が|ボタンなどのパーツが|固定ページに挿入した画像が|リンクした画像がlightboxで]表示されない それぞれどれでしょうか? とりあえずさしあたって初心者がやらかしそうな事書いておきます 1、Wordpressのサイトルートディレクトリはテーマフォルダじゃありません テーマ内の画像を貼るときは<img src="<?php echo get_template_directory_uri(); ?>/images/xxxxx.jpg"/> ってカンジに、まずテーマフォルダのURLを頭につけます 2、プラグインと違ってリンク付画像だからって勝手にlightboxにはなりません 通常のlightboxと使用方法と同様に<a>のrel属性が"lightbox"になってないとlightbox適用されません 固定ページに普通に画像挿入して投稿する場合、挿入画像のリンク詳細設定で <a>のrel属性の設定もできるのでlightboxと入れてください

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • wordpressのプラグインlightboxについて

    はじめまして、wordpressで、プラグインlightboxについて伺いたいのですが、以下のプラグインlightboxを使用して画像を表示させたいのですが。。。 http://wordpress.org/extend/plugins/lightbox-2/ まずプラグインの有効化までは出来たのですが それから何をすれば良いか不明です。 他のサイトでは画像のアンカータグにrel="lightbox"を記述すればOKとありましたが、何らlightboxの動きをしてくれません。 どの様にすれば良いかどなたか教えてください。 宜しくお願い致します。

  • アメブロでのlightbox設置について

    アメブロでのlightbox設置について教えてくださいませ。 アメブロにjQuery版のlightboxを設置したいと思い、下記の参考サイトさまの手順とおりに設定したのですが、画像がいつまでも読み込み中になりうまく表示されません。 http://ameblo.jp/new-bulue9/entry-10487238040.html 私が行った手順としては 1:jQuery lightBox plugin 0.5をダウンロードし、フォルダ名を「Lightboxj5」に変更したのちレンタルサーバーにアップロード。 2:下記プラグインの「ホームページのURL/」をレンタルサーバーのURLに書き換えて保存。 <!--■ jQuery Lightbox 5.0 ■--> <head> <link href="ホームページのURL/Lightboxj5/css/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" media="screen" /> <script src="ホームページのURL/Lightboxj5/js/jquery.js" type="text/javascript"></script> <script src="ホームページのURL/Lightboxj5/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('a[rel*=lightbox]').lightBox({ overlayBgColor:'#000009', overlayOpacity:0.6, imageLoading:'ホームページのURL/Lightboxj5/images/lightbox-ico-loading.gif', imageBtnClose:'ホームページのURL/Lightboxj5/images/lightbox-btn-close.gif', imageBtnPrev:'ホームページのURL/Lightboxj5/images/lightbox-btn-prev.gif', imageBtnNext:'ホームページのURL/Lightboxj5/images/lightbox-btn-next.gif', containerResizeSpeed:350, txtImage:'画像:', txtOf:'/' }); }); </script> </head> <!--■■■■■■■■■--> 3:「ブログを書く」段階で画像にで指示されたとおりrel="lightbox"を a タグの最後に記述。 <a href="http://stat.ameba.jp/user_images/20100221/22/new … rel="lightbox"><img src="http://stat.ameba.jp/user_images/20100221/22/new … /></a> 以上です。他のプラグインとバッティングしている可能性も考え他をすべて削除して起動してみましたが、これも駄目でした。 稚拙な文章でわかりつらいかとは思いますが何卒お知恵をお貸しくださいませ。

  • wordpressでcookie.jsを使う

    wordpressの初心者です。 こちら http://blog.idea-clippin.com/?p=129 の機能をwordpressで作っているサイトに搭載したいと考えています。 jsは別の部分でつかっていて動くので indexと同じ階層にjsフォルダを作りその中にjquery.layerBoard.jsをつっこみ imgフォルダに同じ画像名の画像を。 hederとbodyにコピペをしたのですが、文字しか出なかったのでおそらく欠けているのはcookie.jsと考えています。 cookie.jsを入れれば使えるとおもうのですが、紹介サイトでも省略されていていまいちよくわかりませんでした。 https://github.com/carhartl/jquery-cookieは見てみたもののリンク切れなのかダウンロードボタンはありませんでした。 ワードプレスにcookie.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> お願いします。

  • map とlightbox

    以下のようにグーグルマップのように地図上のマークをクリックするとlightboxで画像がでるように したんですが機能しません。この組み合わせはだめなのでしょうか? 或いは他の方法があるんでしょうか? 出来ればマークを触れると画像がポップアップする方がいいのですが。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <div><img src="images/map.png" alt="" usemap="#map" border="0"/></div> <div id="gallery"> <map name="map"> <area href="images/jtb.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" /> </map> </div>

  • LightBoxの種類

    PHP初心者です。 CakePHPで画像をクリックしたら大きな画像にしたくて、 いろいろ調べていると、LightBoxというもので出来ることがわかりました。 しかし、LightBoxにはいろいろ種類があるみたいで、 どれを使えばいいのかわかりません。 結局どれでも出来るのでしょうか。 同じ名前でたくさん存在するのは、有志でいろんな人が同じ機能をもつライブラリを作っているからなのでしょうか。 特に気になったのが、JQuery版とそうでないものです。 これが通常版? http://www.huddletogether.com/projects/lightbox/ これがjQuery版? http://leandrovieira.com/projects/jquery/lightbox/ 今回聞きたいのは、コーディング方法ではなくて、種類?についてです。 よろしくお願いします。

    • 締切済み
    • PHP
  • LightBoxなどで画像サイズが指定したい

    PHPでコードを書いています。 画像をクリックすると、拡大表示されるようにしたいのでLightBox(JQuery版)で作りました。 ↓↓↓これ http://leandrovieira.com/projects/jquery/lightbox/ しかし、画像サイズが1MBを超えると画像の表示サイズが大きすぎて、 スクロールバーが出ます。 画像サイズをWindowサイズくらいにしたいのですが、 拡大表示される画像サイズをカスタマイズ出来るライブラリはないでしょういか。 そもそもの画像サイズを小さくするという方法もありますが、 今回はそれは抜きにして考えています。 LightBoxでなくてもいいのですが、他の名前がわからなくて、調べきれませんでした。

  • ワードプレス 全てindex.htmlになる

    ワードプレスの本を参考にホームページを作っています。 themesフォルダに自作テーマのためのフォルダを作り、index.php、cssファイル、header,footer.phpを作り、固定ページのためのpageファイルを作りました。 ダッシュボードから記事内容を記入して、パーマリンクを設定してアクセスしましたが、 localhost/wordpress (wordpressはアプリ名です)でアクセスしても、パーマリンクをbusinessとして追加した固定ページもすべて、アプリ名wordpressフォルダ直下のindex.phpの内容を表示しているようです。 ルーティングについて調べましたが、見当違いなことを調べてるのでしょうか?あまり解決につながる情報が見当たりません。 初歩的な質問で恐縮ですがよろしくお願いします。

    • ベストアンサー
    • PHP
  • wordpressでlightbox系のプラグイン

    いつもお世話になっております。 オリジナルで今テーマを作り構築し終わったのでlightbox系のプラグインをいれようとした所、 どのlightbox系のプラグインを入れても、 【このプラグインを有効化する際に、224文字分の予期しない出力が生成されました。もし “headers already sent” エラーメッセージ、配信フィードの問題などが発生する場合は、プラグインを無効化または削除してください。】 と出てしまい、lightboxの効果が全く反映されません。 header内は下記です。 <!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 href="css/reset.css" rel="stylesheet" type="text/css" /> <link href=”css/style.css" rel="stylesheet" type="text/css" /> <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 画像のプリロード $(function(){ $("a img").each(function(){ if(String($(this).attr("src")).match(/_off\.(.*)$/)){ var img = new Image(); img.src = String($(this).attr("src")).replace(/_off\.(.*)$/,"_on.$1"); } }); }); // 画像のロールオーバー $(function(){ $('a img').hover(function(){ $(this).attr('src',$(this).attr('src').replace('_off','_on')); },function(){ $(this).attr('src',$(this).attr('src').replace('_on','_off')); }); }); </script> </head> 何が原因なのでしょうか??

    • ベストアンサー
    • CSS
  • lightboxでNEXTをクリックしても同じ画像

    lightboxのキットをネットからDLして利用しています。 変更するソースはHTMLの表示させる画像の箇所辺りで、jsやcssはいじっていません。 実装して、動作もうまくいっているのですが、 NEXTボタンをクリックしても同じ画像を表示してしまいます。 再度クリックすると次へ移動するのですが、どこを修正したいいのでしょうか? 因みに8枚の画像をimagesフォルダへ入れていますが、表示されるimage○of○には、 1of16と倍になってしまっています。

専門家に質問してみよう