質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • WordPress

    6677questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQueryプラグイン

    464questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • Safari

    159questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

SafariでCarouFredSel(jQuery)の画像読み込み不良が起こる

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 293

leny

score 0

前提・実現したいこと

WordpressにCarouFredSelを導入しています。
ChromeやFirefoxなどのブラウザでは問題なく閲覧できるのですが、
Safariで閲覧した時だけ画像が正しく読み込まれません。
色々と試してみましたが、躓いてしまっています。
助言いただけましたら幸いです。

発生している問題・エラーメッセージ

Safariで閲覧した時だけ画像の高さが正しく読み込まれません。
リロードすると綺麗に閲覧できるようになります。
ブラウザの開発者ツールではエラーメッセージはありません。

該当のソースコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.carouFredSel-6.2.1-packed.js"></script>

<script type="text/javascript">
$(function() {
$('#slide_main').carouFredSel({
auto      : 4000,
items: 1,
scroll: {
items  : 1,
//easing : "swing",
fx : "crossfade",
duration  : 800 
},
pagination: {
container: '.detail_thum',
anchorBuilder: function( nr ) {
var src = $("a img",this).attr('src');
return '<a href="#" class="new_thumb' + nr + '"><img src="' + src + '" width="90px" /><span></span></a>';
}
}
});
});
</script>
<ul id="slide_main">
        <li>    
        <a href="<?php echo(types_render_field('1-img',array('output'=>'raw'))); ?>" rel="detail_img" class="popup"><?php echo(types_render_field('1-img',array('width'=>'700','height'=>'394'))); ?></a>
        </li>
        <li>    
        <a href="<?php echo(types_render_field('2-img',array('output'=>'raw'))); ?>" rel="detail_img" class="popup"><?php echo(types_render_field('2-img',array('width'=>'700','height'=>'394'))); ?></a>
        </li>
        <?php } ?>
        </ul>
<div class="detail_thum" style="display:block;text-align:left;"></div>

試したこと

■ <script>タグの記載位置が</head>タグ直前だとスクリプトがそもそも動かないため</body>タグ直前に移動しています。
■ jQueryのバージョンを変更(他にfancyboxが入っている為、結局1.8.3に落ち着いています)
■ 他のスライド系プラグインへ変更→読み込み不良で断念
■ 画像のプリロード

補足情報(言語/FW/ツール等のバージョンなど)

Wordpressのカスタムフィールドで読み込んだ画像をスライドさせています。
実際は12枚読み込みます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    6677questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQueryプラグイン

    464questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • Safari

    159questions

    SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。