jQuery GalleryView と jQuery Image Lazy Load WP を共存させる

2013.10.07

知り合いの静的なサイトで「jQuery GalleryView (ver.1.1)」を使ってスライドショーを表示していた。
（現在「GalleryView」はこちらのサイトで「ver.3」になっているが、とりあえず、まぁ・・・面倒なので「ver1.1」」で進めた。）
今回、WordPress に移行するに当たり「jQuery lazy load plugin (ver.0.21)」を使用したかった。
ところが、このふたつの相性があるようで、どうもうまくいかない。
いろいろ試して何とか動作したのでメモメモ。

うまくいかなかった点

  1. 何も考えず、インストールすると「jQuery lazy load plugin」（以下：Lazy Load）がフェードをかけようとする画像が表示されない。
  2. 「jQuery GalleryView」（以下：GalleryView）を使ってスライドショーを表示したかったのはトップページだったので当該ページの画像に「Lazy Load」の効果がかからないように「jq_img_lazy_load.php」を編集した。（ img タグに「Lazy Load」が書き込みをしないようにした。）
    これで、トップページ以外は問題なくなったのだが、今度は「jQuery GalleryView」のスライドショーが動作しない

原因

「Lazy Load」は「jquery.lazyload.min.js?ver=1.7.1」、「GalleryView」は「jquery-1.3.2.min.js」と言うスクリプトを使用しているがこれが衝突しているようだ。

編集した事

「Lazy Load」の効果がトップページにかからないように、「GalleryView」はトップページの効果はトップページのみにかかるように「jquery.galleryview-1.1.js」と「トップページのカスタムフィールド」を編集

  1. 「Lazy Load」で使用している「jq_img_lazy_load.php」に以下の文を追加しトップページに「Lazy Load」の効果がかからないように編集。 
    	function action_header() {
		if (is_front_page()) return ;//◆追加
		echo <<<EOF
<style type='text/css'>
img.lazy { display: none; }
</style><br /><br />EOF;
	}<br /><br />	function action_enqueue_scripts() {
		if (is_front_page()) return ;//◆追加
		wp_enqueue_script(
			'jquery_lazy_load',
			plugins_url('/js/jquery.lazyload.min.js', __FILE__),
			array('jquery'),
			'1.7.1' // version of the lazyload script from https://github.com/tuupola/jquery_lazyload
		);
	}<br /><br />	function filter_the_content($content) {
		if (is_feed()) return $content;
		if (is_front_page()) return $content;//◆追加
		return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', array($this, 'preg_replace_callback'), $content);
	}

    ちみなみ特定の投稿ページ（下の例では「○○○」と言うタイトルのページ）で行いたい時は、追加部分を以下のようにすればよいだろう。

    if (is_single( '○○○' ) ) return ;

    また、複数のページに「Lazy Load」の効果ををかけたくない場合は

    if (is_front_page() || is_page( '20' )) return ;

    この例ではトップページとページ ID が 20 のページ。

    詳しくは条件分岐タグ – WordPress Codex 日本語版に記載あり。

  2. トップページに「GalleryView」に関わるスクリプト等を記載。
    これらは-タグ内に記載しないといけない。
    僕は「Weaver」と言うテーマを使っているのだが「カスタムフィールド」に記載すればよい。
    初期状態ではこの画面は表示されていないので、「表示オプション」から「カスタムフィールド」にチェックを入れて表示させる。
    gallery-lazy01.jpg

    「名前」に「page-head-code」と入力し必要なコードを「値」に記入。
    gallery-lazy02.jpgちなみに入力したのは次のコード

    <!-- GALLERYVIEW の設定 Start --> 
<script type="text/javascript" src="http://foo.net/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="http://foo.net/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="http://foo.net/js/jquery.timers-1.2.js"></script> 
<script type="text/javascript" src="http://foo.net/js/jquery.galleryview-1.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
	$('#topic').galleryView({
    panel_width: 600,
    panel_height: 450,
//    frame_width: 0,
//    frame_height: 20,
    transition_speed: 1200,
    background_color: 'transparent',
    border: 'none',
    easing: 'easeOutBounce',
    nav_theme: 'light',
    overlay_height: 26 // 文字を入れる時は「26」ない時は「0」
	});
});
</script>
<!-- GALLERYVIEW スタイルシート-->
.panel{
	border:none;
}
#topic p{
	margin:0px;
	padding:2px;
	font-size:14px;
}

     

これにて無事解決！！
ところが・・・。

gallery-lazy03.jpg

「GalleryView」の「次へ」のボタンが以上に大きい。

何でだよ―。

さんざん、あれこれした結果、このボタン（画像）に「nav-next」と言う CSS のクラス名が着いている事を発見。

もしかして・・・と思い、WordPress の「Style.css」を見てみると・・・。

やっぱりありましたよ、同じクラス名が。
なのでこちらのボタンのクラス名を「gview-nav-next」に変更にて無事解決。

これで本当にめでたしめでたし。

まいったよ、時間かかりすぎ。

コメント