jQueryプラグインのこと

jQueryプラグイン2つを同じページ内で使いたい時の注意点

jQueryって便利ですよね。
トグルメニューに、スライドショーに、フォトギャラリーに……欲しいものはほぼ叶えてくれます。
おかげで私のような無知なコーダーでも設置できてしまい、後々イレギュラーな事態に苦しめられることになったりもします。

したんです。

ヘッダーでスライドショーを動かしたい。
その同じページ内の下部にある画像は、拡大した時にLightboxにしたい。
しかもレスポンシブwebデザインに対応させたい。
これらの願いを全て叶えるプラグインは

山ほどあります。

個人的に一番簡単だと思ったプラグインを、と
スライドショーは、bxslider
Lightboxは、rlightbox
どちらも設置が簡単で、使い勝手が良い、素晴らしいプラグインです。

しかし、イレギュラーな事態が起こったのです。

恐らく当ブログ内で何度か絶叫してきた
2つ入れたら片方が機能しない、という事態です。
下の画像をクリックしたら、rlightboxではなく、ブラウザの別タブが開いてしまいました。

また相性か……。

何も疑わずにそう思い込み、それでも新しいプラグインを探すのも面倒で、何とか解決策がないか、実は何かのエラーではないか、と探ってみました。
Google Chrome の developer tool で。
そしてツールが弾き出してくれたエラーは

(…)bxslider is not a function

Google先生に問い合わせてみたら、ヒットしたのは英語圏のサイトのみ。
なので私の足りない英語力を駆使……できるはずもなく、Google Chromeの翻訳機能に頼ってみて、出た結論は
jQueryのバージョンが低すぎる、というものでした。

実は、rlightboxの最終アップデートは2012年で、推奨されているバージョンは1.6.4だったのです。
本当に右も左も分からないNは、bxsliderのタグでは最新バージョンを、rlightboxのタグでは1.6.4をそれぞれ指定していたのですが、そんなに都合良く使い分けてもらえるはずがありません。
当然なのですが、最新バージョンに統一されていました。
なので1.6.4を指定するタグを削除すると、次に出てきたのは

c.curCSS is not a function

c.curCSSは、jQuery1.8以降は非推奨の関数なのだそうです。
最新バージョンを敢えて1.6.4に統一するのも有りなのかもしれませんが、それだとbxsliderが動く保証もなく……。

散々回り道をして、結局他のLightbox系プラグインを探しました。
見つけたのは、Boxerという、画像だけでなく動画にも対応している便利なものです。
最新バージョンでも動くようです。

プラグインを同じページ内で2つ以上使う場合、相性が……と知ったかぶりをするより、推奨バージョンを確認する方が先だ、という、よく考えてみれば当たり前のことを学んだのでした。

【ハートブレーン】http://heartbrain.net

事前確認は怠るべからず

初心者でもわかるGlide.jsの設置方法

レスポンシブデザインが一般化しつつある今、スマートフォンでも見れるスライドショーの需要は益々増えてきました。
現在出回っている素晴らしいjQueryスライドショーはたくさんありますが、中でも軽量且つ設置が簡単だとあちこちで推奨されているのが、Glide.jsです。

Glide.js

しかしこのスライダー、何故か設置しても動かなかったのです。
一体何が!?
日本語の(ここ重要)解説ブログ通りに設置したよね!?
と思って公式サイトをよく見ると、最近アップデートしたばかり。
ブログで説明されているのは、従来のバージョンだったのです。

と書くと、まるで自分が新規開拓しているみたいでかっこいいのですが。
本来、設置作業をするのは、ある程度jQueryに精通している人です。
Google先生からの寄せ集め知識でその場を凌いでいるNだからこそ、遠回りになってしまった可能性が高いです。

それを踏まえて、同じく必要に迫られてスライドショーを設置作業している、初心者仲間のあなたに、私なりの作業をお伝えします。

まず、こちらのサイトでダウンロードします。
上部に「Download」と書かれたボタンがあるので、クリックすると、zipファイルがダウンロードされます。

中身はこうなっています。

distフォルダの中が重要

実は必要なのはdistフォルダのみです。
distフォルダを丸ごとコピーし、任意の場所に貼り付けてください。

distフォルダの中です。
mapファイルは初めて見た

jsファイルだけ、ファイル名の先頭に「jquery.」を付け加えました。
書き換える意味があるかどうかは不明

こちらでも説明されている通り、HTMLファイルのヘッダー部分に書き加えます。

<link rel="stylesheet" type="text/css" href="フォルダ名/css/glide.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="フォルダ名/jquery.glide.js"></script>

スライドショーを設置したい場所に、書き加えるコードです。

<div id="Carousel" class="glide">
<ul class="glide__wrapper">
<li class="glide__slide"><img src="画像1" alt=""></li>
<li class="glide__slide"><img src="画像2" alt=""></li>
<li class="glide__slide"><img src="画像3" alt=""></li>
</ul>
</div>

上のコードのすぐ下に、こちらを書き加えて完成です。

<script>
    $('#Carousel').glide({
        type: 'carousel'
    });
</script>

英語だからと敬遠せずに、まず公式サイトを隅から隅までちゃんと読むのが重要ですね。
Google Chromeだと翻訳機能もありますから。
ただ、コードの中身まで翻訳してくれるので

< divの idが = "カルーセル" クラス = "滑空" >

と表示されてしまうのが、難点と言えば難点かもしれません。

【ハートブレーン】http://heartbrain.net

レスポンシブ対応Lightbox系プラグインを動かす際にかかった罠

