jquery

jQuery

簡易イメージスライダーなどに使える!jqueryでclassをスイッチさせる方法

jqueryでお馴染みのカルーセルプラグインですが、ちょっとした用途でプラグインは少なからずかかる手間など考えると少し躊躇してしまう場合があります。 というわけで、エフェクトはCSS3に任せて、jquery側はclassのスイッチだけにとどめるコンセプトでイメージスライダーにも使えるコードを書いてみました。

jQuery

Jqueryでlightbox風モーダルウィンドウを作ってみた

プラグインで広く利用されているlightboxですが、ちょっとした用途にプラグイン導入は重かったり、カスタマイズが簡単にできるようにと思い、jqueryの理解を深める一環として自分なりにコードを組んでみました。 ギャラリーでの使用を前提にしてありますので、画像のタテヨコ比が変わっても対応出来るように作ったら意外にソースが長くなってしまいました・・・

jQuery

Lightbox2のモーダルウィンドウを任意のサイズにカスタムする

画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。 これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。 なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。

jQuery

jqueryでスクロール時にポップアップするメニューを設置する方法

記事を見て興味を持った方が同じカテゴリの記事を参照する際のユーザビリティの向上と導線強化のため、スクロールに追従するトップメニューを導入しました。 当サイトのメニュー作成にあたってヘッダー部に固定されたメニューと、任意のスクロールポイントで出現するメニューの2つを用意。 よく見かけるのは下にスクロールすると消えるものですが、あまり頻繁に動きすぎると閲覧していて気が散ると思ったので任意のスクロールポイントだけの制御にしてあります。

jQuery

jqueryでコンテンツや画像の読み込み中にローディングアニメーションを導入する方法

前回の記事でコンテンツのフェードインを導入しましたが、データ量が多いためこのままでは読み込み中その部分が真っ白になってしまいます。 これじゃコンテンツがないのか読み込めていないのか分からないので、併せてローディングアニメーションも導入しました。

jQuery

jqueryでフェードイン表示!.animateでコンテンツや画像をフワッと表示させる方法

当サイトのフロントページは画像がやや大きめなのもあってか、少し読み込みが遅いのが気になっていました。 そこで最近はそれほど見かけない手法ですが、読み込みの遅い部分にエフェクトをかけてやればユーザーのストレスが多少和らぐかな?と思いローディングと併せて導入してみました。