Comparison Sliderをスライダーの中に組み込んで、ハンドルを左右に振って動くよアピールする

タイトルの意味がわからない

よくあるサイトトップにあるスライダーにComparison Sliderを組み込む。
でもって、Comparison Sliderの場合、スライダーを左右に振って”動くよ?”アピールしたい。

要は、スライダーの中に混ぜたいw

jQueryのライブラリとかで入れ込むのって嫌だなぁと思いつつ、ググってみると、

5 Free Image Comparison Slider Scripts – Hongkiat http://www.hongkiat.com/blog/js-image-comparison-sliders/

というサイトを発見。Comparison Sliderっていうんすねー。Before Afterじゃ確かにわかんないかも。

その中でも、”Here are 3 more:”で紹介されていた、Before Afterが良い感じ。
ライブラリ使いたくないとか言っといて…^^;
ありがとうございます m(_ _)m

Comparison Slider( Before After )の仕組み

非常にシンプルだった。1枚目は普通に置いて、2枚目はdivなどの中に置き、そのdivをresizeでwidthを変えてdiv > imgはoverflow: hidden;にする感じ。

管理画面に画像アップローダーで準備するのも便利そうだな 🙂

Sliderはbxsliderを使った

いろんなありがたいライブラリがあるけど、callbackが分かり易く豊富で細かいことしたくなってもできちゃう、というのが好きでこればっかり使わせてもらってるかも…。

$(window).on('load', function(){
    var slider = $('.bxslider').bxSlider({
      auto: true,
      autoHover: true,
      adaptiveHeight: true,
      tickerHover: true,
      useCSS: false,
      onSliderLoad: function ( currentIndex ) {
        $('.ba-slider').css({
          display: 'block'
        });
      },
      onSlideAfter: function ( $slideElement, oldIndex, newIndex ) {
        if( $slideElement.find('ba-slider') ) {
          var base = $slideElement.find('.ba-slider');
          var resize = base.find('.resize');
          var handle = base.find('.handle');
          resize.not(':animated').animate({
            width: '55%'
          }, 50, 'linear', function(){
            $(this).not(':animated').animate({
              width: '45%'
            });
            recovery($(this));
          });
          handle.not(':animated').animate({
            left: '55%'
          }, 50, 'linear', function(){
            $(this).not(':animated').animate({
              left: '45%'
            });
            recovery($(this));
          });
        }
        slider.stopAuto();
        slider.startAuto();
      }
    });
    $('.ba-slider').beforeAfter();
  });

  function recovery ( elm ) {
    var checkClass = elm.attr('class');
    if ( checkClass === 'resize' ) {
      elm.not(':animated').animate({
        width: '50%'
      });
    } else {
      elm.not(':animated').animate({
        left: '50%'
      });
    }
  }

こんな感じ。



<div class="slider-area">

<ul class="bxslider">

<li><img src="images/img_4081_6090680276_o.jpg" /></li>


<li><img src="images/_mg_7906_11709806865_o.jpg" /></li>


<li>

<div class="ba-slider">
          <img src="images/IMG_0709.JPG" alt="">

<div class="resize">
            <img src="images/IMG_5400.JPG" alt="">
          </div>

          <span class="handle"></span>
        </div>

      </li>

    </ul>

  </div>

<!-- / .slider-area -->

htmlはこれ。
スライドがComparisonを含んでたら、Comparison Sliderを左右に振って”動くよアピール”をするイメージ。
毎度うるさかったら、1回目だけ左右に振るようにすれば良いかもなぁと思う。

ってなワケでメモ。

参考

自分のツイートをキーワードで検索する

過去の自分のツイートを探す方法。

from:アカウント名 since:2014-01-01 until:2015-12-31 キーワード

「義足のランナー」って本を読んだ時ツイートしたよなぁと思いつつ、いつ頃かさっぱり思い出せかったので調べてみたら発見 (^^)

from:marushu since:2014-01-01 until: 2015-12-31 義足のランナー

をTwitterの検索窓に放り込むと、

https://twitter.com/search?q=from%3Amarushu%20since%3A2014-01-01%20until%3A2015-12-31%20%E7%BE%A9%E8%B6%B3%E3%81%AE%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC&src=typd

っとなって、

が返ってきた 🙂
これは使えますな (^^)

原点に帰る

義足のランナーって本を読んだのが2014年。

漠然と「俺も走ってみたい‼︎」と思うようになって、今年になってようやく板バネで練習を始めた。

急にやり過ぎたからか、古いソケットを使っちゃったからか、まぁ探せばいくらでも理由というか、言い訳というかできちゃうんだけど、断端に擦り傷ができてしまった。

