ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Category Archives: Javascript

[jQuery]無限スクロールを簡単に実装出来る「infiniteslide.js v2」

画面いっぱいに画像を横方向にスクロール(スライドで切り替え、ではないのがミソ)。 それに対してリンクも貼らなくてよいし、ただただ画像が横に回転寿司状態ってやつですね。 さて、過去にも色々スライダー系のjQuery系のプラグインは使ってきましたが、さてどれが一番良いですかいね?って事をすぐに忘却してしまうんですわね・・ 過去に使った事のある「Simply Scroll」というやつも配布サイトを見に行ってみると This product is no longer supported! It was originally created in 2008 and web technology and processing speeds have increased to the point wher……(続きを読む)

[JQuery]instafeedを使ってWebサイトにInstagramのサムネイルを並べる

インスタ映え、って言葉が流行するぐらいに盛り上がってるInstagram。 ツイッターやFacebookはやってなくてもインスタはやってるという芸能人もいます。 ・・・・・・まあ、それなりに面倒くさいですからね前者二つは(笑) 写真ありき、って事が前提のこのInstagramについては深くここで語るのは割愛しますが、「インスタのサムネイル一覧を自身のWebサイトにギャラリー的に並べたい!」って要望を請けまして。 「そんなんRSS吐いてるやろから簡単やろー」と思ってましたが、これがそれなりの手続きが必要でしてね・・・・ よく考えると芸能人のInstagram一覧を自分のブログにあたかもなりすましの如く貼り付ける輩も出てくるでしょうしね。 そんな人はネットにはたっくさんいるってのもよくわかってお……(続きを読む)

スマホサイトのナビゲーションメニューのまとめ

スマホサイトを作る際にけっこう悩むのがナビゲーションをどうするか、という事。 これにレスポンシブサイトで、というのが絡んでくると表示・非表示などの絡みもあり なかなかこいつが難しかったり。 ざっと一覧で見れるもんないかいね、と探してみるとさすがはあるんだこのご時世。 スマホのメニューデザインに悩んだらこれを見る 徹底収集36選! http://liskul.com/cr_spdesign36-5195 2014年10月の記事なのでここ最近どれが一番使われてるのかを知るにも ちょうどよかったのだけど、まさかのドロップダウンメニュー圧勝に 個人的にはちょっと驚いたりしている。 普段、色んな所を見てて一番使いにくいな、と思ったのがこれだったもので(笑) このまとめはメリット・デメリットをきっちりと……(続きを読む)

jQuery:レスポンシブ対応のスライドショー「responsiveslides」

トップページのメインイメージを一定時間で切り替えたい場合、 ちょいと昔ならFLASHの独断場だった気がしますけども、 最近はJQueryさえ使えば、ほぼこれらはクリア出来ます。 「(ブラウザの)Javascript切ってる場合はどうするんだ!」ってそんなもん noscriptで画像一枚貼りますよ、ええ。 スクリプト切ったブラウザで今時どのサイトを見ようってんでいと 言い切ってももはや大丈夫な昨今、JQuery関連はとっても楽です。 いつもはエフェクトが豊富なjqFancyTransitionsを使ってたのですけども 残念な事にこいつはレスポンシブ対応ではないのですね。 画像サイズを指定してやらないとまともに動いてくれないのです。 対応方法があるはずだ、と海外のフォーラムなどを探し回ってみたけ……(続きを読む)

zRSSFeedの日付表示がブラウザによっては英語になる件

jQueryを使いブログのRSSを取得して表示してくれるとても便利なzRSSFeed。 以前、このハナモゲラボでも紹介したのだけども、こいつを使ってて?と思った事が。 それはブラウザによっては日付の表示が英語表記になってしまう事。 スマホ用のサイトにRSS表示させようとした時に初めて気づきました。 どうやらこれはこのプラグインの日付表記に使われてるメソッドが toLocaleDateStringを使用しているせいだとか。 これがブラウザによって解釈のフォーマットが違っているらしく こういう現象が起こってしまうらしいです。 Google Chrome、Safari、そしてスマホブラウザのSleipnirで英語表記になるのを 当方では確認済みです。 ※参考にしたブログ。 Javascriptのt……(続きを読む)

レスポンシブ対応のカルーセルスライダー「Owl Carousel」

スマホサイトで写真をスワイプで送るようなギャラリーを実装しようと 色々と探し回ってて見つけたのがこの「Owl Carousel」。 配布元サイト(GitHub) 例の如くJQueryありきのスクリプトなのでそれもお忘れなく。 GitHubは慣れないと「どっからダウンロードするんじゃあ」とか 「ZIPで配らんかい」となりがちですが、配布ページに行って スクリプトの個別ページに飛び、そこの上記タブの「Releases」をクリックすれば zipファイルのリンクがあるので参考までに。 このOwl Carouselは実装も簡単ですし、レスポンシブデザインに対応しており それに伴ったパラメータも多数用意されてるのが嬉しいです。 ちなみに対応するjQueryのバージョンは1.7以上です。 とこんな感じでh……(続きを読む)

 
1 / 3123

« Jan 2018 February 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28