word pressでFlexsliderを使用した時の画像読み込み

  • 解決済 au1000

    (@au1000)


    12年、 1ヶ月前

    word pressでスライダーを利用しようとFlexsliderを導入しました。

    ■導入方法
    jquery.flexslider.js、flexslider.cssを任意のフォルダにアップロード
    ※theme/example/js/jquery.flexslider.js
    ※theme/example/js/flexslider.css
    スクリプトはセットアップファイルを作成してアップロード
    theme/example/js/slider.setup.js

    header記述

    <?php wp_enqueue_style('flexslider-css', get_bloginfo('template_url') . '/js/flexslider.css'); ?>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('flexslider', get_template_directory_uri().'/js/jquery.flexslider-min.js', array('jquery'), '2.1'); ?>
<?php wp_enqueue_script('slider.setup', get_template_directory_uri().'/js/slider.setup.js'); ?>
<?php wp_head(); ?>

    slider.setup.js記述

    jQuery(document).ready(function($) {
    $('.flexslider').flexslider({
 	slideshow: true,
	slideshowSpeed: 5000,
	animationDuration: 600,
	pauseOnAction: false,
    });
  });

    以上でスライダー自体は機能するのですが
    トップページに移動する際に読み込みに時間がかかっているのか
    スライダーの画像がページを読み込む際に
    一瞬だけですが、すべて表示されてしまいます。
    何か問題があるのでしょうか？

    ページのソースを確認すると以下でした。

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js?ver=1.7.1'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?ver=1.9.0'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/effects.js?ver=1.9.0'></script>
<script type='text/javascript' src='http://example.com/example/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='http://example.com/example/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://example/example/wp-content/themes/example/js/jquery.flexslider.js?ver=2.1'></script>
<script type='text/javascript' src='http://example.com/example/wp-content/themes/example/js/slider.setup.js?ver=3.5'></script>

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • wizfreek

    (@wizfreek)

    12年、 1ヶ月前

    ブラウザや、環境によっては読み込み時に一瞬すべて見えてしまうことがあるようなので、
    スライダーの画像にCSSで

    display:none;

    を指定する必要があるかもしれません。

    違うスライダーのプラグインについてですが、
    下記が参考になると思います。

    http://webdesignrecipes.com/jquery-plugins-in-cliant-works/

    トピック投稿者 au1000

    (@au1000)

    12年、 1ヶ月前

    ＞＞wizfreekさん

    ありがとうございます。
    display:none;だけでは解決しませんでしたが
    ヒントを元に下記参考ページの対処法で切り抜けました。

    ■参考ページ
    http://ozpa-h4.com/2012/07/11/slidebar-uhoxtu-yoi-ugoki/

    CSSでスライド部分をdisplay: none;

    #example {
	display: none;
}

    これでは見ない状態のままでしたので
    記事を元にslider.setup.jsに$(‘#example’).fadeIn(1500);を追加

    slider.setup.js記述

    jQuery(document).ready(function($) {
	$('#flexImg').fadeIn(1500);
    $('.flexslider').flexslider({
 		  slideshow: true,
		  slideshowSpeed: 5000,
		  animationDuration: 600,
		  pauseOnAction: false,
    });
  });

    以上でなんとか、ふわっとスライダーが出るようになりました。
    もっとスマートな対処法があったらお願いいたします。
    一応、解決いたしましたのでこちらはクローズとさせていただきます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「word pressでFlexsliderを使用した時の画像読み込み」には新たに返信することはできません。