###前提・実現したいこと
WordpressにCarouFredSelを導入しています。
ChromeやFirefoxなどのブラウザでは問題なく閲覧できるのですが、
Safariで閲覧した時だけ画像が正しく読み込まれません。
色々と試してみましたが、躓いてしまっています。
助言いただけましたら幸いです。
###発生している問題・エラーメッセージ
Safariで閲覧した時だけ画像の高さが正しく読み込まれません。 リロードすると綺麗に閲覧できるようになります。 ブラウザの開発者ツールではエラーメッセージはありません。
###該当のソースコード
JavaScript
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 2<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.carouFredSel-6.2.1-packed.js"></script> 3 4<script type="text/javascript"> 5$(function() { 6$('#slide_main').carouFredSel({ 7auto : 4000, 8items: 1, 9scroll: { 10items : 1, 11//easing : "swing", 12fx : "crossfade", 13duration : 800 14}, 15pagination: { 16container: '.detail_thum', 17anchorBuilder: function( nr ) { 18var src = $("a img",this).attr('src'); 19return '<a href="#" class="new_thumb' + nr + '"><img src="' + src + '" width="90px" /><span></span></a>'; 20} 21} 22}); 23}); 24</script>
HTML
1<ul id="slide_main"> 2 <li> 3 <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> 4 </li> 5 <li> 6 <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> 7 </li> 8 <?php } ?> 9 </ul> 10<div class="detail_thum" style="display:block;text-align:left;"></div>
###試したこと
■ <script>タグの記載位置が</head>タグ直前だとスクリプトがそもそも動かないため</body>タグ直前に移動しています。
■ jQueryのバージョンを変更(他にfancyboxが入っている為、結局1.8.3に落ち着いています)
■ 他のスライド系プラグインへ変更→読み込み不良で断念
■ 画像のプリロード
###補足情報(言語/FW/ツール等のバージョンなど)
Wordpressのカスタムフィールドで読み込んだ画像をスライドさせています。
実際は12枚読み込みます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。