モニター全面のスライドショーを実現する際に便利なjQueryプラグインが「Vegas」です。
このプラグインはポピュラーなもので、設置の仕方などはちょっとググれば出てきます。
「Vegas」の使い方は、このページでは割愛します。
vegasは私も仕事でよく使うプラグインです。
よいのはレスポンシブデザインでPCとスマホで画像を切り替えたりするのも簡単にできるところでしょう。
これについては最後に解説します。
WordPressテーマTCDの「UNIQUE」にも使ってあったので、たまたま当方のサイトで動画を配置したところ、不良があることが分かりました。
今まで画像のスライドショーしかやったことがなかったので気づきませんでした。
不良と言ってもWindowsのみ横より縦の方が長いブラウザサイズになったときに起こるものなので、実害はあまりないかもしれません。
縦長の画面サイズになったとき動画が全画面になりません。上下に空きが出てしまいます。
この現象を対策してみました。
Vegasの動画配置をフルレスポンシブにする
前回の記事で解説したhead.phpのカスタマイズによって、cssとJavaScriptを読み込みます。
[st-card id=371 label=”” name=”” bgcolor=”” color=”” readmore=”on”]
head.phpの追加箇所は以下の「<!– 追加 start –>」から「<!– 追加 end –>」までです。
（前半略）
jQuery(document).ready(function($){
$('[data-cat-filter]').click(function(){
if ($(this).hasClass('active')) return false;
$('.active[data-cat-filter]').removeClass('active');
$(this).addClass('active');
var c = $(this).attr('data-cat-filter');
if (c.indexOf('cat-') == -1) c = '';
post_list_cat_filtered = c;
if (c) {
$('#archive_work_list .box').removeClass('active').css({opacity:0, display:'none'});
$('#archive_work_list .box.'+c).css({display:'block'})
$('#archive_work_list .box.'+c).each(function(i){
$(this).delay(i*150).queue(function(){
$(this).addClass('active').dequeue();
});
});
} else {
$('#archive_work_list .box').removeClass('active').css({opacity:0, display:'block'});
$('#archive_work_list .box').each(function(i){
$(this).delay(i*150).queue(function(){
$(this).addClass('active').dequeue();
});
});
}
return false;
});
});
</script>
<?php }; ?>
<!-- 追加 start -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/custom.css?ver=<?php echo version_num(); ?>">
<?php if ( !wp_is_mobile() && is_front_page() ) :?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vegas_c.js?ver=<?php echo version_num(); ?>"></script>
<?php endif; ?>
<!-- 追加 end -->
<?php
}; // END function tcd_head()
add_action("wp_head", "tcd_head2");
?>
まず、子テーマのcustom.cssを読み込みます。
vegasの動画用のスクリプトはvegas_c.jsとして読み込みます。
スマホでは動画は動きませんし動画はトップページのみなので、判定を加えて限定的に読み込んでいます。
custom.cssに加えるcss
vegasのcssで要素「vegas-videoクラス」にmax-width100%が設定されています。
そこで、video要素のmax-widthを初期値に戻します。
video {
max-width: none;
}
※以下のJavaScript（vegas_c.js）でcssを設定しても良さそうなのですが、なぜか上手くいきませんでした。
vegas_c.jsのスクリプト
以下のスクリプトは動画配置では一般的なものです。
要はvegasが加えた要素に対してスクリプトを実装します。
jQuery(document).ready(function($){
//$('video').css("max-width","none");
var movtimer = false;
//メインコンテンツ部分の配置
var movieRatio = 16/9; // 動画の縦横比
var movUehosei = 4; // ウインドウズで枠が出るため少し大きくする
function movieAdjust(){
var adjustWidth = $(".vegas-container").width();
var adjustHeight = $(".vegas-container").height();
if (adjustHeight > adjustWidth / movieRatio) {
adjustWidth = adjustHeight * movieRatio;
adjustWidth = adjustWidth + movUehosei;
}
$('video').css({width:(adjustWidth)+"px",height:parseInt((adjustWidth/movieRatio))+"px"});
$('video').css({'margin-left':-(($('video').width()-$(window).width())/2)});
$('video').css({'margin-top':-(($('video').height()-($(".vegas-container").height()))/2)});
}
$(".vegas-container").css("height",$(window).height()+"px");
$(".vegas-container").css("width",$(window).width()+"px");
movieAdjust();
$(window).resize(function() {
if (movtimer !== false) {
clearTimeout(movtimer);
}
movtimer = setTimeout(function() {
$(".vegas-container").css("height",$(window).height()+"px");
$(".vegas-container").css("width",$(window).width()+"px");
movieAdjust();
}, 200);
});
});
vegas-containerがvegasの画面要素です。
私はこのスクリプトを汎用的に使用しているので、まずvegas-containerに画面の幅と高さを設定して処理しています。
以上でWindowsのブラウザ画面が縦長になった場合も動画が全画面で配置されるようになります。
加えて全画面処理がレスポンシブに対応するようになります。
このスクリプトはWordPressテーマTCDを使うときだけでなく、vegasと動画を組み合わせる場合には追加しておくべきでしょう。
vegasをレスポンシブWEBデザインに適応させる
最後にvegasをレスポンシブWEBデザインで採用する場合の設定を記載しておきます。
var ww = window.innerWidth || document.documentElement.clientWidth || 0;
if (ww > 767){
var srcBgArray = [{ src: 'images/img01.jpg' }, //PCでスライドする画像を配列で設定
{ src: 'images/img02.jpg' },
{ src: 'images/img03.jpg' }];
} else {
var srcBgArray = [{ src: 'images/simg01.jpg' }, //スマホでスライドする画像を配列で設定
{ src: 'images/simg02.jpg' },
{ src: 'images/simg03.jpg' }];
}
$('#image').vegas({
slides: srcBgArray,
delay: 5000,
timer: false,
animation: 'random',
transition: 'blur',
transitionDuration: 1000
});
以上の様に画面の幅を判定してスライドの配列を変えればPCとスマホで別々に画像を設定できるようになります。
クライアントからスマホの画像をもう少し左寄せにしたいというような要望が出てきた場合はこの方法で対応します。
参考にしてください。
by T.Y.