Lightboxは簡単且つ便利だけど、スマホ用のUIには対応していないというのは有名な話です。
なので、それに代わるものを何とか見つけようと、がんばって色々と探していました。
そして、評価が高く、レスポンシブ対応Lightbox系プラグインといえばこれ!となっているSwipebox
評判を見て回ったら、何だか設置が簡単そうなrlightbox。 この2つを設置してみたのですが

私が伸びたい心境です
こうなるべきところが

撮り貯めた社長ギャラリー
こうなってしまいました。

ページの作りによって、上に行ったり下に行ったりとバラバラですが、決してちょうどいい場所には行ってくれません。

何が問題なんだろう、とGoogle Developerのお力を拝借し、試行錯誤してみました。
そして分かったのですが、実は対象のページには、このようなcss設定をしています。

html { font-size: 62.5%; }

body {
font-size: 14px;
font-size: 1.4rem;
}

文字サイズの単位であるpxを簡単にemに換算するための手段なのですが
この設定、Google Chromeでは無視されることがあるそうです。

なので、head部分に、このような仕掛けをしていました。

<script>
$(function(){
    //chrome用の分岐処理
    var _ua = (function(){
     return {
        Blink:window.chrome
     }
    })();
     
    if(_ua.Blink){
        //chromeの文字サイズ対策
        document.body.style.webkitTransform = "scale(1)";
    }
});
</script>

この処理によって、Google Chromeで閲覧する場合、自動的にbodyに -webkit-transform:scale(1) が設定されます。
拡大縮小の指定を等倍にする設定なのですが、実はこれによって、position:fixed が無効になります。
Lightboxの窓の表示位置は、大体 position で指定されることが多いようなので、上の画像のような表示になってしまうようです。

script を削除したら、表示が正確になりました。

削除後も、今のところ文字サイズに問題はないようです。

【ハートブレーン】http://heartbrain.net

jQueryでスライドショーを動かそうとして実際にやった失敗

webサイト全体にLightboxを使用している所があります。
その内の1つのページに、スライドショーを設置することになりました。
サイドバナーが欲しい、文字入れもしたい……と色々条件が重なり、見つかったのが

slideshow.jsを使って画像のスライドショーにチャレンジ。(Web雑記帳様)

これ最高!と思って使ってみたのはいいのですが、何故かLightboxが立ち上がりません。
それもそのはず。
Lightboxは現在jQuery使用。
jQueryとmootools、そしてprototype.jsは共存できないのです。
jQueryの方は、それを避けるために

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script><!--
jQuery.noConflict();
jQuery(document).ready(function(){
	// ここでは、$はprototypeの動作をします。
	// jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。
});
//--></script>

で、jQueryの方を書き換えれば動くのですが、外部jsを読み込んでいる永遠の初心者には少し無理があります。
なので、jQueryで似たような動作をする jquery.cycle.jsを入れたのですが
今度はcycleが認識されません。

それもそのはず。
ページの下部に、クリックするとページの上部へ送るボタンが設置されていたのですが
それを指定するjsファイルの上に、jqueryファイルをダブルで指定していました……!

半日エラー原因を探し回ったオチが、これでした。
初心者でも理解できるような単純ミスはどこにでも転がっているので、ご注意ください。

【ハートブレーン】http://heartbrain.net

レインボーカーソル

Easy Sliderで縦スクロールするために実行したこと

一昔前は、jQueryのスライドショーを探すのさえ一苦労したものですが……。
最近はレスポンシブデザイン対応のスライドショーが増えてきて、ありがたい限りです。
しかも私のようにjava scriptがほとんど分からない身の程知らずでも簡単に設置できるものが結構あります。

その中で真っ先に行き着いたのが、Easy Slider。
こちらで詳しく説明されています。

jQueryで作る横スライド「easySlider」(ウェブ学のすすめ様)

私も一からお世話になったのですが、少しだけ壁にぶち当たりました。
このような注文があったのです。

縦スクロールにしてください。

縦にする方法は、数々のブログなどで紹介されています。

vertical:true

※当記事は、Easy Slider1.7の場合です。他バージョンの動作は保証できません。
ちなみに、作成されたのは数年前なので、使い方を説明しているサイトで紹介されている、ヘッダー部分に書き込むコードのjqueryのバージョンは1.7とか8ですが、2.1.1でも普通に動作します。

head部分もしくはbodyの該当部分に書き込むこの部分に、オプションで書き加えるようです。

$(function(){
  $("#slider").easySlider();
});

オプションは下記の通りだそうです。

$(function(){
  $("#slider").easySlider({
	controlsShow:false, //コントロールバーの表示・非表示
	speed:1200, //スクロール速度
        pause: 3000, // 表示時間
	auto:true, //自動再生
	continuous:true, //ループするかどうか
        prevText: '<< 前へ', //戻るボタンのテキスト
        nextText: '次へ >>' //進むボタンのテキスト
        vertical: true, //縦方向にスライドするかどうか
  });
});

コントロールバーって?と思った、私と同じような方々へ。
ここのことです。

jQuery共通のようです
「前へ・次へ」とか「PREV・NEXT」とか表示される部分です。

そして、その縦スクロール設定にしたのはいいのですが

その設定だけでは、スライド枚数を重ねるごとに、何故か

目眩がしました

何故かというと、easyslider1.7.js の方で margin-left を調節して、左にスクロールさせているからです。
恐らく横スクロール用に。
なので、縦スクロールにする場合、margin-left の値を0にしなければなりません。

easyslider1.7.js の134行目を

ChromeとかFirefoxがないと割り出せませんでした

$("ul",obj).css("margin-left",(t*h*-1));

$("ul",obj).css("margin-left",(0));

この方法で、画像が左に寄らないまま縦スクロールするようになりました。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