Awesome Bubble Navigation with jQuery | Codrops
In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek. The Ma
Kitchen Table: Adding a Lightbox
In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it. In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo wh
Interactive Photo Desk with jQuery and CSS3 | Codrops
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that […] In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped,
An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We
Creating a polaroid photo viewer with CSS3 and jQuery
Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid. Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shad
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法 – bl6.jp
すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探している人なんかにはまさにといった感じかと思います。その名もFLEXSLIDER。しかも軽量なのがうれしいです。とても有名みたいですが自分は最近知りました…。以下、簡単な使い方です。 [ads_center] FLEXSLIDERの使い方 まずは下記サイトよりダウンロードします。 FlexSlider – The Best Responsive jQuery Slider head内でjQueryとプラグイン、そしてCSSを読み込みます。 <link rel="stylesheet" href="flexslider.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
bxSliderで「次へ」「前へ」ボタンをオリジナル画像に変更する - Qiita
概要 bxSliderで表示する「次へ」「前へ」のナビゲーションボタンをオリジナルの画像に差し替えます。 bxSliderに同梱されているナビ画像、CSSには手を入れません。 HTMLとCSS スライダーエリアの左右にnaviボタンを配置 CSSは必ずjquery.bxslider.min.cssの後に読み込むよう指定 .feed-prev-btn { background-image: url(../images/btn_prev.png); } .feed-next-btn{ background-image: url(../images/btn_next.png); } .feed-prev-btn:hover { background-image: url(../images/btn_prev_on.png); } .feed-next-btn:hover{ background-
【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。
今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider：サンプル・デモ 特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の１つです。 実装方法は以下のとおり。 ［bxSlider］の設置方法最初に［bxSlider］の本体ファイルをダウンロードします。 リンクは以下より。 bxSlider：ダウンロード フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxsl
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
イメージスライダーを付けてみよう
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
WordPressでjQueryが動かないときの対策 | リノベーター（旧ザ・サイベース）
こんにちは。@tomicciです。 WordPressで運営しているブログやサイトで、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります。。 HTMLタグの貼り付け方には問題はないはずなのに、どうにもこうにも動かない。 そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生していないかチェックをしましょう。 僕はFirfoxの場合はFirebug、ChromeやIEでデバッグをおこなう場合は「F12」キーで起動する開発ツールのコンソールを使用しています。※Windowsユーザーです。 「TypeError: $ is not a function」 こんな感じのエラーが表示されていたら、「$」を使ったコードが無効になっています。 WordPressでは、jQueryやPrototypeといった、他のJavascriptのライブラリ
レスポンシブ対応カルーセル「Owl Carousel 2」のWordPress設置方法
当ブログ「アフィリ課」のスマホ訪問者は全体の約30%ですが、Googleアナリティクスが解析したスマホからのアフィリエイト制約率はアクセスに比例するほどの数字ではありません。 当ブログはレスポンシブWebデザインなので、グローバルメニューやサイドメニューなどのUIが端末の閲覧幅により可変します。特にスマホ閲覧ではサイドバーが本文の下部に回り込み、フッターと連続したメニュー構成になります。 大概のレスポンシブサイトの左右カラムは当ブログと同様に反応するか、サイドメニュー自体をCSSで非表示にしています。 そのため、スマホユーザーは表示領域の狭さと相まって、ページ下段に場所を移したサイドバー掲載のおすすめ商材メニューを目にする機会が極端に減ってしまいます。それはアナリティクス解析の直帰率の高さからも容易に想像することができます。 スマホ環境には、こうした内部リンクからの成約を妨げる要因があり、
[jQuery]メニューが横から出てくる「sidr」
選んだ理由こういう横から生えてくる系のメニューをつけてるサイトって、 ヘッダーが画面上部に固定表示されてるパターンが多い気がする。 サイト名をアピールしたり、常にメニューを開ける状態にしてるから便利でしょみたいなことなんだとは思う。 でもぶっちゃけ、スマホみたいなサイズで固定表示なんかされると邪魔くさくて仕方がない。 ページトップとかブラウザの標準機能に付いてんじゃん。 そんなちょくちょくページ移動しないでしょうよ。 画面を広く使えるほうがいいんじゃないの。 使い分けなんだとは思うけどね。 で、ドロワーメニューの中にはそれ自体の機能としてトリガーになるボタンが常時表示されるタイプがあったりして。 それ以外はいい感じだったのにね、残念。 ということで、ただキーになるリンク（ボタン）をクリックしたら表示してくれる、 シンプルな挙動により選んだ。 導入+閉じるボタンの作成公式サイトからDLできる
![[jQuery]メニューが横から出てくる「sidr」](https://cdn-ak-scissors.b.st-hatena.com/image/square/120b90d7ec05d12cf5dacbae34ede1a188f96a13/height=288;version=1;width=512/https%3A%2F%2Fblog.megefeps.info%2Fwp-content%2Fuploads%2Fimg.jpg)
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FlexSlider Properties
https://github.com/jquery/jquery-ui/tree/master/themes/base/images
finefinefine.jp
