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

知り合いの静的なサイトで「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」に変更にて無事解決。

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

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

LINEで送る
このエントリーを Google ブックマーク に追加
[`yahoo` not found]
GREE にシェア

This entry was posted in WordPress and tagged , , , . Bookmark the permalink.

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

  1. Pingback: Strx Magic Floating Sidebar Maker – ウィジェットをメイン画面に追従させる | あんとんさんち

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です