このくらい平気と思って練習続けてたら、傷が悪化して、夕方にはシリコンライナーの中に血混じりのものが溜まるようになってしまった ^^;

さすがにまずいなぁと思いつつ、走る練習はやめてみたけど、普段使う義足履いてても夕方には同じ症状で、むしろ傷が広がっている感じ。。

10年以上履いて大概のことは経験済みと思ってたけど、こんなの初体験…(^◇^;)

結局、傷が治るまでは普段履き義足もやめることにした。。

ってことで、久しぶりに松葉杖生活がスタート‼︎

傷口から浸出液が止まらないので、ガーゼを当てて時折交換しながら早4日。まだ回復の兆しなし。。

何処へ行くにも足を履いているのと比べると大変にめんどくさいw

事故から社会復帰して間もない頃、傷が治らずまだ義足を履くことすらできなかった頃を思い出した。

当日、悶々としてずっと霧の中にいる気分だった時、ある人に義足を履けず歩けないと愚痴ったら、「歩けてるじゃない?」と、言われたことを思い出した。

義足を履いていないだけで、松葉杖で立派に歩けていると突っ込まれたんだよね ^^;

ここんところ、久しぶりに焦りが出ていて悶々としてたんだけど、忘れていたこの突っ込みを思い出した。

焦っても仕方ないのはわかってるけど、つい焦るのは仕方がない。開き直って傷が治るのを待とうという気にようやくなれた (^^)。

原点?と言うべきかどうかはわからないんだけど、原点に戻ったつもりでまたのんびりやって行こうと思うのであった。

三男が挑戦的w
俺に挑戦を挑む三男w

前に行った

忘れないようにメモ。

夜約1キロ位歩いてるんだけど、板バネで歩いた。

板バネにきちっと体重乗せて体を前に押し出すイメージしながら歩いた。

行きは登り、帰りは下り。

帰りに「腿上げしつつ前に押し出す」つもりでやってみたら、カミさん曰く、走れてるよ?と (^^)

耳に当たる風が違ったから自分でも嬉しかった。

コレを少しずつ、少しずつ伸ばしていこう。

Windows 8.1 にiPadを接続してもiTunesで認識しない

助かった 😅
客先で、普段来客や、入所されている方向けにiPadで写真や映像を見せたり、プレゼン資料を見せたりするのに使用されていたんだけど、トラブル発生。

iPadへPC内の画像を転送するフローは以下。

  • デスクトップに”iPad同期用”フォルダを作成
  • その中に更に個別にフォルダを分け、同期させたい画像だけを置く
  • iPadをPCに接続
  • iTunesが起動する
  • iTunesの設定で、iPad起動用フォルダを同期するよう設定(事前に)
  • 同期完了

今まで問題なく同期できていたようなんですが、先日、うまく行かないとの連絡が。。

いつもiPadをパソコンに繋ぐと勝手に終わってたのに、終わらないのよ。。

とのこと。。行って実際やってみると今まではWindowsPCにiPadを接続すると、iTunesが起動するように設定してたのに、起動しない。。

何度やってもダメなので、ググって以下の記事で無事に解決!!
ほんとありがたかったです 🙂

Windows8.1でiPadやiPhoneなどがiTunes同期できない時の対処方法:高齢者やパソコン音痴でも分かるipadの使い方:So-netブログ

ドライバが存在しているかの確認方法ですが、エクスプローラーでC:\Program Files (x86)\Common Files\Apple\Mobile Device Support\Driversまでたどります。「usbaapl64.inf」というファイルが存在しているか確認します。デバイスマネージャに「Apple Mobile Device USB Driver」がない場合、「usbaapl64.inf」が無い、というかそもそもC:\Program Files (x86)\Common Files\Apple\Mobile Device SupportまでたどるとDriversというフォルダ自体が存在していない場合があります。

まさにこの状態。。更に記事通りC:\Program Files\Common Files\Apple\Mobile Device Support\Driversと、Program FilesにはあったのでそれをProgram Files (x86)へコピーすると、無事に認識されました (^^)

…C:\Program Files (x86)\Common Files\Apple\Mobile Device Support/Drivers が無いなんて気づかないよ…😅

ホント助かりました!!

その他の参考サイト

 

向きの調整やってみた(義足板バネで走る)- 其の二 –

2日目。向きの調整やってみた。

…しかし、これが正しいのかもわからず、とりあえず着地て足が外をなるべく向かないようにならないかなぁと、ソケットの付け根で回してみたり、バネの付け根で回してみたり。。

最後撮ってないけど、バネに体重のせた後、前に少しだけ行ってみた 😄