Q&A
画像の切り替え自体を止めるのでしょうか。切り替え時のフェードを止めるのでしょうか。
こんにちは。Wordpressのテーマを購入しカスタマイズをしているのですが、
仕組みと、実際の対象方法がわからない事があり質問させていただきました。
低レベルな質問かもしれませんが、ご教示いただけますと幸いです。
現在こちらのテーマをベースにカスタマイズをしております。
http://tcd-wp.net/tcd028/
以下のテーマTOP部分のスライドは、現在3枚切り替わるようになっております。
この切り替わりのタイミングで
slider heightasviewport has-background
というclassのopacityが0から1へと自動的に変わっているように思います。
これは、なにで制御しているのでしょうか？
また、こちらのOpacityの変化を止めたい場合は、どのようにするのが適切でしょうか？
悩んだ末に、解決できず質問させていただきました。
よろしくお願いいたします。
該当PHP
<?php /* Template Name: Welcome Screen */ ?> <?php $options = get_desing_plus_option(); get_header(); ?> <div id="site-cover"></div> <section> <div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div> <div id="topcover" class="topcover heightasviewport"> <div class="text-center verticalcentersplash amore-welcome-center"> <?php if($options['first_auto_br']): ?> <h1 class="first-h1"><?php echo nl2br($options['h1_text']); ?></h1> <?php else: ?> <h1 class="first-h1"><?php echo $options['h1_text']; ?></h1> <?php endif; ?> </div> </div> <div class="topcover heightasviewport" style="opacity:1;-ms-transform:translate(0px,0px);-webkit-transform:translate(0px,0px);transform:translate(0px,0px);"></div> <div id="top" class="heightasviewport" style="opacity:1; background:transparent"> <a href="#third" class="animate"><div class="down-arrow bounce"><span class="fa fa-angle-down"></span></div></a> </div> </section> <section> <div class="amore-divider romaji" data-parallax="scroll" data-image-src="<?php echo $options['bg_image2']; ?>"> <div class="container"> <div class="row"> <div class="col-xs-120 no-padding"> <h1 class="invisibletexteffect animate offsetted top-headline third_headline"><?php echo $options['third_headline'];?></h1> </div> </div> </div> </div> <div id="third" class="container"> <div class="row"> <div class="col-xs-120 no-padding"> <div class="row amore-section"> <?php for($i=1; $i<=3; $i++): ?> <?php if ($options['third_banner_image'.$i]): ?> <div class="col-sm-40 text-center"> <div style="background-image:url(<?php echo $options['third_banner_image'.$i]; ?>); width:70%" class="img-circle square-80 heightaswidth mb20 circle-banner"> <a class="no-decoration" href="<?php echo $options['third_banner_url'.$i]; ?>"<?php if($options['third_banner_target'.$i]){echo ' target="_blank"';}; ?>><div class="cover text-center"> <h3 class="verticalcenter"><?php echo $options['third_banner_headline'.$i]; ?></h3> </div></a> </div> <h4 class="text-center third-banner-headline mb20"><?php echo $options['third_banner_headline'.$i]; ?></h4> <p class="text-justify third-banner-body"><?php echo $options['third_banner_copy'.$i]; ?></p> <div class="button romaji"><a href="<?php echo $options['third_banner_url'.$i]; ?>"<?php if($options['third_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div> <div class="visible-xs"><br/><br/></div> </div> <?php endif; ?> <?php endfor; ?> </div> </div> </div> </div> </section> <section> <div class="amore-divider romaji" data-parallax="scroll" data-image-src="<?php echo $options['bg_image4']; ?>"> <div class="container"> <div class="row"> <div class="col-xs-120 no-padding"> <h1 class="invisibletexteffect animate offsetted top-headline fifth_headline"><?php echo $options['fifth_headline'];?></h1> </div> </div> </div> </div> <div id="fifth" class="container"> <div class="row"> <div class="col-xs-120 no-padding"> <div class="row amore-section"> <?php for ($i=1; $i <=3 ; $i++): ?> <?php if($options['fifth_banner_image'.$i]): ?> <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>"> <a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>> <div class="square-80 mb20 fifth-banner-image square-banner"> <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div> <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div> </div> </a> <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4> <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p> <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div> <div class="visible-xs"><br/><br/></div> </div> <?php endif; ?> <?php endfor; ?> </div> </div> </div> </div> </section> <section> <div id="sixth" class="has-background" style="background-image:url(<?php echo $options['bg_image5']; ?>)"> <div class="container" style="overflow-x:hidden"> <div class="row amore-section"> <div class="col-xs-120 no-padding-mobile"> <div class="row map-wrap-dark"> <div class="<?php if($options['show_map']){ echo "col-sm-60"; } else { echo "col-sm-120"; } ?> no-left-padding no-padding-mobile" style="line-height:30px;"> <?php if($options['sixth_auto_br']): ?> <?php echo nl2br($options['sixth_text']); ?> <?php else: ?> <?php echo $options['sixth_text']; ?> <?php endif; ?> </div> <?php if($options['show_map']) : ?> <div class="visible-xs"><br/><br/></div> <div class="col-sm-60 no-right-padding no-padding-mobile"> <div id="map-canvas" style="width:100%; height:480px; border:4px solid white; border-radius:2px;"></div> </div> <?php endif; ?> </div> </div> </div> </div> </div> </section> </div> <?php /* get_sidebar(); */ ?> <?php get_footer(); ?>
ディベロッパーツールでは
PHP
1<div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>
へ
PHP
1<div class="slider heightasviewport has-background" style="display: block; height: 364px; opacity: 0.11308;" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>
のような形で
display: block; height: 364px; opacity: 0.11308;display: block; height: 364px; opacity: 0.11308;
のopacityが追加されます。
JSの該当ファイルがわかっておりません。
回答3件
0
ちなみにjQueryのソースはソース最下部らへんで指定してあるようです！
jQuery("#site-cover").fadeOut('slow'); var cat = null var currentSlide = -1 var fixStuff = function(){ jQuery(".heightaswidth").each(function(){ jQuery(this).css('height', jQuery(this).outerWidth()) }) jQuery('.heightasviewport').css('height', jQuery(window).height()) jQuery(".verticalcenter").each(function(){ var center = (jQuery(this).parent().width() / 2) - parseInt(jQuery(this).parent().css('padding-top')) //var size = jQuery(this).outerHeight() / 2 var size = 13; jQuery(this).css('padding-top', center - size + 20) }) jQuery(".verticalcentersplash").each(function(){ var center = jQuery(window).height() / 2 var size = jQuery(this).outerHeight() / 2 jQuery(this).css('padding-top', center - size) }) } var nextSlide = function(){ currentSlide++ if(jQuery("[data-order='" + currentSlide + "']").length == 0) currentSlide = 0 jQuery('.slider, .parallax-mirror[data-order]').fadeOut("slow"); jQuery("[data-order='" + currentSlide + "']").fadeIn("slow"); console.log(currentSlide, jQuery(".slider, [data-order='" + currentSlide + "']")) } jQuery('.slider, .parallax-mirror[data-order]').hide() fixStuff(); nextSlide(); setInterval(nextSlide, 3000); setInterval(function(){ jQuery(".fade-me-in").first().fadeIn().removeClass('fade-me-in'); }, 200) jQuery(window).resize(function() { fixStuff(); });
の当たりだと思います。
以上です！
投稿2016/04/24 15:19
総合スコア335
すいませんコメントするとこ間違えました…、間違えついでに「.fadeIn("slow")」を「.css('display','block')」「.fadeOut("slow");」を「.css('display','none')」じゃだめですか？
ファイルは外部ファイル化されていないので、header.php 又はfooter.php もしくは includeで読み込んでいるかのいずれかになります。
Templateを見てみれば恐らくコードがどこかにあると思われます。
fade-me-in が曲者そうですね。
間違えてすみませんでした、では失礼いたします。
0
FIREFOXの開発ツールで確認して見てはどうでしょうか？
投稿2016/04/23 17:21
総合スコア335
firebugとかファイルと行表示されたような気がします。
テーマ制作者に聞いても良いですよね。
キャッシュ残ってる場合も有りそうですが…。
その場で書き換えて結果表示されるので便利ですよ、修正頼まれてやったら修正早すぎてビビってましたからね！！
プロのワザです！！
FIRE FOXの開発ツールは使った事がありませんでした。
早速使ってみました。使えこなせていませんが便利ですね！
引き続き該当JSファイルを探してみます。
ありがとうございます
パララックスの場合結構全体のバランスとか絡まってる場合多いのでアニメーション帰ると他のが機能しなくなるなんて事もあり得ますし、制作者の方に聞くのが一番だと思います。
見てみたら二か所ぐらいソース動いてましたから…。
お力になれず申し訳ございません。
こちら、ご丁寧に相談にのっていただきありがとうございました。
最終的に、footer部分に記述がありました。
お手間をおかけいたしました。
0
ベストアンサー
これは、なにで制御しているのでしょうか？
テーマに書かれているJavaScriptで制御されています。
fadeIn fadeOut とかをテーマ内検索したらその近辺に辿り着くとは思います。
抜粋（微整形）。
JavaScript
1var currentSlide = -1; 2var nextSlide = function() { 3 currentSlide++; 4 if ( jQuery( "[data-order='" + currentSlide + "']" ).length == 0 ) { currentSlide = 0 }; 5 jQuery( '.slider, .parallax-mirror[data-order]' ).fadeOut( "slow" ); 6 jQuery( "[data-order='" + currentSlide + "']" ).fadeIn( "slow" ); 7} 8jQuery( '.slider, .parallax-mirror[data-order]' ).hide(); 9nextSlide(); 10setInterval( nextSlide, 3000 );
追記：
画像の切り替えを停止する形でも 切り替え時のフェードを止める形でも大丈夫です。
出力されるHTMLの構造が提示されている部分のみなので（全体像がわからないので）、効果が出るか自信がありませんが、スライダーが設置されている前に下記HTMLを挿入してみてください。
HTML
1<style> 2section > div.slider.heightasviewport.has-background { 3 opacity: 1 !important; 4 display: block !important; 5} 6</style>
投稿2016/04/23 12:48
編集2016/04/24 09:10総合スコア69398
ご回答ありがとうございます。
回答をいただいてから、JSファイルでfadeIn、Outを探しましたが、どれもコメントアウトしても止める事ができませんでした。
実際のファイルをみないとわからない事なのかもしれませんが、該当ファイルはどれかなどわかったりするのでしょうか？
jscript.jsというファイルか
jquery.flexslider-min.jsかとは思っているのですが・・・
なかなか辿りつけずすみません。
サンプルサイトとHTMLやJSの構成が違うとなると、なんとも判断ができません。
お手数おかけしてしまっていて、すみません。
サンプルサイトとの構成は同じなのですが、知識不足により該当のjsファイルがどれなのかがわかっておりません。。。
該当ファイルの見つけ方などはあるのでしょうか？地道に探していくしかないのでしょうか・・・（探しても探してもたどり着けず・・）本当に申し訳ないです。
とりあえずサンプルサイトには jquery.flexslider-min.js はありません。これを外すだけでも止まりはすると思うのですが、試されましたか？また、jquery.flexslider-min.js は $('.flexslider').flexslider(); に "似た" 形で実行されます。
探し方はHTMLやCSSの知識、JavaScriptの知識などがある程度無いと難しいと思います。有料テーマでしたら、初期サポート（および有償サポート）くらいはあるのではないでしょうか。
追記しました。フェードを止める方向で考えてみたので、試してみてください。
ありがとうございます。<div class="slider heightasviewport has-background" の前と<section>の前も試してみたのですが、変わらないようでした。。。該当PHP全文の掲載させていただきました。
> 該当PHP全文
出力されたHTMLと関係する全てのCSS／JS、つまり動いている状態のサイトを見ないことにはわかりません。実際複数画像を登録している記述もこの状態ではわかりません。
「 data-image-src="<?php echo $options['slider_image1']; ?>"」ここでスライダーのイメージを呼んでいる可能性がありますので、そこを削除されるくらいしか、回答できません。
お世話になっております。
こちら、ご丁寧に相談にのっていただきありがとうございました。
また、いつも迅速な対応をいただきありがとうございました。
該当記述部分ですが、まさかのfooterにありました。
こちらコメントアウトし、無事解決する事ができました。
お手数おかけいたしました。
ご協力ありがとうございました。
解決されたようでよかったです。お疲れ様でした！
あなたの回答
tips
プレビュー
