YOMEMO bxSliderの問題点と解決方法まとめ 2015/06/17 Copyright 2023 SMARTSKIN Co., Ltd. All Rights Reserved.
+BLOG ヤバイ!AMAZONプライムデーでこれ買った!ベスト1 2023/7/12 地元民が選ぶ名古屋グルメおすすめ12選 2022/7/22 モンブランクレープが食べられる『IVY’s GELATO&Coffee』 2022/7/8 2022/7/11 洗車後のコメダ新作『ミルクロネージュ』が身体に染みた 2022/7/3 真夏日PM3:00地獄のジムニー洗車 2022/7/2 『ブルーボトルコーヒー』でワッフルコーヒータイム 2022/7/1 灼熱地獄で食べるレッドチリスモーキーワッパー 2022/6/30 毎年恒例のすき家でニンニク祭してきた 2022/6/29 2022/6/30 小袋ナッツどれがいいんだ問題を解決する 2022/6/28 買うべき名品!ドンキの『ナッツ&デザート』 2022/6/27 +BLOGは名古屋のフリーランス個人ブログです! 人気記事 ヤバイ!AMAZ
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script>jQuery本体とプラグインを読み込みます。 $(do
ブラウザいっぱいに画像を表示し、画像のスライドやサムネイルの表示・非表示のエフェクトがかっこいいだけでなく、HTML5 Audioを使いサウンドも加えた臨場感溢れるスライドショーを実装するチュートリアルを紹介します。 デモページ ※音でます [ad#ad-2] 画像の表示はサムネイルから操作できます。 レッドの矩形は現在表示されているサムネイルで、それをクリックするとブラウザいっぱいに画像を表示します。 Fullscreen Slideshow with HTML5 Audio and jQuery ここでは、実装に使用しているスクリプトを紹介します。 jQuery ベースとなるスクリプトです。 Vegas Background スライドショーをブラウザいっぱいに表示するjQueryのプラグインです。 参考:背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas jS
基本のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01(HTML部分) <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
盆栽教室のサイトを制作した際に、画像ギャラリーを作る必要があったので、せっかくなのでjQueryプラグイン化してみた。 フェードイン・フェードアウトするだけのシンプルな動きなので、さっと設置したい時には便利かも。ということで、さっそく解説。 jQuery crossFader フェードイン・フェードアウトで画像を表示するjQueryプラグイン。画像をクリックすると次の画像へ遷移します。 デモページ ダウンロード 更新履歴 [2011.03.17] ver0.2 ループ制御用オプションを追加 [2011.02.14] ver0.1 リリース 準備 必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。 使い方 JavaScript ギャラリー部分のid(id-of-crossfader)を指定し、クロスフェードを実行。 HTML(画像のみの場合) CSSを適用するため
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC(IE以外)でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも(IE6でも)よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
とあるとこで、とある話をしたので、とあるスライド置いときますよ。 要点を言うと、jQuery MobileでAjax遷移してると、普通にGoogle Analytics置いてても作動しないから気をつけてねって話です。 GATC for jQuery Mobile 僕はこうゆう感じでとりあえず対応しています。作動させるタイミングとフラグメント識別子を記録させるのがポイントです。あとはご自身のサイトに合わせてカスタマイズしていただければと思います。 //Account Setting var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxxx-x']); //Async Snippet (function () { var ga = document.createElement('script'); ga.async = true;
twitter facebook hatena google pocket 巷で流行りのFacebookですが、このWall部分を表示できるプラグインを紹介します。 シンプルな名前の通り、導入もシンプルです。 via:Facebook Wall sponsors 使用方法 Facebook Wallからファイル一式をダウンロードします。 <link href="jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="jquery.neosmart.fb.wall.js" type="text/javascript"></script> <script> $(fu
似たようなのがどこかにありました が。閲覧してるWebサイトそのもの をユーザーにプレゼンする、という インターフェースをjQueryで作った デモ。サンプルはダウンロード出来る のでお暇ならぜひ触ってみてください。 アイデアがちょっと素敵だなぁと思いました。Embedded Help Systemと目的は一緒ですかね。IE6以外は問題なさそうでした。cssでなんとかなるかな・・ 左下に矢印があるのですが、これでプレゼンを進めます。プレゼンは、閲覧中のWebサイトの解説をツールチップを出しながら進めていく形となります。 先にデモご覧になったほうがピンと来そうですね。 デモ※別窓 ハッシュチェンジイベント ハッシュチェンジイベントでブラウザの戻るボタンにも対応されています。 動作も軽快で気持ちいいですね。 綺麗に終わります。 Webサービスの使い方とか、CMSの管理画面の使い方のレクチャーに
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く