サポート » プラグイン » 【Lightbox2】が動作しない

  • WordPress3.1でLightbox2 ver2.9.2を導入したのですが、動作してくれません。

    </head>前に<?php wp_head(); ?>や、</body>前に<?php wp_footer(); ?>を入れてもダメでした。
    Auto-lightbox image linksにはチェックを入れており、ソース上では<a href"~.jpg" rel="lightbox[記事ID]">となっています。

    <a href"~.jpg" rel="lightbox[記事ID]"><img src="~-s.jpg"></a>で、-s.jpgの画像をクリックすると、aタグの.jpgがLightboxでスライドショー的にしたいと思っていますが、
    ただJPGを開いてしまうだけになります。

    よろしければお教えいただけますでしょうか?
    よろしくお願いいたします。

    【 header.php 】

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <title><?php bloginfo('name'); wp_title(); ?></title>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.ico" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="container">
    <div id="header">
    	<a href="<?php echo home_url( '/' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.jpg" width="900" height="120"></a>
    
    	<div id="site-title"><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo('name'); ?></a></div>
    	<?php if(is_front_page()): ?>
    	<h1 id="site-description"><?php bloginfo('description'); ?></h1>
    	<?php elseif(is_front_page()): ?>
    	<h1 id="site-description"><?php bloginfo('description'); ?></h1>
    	<?php else: ?>
    	<p id="site-description"><?php bloginfo('description'); ?></p>
    	<?php endif; ?>
    <?php wp_nav_menu( array( 'container_id' => 'sub-menu', 'theme_location' => 'sub-menu', 'depth' => 1, 'fallback_cb' => 0 ) ); ?>
    </div>
    
    <div id="main-menu">
    <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
    </div>
    
    <!--
    <?php
    if ( is_front_page() ) { ?>
    	<div id="top-image">
    		<div id="top-image-wrap">
    			<?php if(function_exists('wp_cycle')) { wp_cycle();} else { ?>
    			<img src="<?php echo get_template_directory_uri(); ?>/img/top-image-1.jpg" />
    			<?php } ?>
    		</div>
    	</div>
    <?php } else { ?>
    	<div id="second-image">
    		<div id="breadcrumb">
    		<?php if(function_exists('bcn_display')) { bcn_display(); } ?>
    		</div>
    	</div>
    <?php } ?>
    -->
    
    <div id="wrap">

    【 footer.php 】

    <div id="totop"><a href="#header"><?php _e('Top','wsc6') ?></a></div>
    </div>
    
    <div id="footer">
    <?php if ( is_active_sidebar( 'footer-widget-area' ) ) : ?>
    	<!--<div id="footer-wrap">-->
    		<div id="footer-widget-area">
    			<?php 	if ( ! dynamic_sidebar( 'footer-widget-area' ) ) : ?>
    			<?php endif; ?>
    		</div>
    		<div class="clear"><hr /></div>
    	<!--</div>-->
    <?php endif; ?>
    </div>
    
    <div id="footer-bottom">
    	<?php wp_nav_menu( array( 'container_id' => 'footer-menu', 'theme_location' => 'footer-menu', 'depth' => 1, 'fallback_cb' => 0 ) ); ?>
    	<div id="copyright">
    	Copyright (C) <?php bloginfo('name'); ?>. 2006 to <?php echo date(Y) ?> All rights reserved.
    	</div>
    </div>
    
    </div>
    
    <?php wp_footer(); ?>
    </body>
    </html>

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • 出力された結果のHTMLソースも投稿していただくと原因が分かりやすいと思います。^^
    あとJavaScriptコンソール(Chorme)やエラーコンソール(firefox)などにエラーが出ていれば、そちらも投稿していただくとさらに解決が早いと思います。

    追記です。
    全てのソースをはらなくて結構ですよ。<head>のなかだけでもわかると思います。
    urlのドメイン部分はexample.comに変えといたほうが無難かもしれませんね。^^

    スレッド開始 c2104

    (@c2104)

    >Takayuki Miyauchiさん
    ありがとうございます!
    よろしくお願いします!

    【出力ソース】

    <!DOCTYPE html>
    
    <html dir="ltr" lang="ja">
    
    <head>
    
    <title>●●●</title>
    
    <meta charset="UTF-8" />
    
    <link rel="shortcut icon" href="http://www.example.com/wordpress/wp-content/themes/wsc6/img/favicon.ico" />
    
    <link rel="stylesheet" href="http://www.example.com/wordpress/wp-content/themes/wsc6/style.css" type="text/css" media="screen" />
    
    <link rel="canonical" href="http://www.example.com/"/>
    <link rel="alternate" type="application/rss+xml" title="●●● &raquo; フィード" href="http://www.example.com/feed" />
    <link rel="alternate" type="application/rss+xml" title="●●● &raquo; コメントフィード" href="http://www.example.com/comments/feed" />
    <link rel="alternate" type="application/rss+xml" title="●●● &raquo; Drum Corps International(DCI) 2011 Show Theme のコメントのフィード" href="http://www.example.com/dci/2011theme/feed" />
    <link rel='stylesheet' id='gsc_style-css'  href='http://www.example.com/wordpress/wp-content/plugins/google-custom-search/css/smoothness/jquery-ui-1.7.3.custom.css?ver=3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gsc_style_search_bar-css'  href='http://www.google.com/cse/style/look/minimalist.css?ver=3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gsc_style_search_bar_more-css'  href='http://www.example.com/wordpress/wp-content/plugins/google-custom-search/css/gsc.css?ver=3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='gsc_style_search_bar_even_more-css'  href='http://www.example.com/wordpress/wp-content/plugins/google-custom-search/css/gsc-no-search-button.css?ver=3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='admin-bar-css'  href='http://www.example.com/wordpress/wp-includes/css/admin-bar.css?ver=20110122' type='text/css' media='all' />
    <script type='text/javascript' src='http://www.example.com/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>
    <script type='text/javascript' src='http://www.example.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
    <script type='text/javascript' src='http://www.example.com/wordpress/wp-content/plugins/google-custom-search/js/gsc.js?ver=3.1'></script>
    <script type='text/javascript' src='http://www.google.com/jsapi?ver=3.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.example.com/wordpress/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.example.com/wordpress/wp-includes/wlwmanifest.xml" />
    <link rel='index' title='●●●' href='http://www.example.com' />
    <link rel='start' title='▼▼▼' href='http://www.example.com/▼▼▼' />
    <link rel='prev' title='■■■' href='http://www.example.com/■■■' />
    <link rel='next' title='▲▲▲' href='http://www.example.com/▲▲▲' />
    <link rel='shortlink' href='http://www.example.com/?p=893' />
    <link rel="canonical" href="http://www.example.com/dci/2011theme" /> 
    
    	<!-- Added by EventCalendar plugin. Version 3.1.4 -->
    	<script type='text/javascript' src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/xmlhttprequest.js'></script>
    	<script type='text/javascript' src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/ec3.js'></script>
    	<script type='text/javascript'><!--
    	ec3.start_of_week=1;
    	ec3.month_of_year=new Array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月');
    	ec3.month_abbrev=new Array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月');
    	ec3.myfiles='http://www.example.com/wordpress/wp-content/plugins/event-calendar';
    	ec3.home='http://www.example.com';
    	ec3.hide_logo=0;
    	ec3.viewpostsfor="%2$s年%1$sの投稿を表示";
    	// --></script> 
    
    <style type='text/css' media='screen'>
    @import url(http://www.example.com/wordpress/wp-content/plugins/event-calendar/ec3.css);
    .ec3_ec {
     background-image:url(http://www.example.com/wordpress/wp-content/plugins/event-calendar/ec.png) !IMPORTANT;
     background-image:none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/ec.png');
    }
    #ec3_shadow0 {
     background-image:url(http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow0.png) !IMPORTANT;
     background-image:none;
    }
    #ec3_shadow0 div {
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow0.png',sizingMethod='scale');
    }
    #ec3_shadow1 {
     background-image:url(http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow1.png) !IMPORTANT;
     background-image:none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow1.png',sizingMethod='crop');
    }
    #ec3_shadow2 {
     background-image:url(http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow2.png) !IMPORTANT;
     background-image:none;
    }
    #ec3_shadow2 div {
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/wordpress/wp-content/plugins/event-calendar/shadow2.png',sizingMethod='scale');
    }
    </style> 
    
    <script type="text/javascript"> lb_path = "http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/"; lb_opacity= "0.8"; lb_resize= "7";</script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/css/lightbox.css" />
    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/prototype.js" ></script>
    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/lightbox.js"></script>
    <style type="text/css">#overlay {background-color:#000000;}</style>
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css">
    	html { margin-top: 28px !important; }
    	* html body { margin-top: 28px !important; }
    </style>
    </head>

    【Chrome JavaScriptコンソール】
    Resource interpreted as Script but transferred with MIME type text/html.
    ⇒ad.orange-park.jp/ads.php?ds=p&aid=69946:-1
    (サイドバーにアド広告を張っており、それだと思います)

    【FireFox エラーコンソール】(スタイル宣言の無視は省いています)

    Could not read chrome manifest file ‘C:\Program Files (x86)\Mozilla Firefox\extensions\{972ce4c6-7e08-4474-a285-3208198ce6fd}\chrome.manifest’.

    警告: _moz_generated_content_after 要素の XUL ボックスがインラインの子要素 #text を含んでいるため、すべての子はブロック中で折り返されます。
    ソースファイル: chrome://browser/content/browser.xul
    行: 0

    エラー: attempt to run compile-and-go script on a cleared scope
    ソースファイル: chrome://browser/content/aboutHome.js
    行: 218

    エラー: Image corrupt or truncated: <unknown>
    ソースファイル: <unknown>
    行: 0

    jquery.jsとprototype.jsは同居できないので、lightbox2プラグインは諦めて、”wp-jquery-lightbox”あたりを使うと幸せになれると思います。 🙂

    とりあえずjQueryとPrototypeは同居できないと覚えておくと、今後も同様のトラブルが避けられるとおもいます。
    (同居できなくはないですが、コツが必要で、多くの場合は他のプラグインを探したほうが早いです。)

    スレッド開始 c2104

    (@c2104)

    >Takayuki Miyauchiさん

    ありがとうございます!
    後ほどwp-jquery-lightboxを試してご報告させていただきます!

    ちなみになのですが、jquery.jsはLightbox2だと思うのですが、prototype.jsがどのプラグインで使われているかわかる方法はないでしょうか??
    くれくれで大変恐縮なのですが、よろしくお願いいたします!

    上記のソース内にある以下の部分を拝見するとlightbox側でprototypeを使用していると思います。

    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/prototype.js" ></script>
    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="http://www.example.com/wordpress/wp-content/plugins/var/www/vhosts/example.com/httpdocs/wordpress/wp-content/plugins/lightbox/js/lightbox.js"></script>
    スレッド開始 c2104

    (@c2104)

    >Takayuki Miyauchiさん

    なるほどですね!
    両方Lightbox2で使われているということは、根本的にLightbox2は使用できないということなのでしょうか??
    なぜこのような作りになっているんでしょう^^;

    ightbox2はjqueryは使ってないですよ。
    テーマか他のプラグインがjqueryを使ってます。

    スレッド開始 c2104

    (@c2104)

    そうなんですか!
    勉強不足ですね^^;

    ありがとうございました!

    Lightbox2は他のプラグインとケンカしやすいのでいったんLightbox2を停止させて
    WP-Lyteboxを試してみてはどうでしょうか?

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「【Lightbox2】が動作しない」には新たに返信することはできません。