bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptレスポンシブでタッチ対応のLightbox風ギャラリーを実装できるjQueryプラグイン「lightGallery」JavaScript2014.05.2レスポンシブでタッチ対応のLightbox風ギャラリーを実装できるjQueryプラグイン「lightGallery」lightGalleryというjQueryプラグインを使えば、レスポンシブでタッチにも対応したLightbox風のギャラリーを実装することができます。PC、スマホ、タブレットと様々なデバイスに最適化されるのでとても実用的ですね。前後の矢印でスライドしながら切り替えることができます。ちなみにオプションでフェードに設定することも可能です。lightGallery実際のデモでは画像の他に動画も使われています。動画はYouTubeとVimeoをサポートしています。使い方は、まずhead内にjQuery本体、プラグインファイル(JSとCSS)を読み込ませます。src="js/lightGallery.js"></script>続いてHTMLをマークアップ。ギャラリーに使う各要素をリスト化させます。liのdata属性には拡大時の画像を入れていき、li要素にはサムネイル画像を内包させます。</ul>最後にlightGalleryを呼び出してあげれば完了です。$("#lightGallery").lightGallery();});</script>オプションでは、モードの設定やスピード、ループ、オートなど色々なカスタマイズをすることができます。phoneになります。機能も豊富なので気になる方は是非チェックしてみて下さい。Menuは流れるような遅延アニメーションが美し...JavaScriptウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」jquery.resizeendは、ブラウザのウィンドウをリサイズした...JavaScript要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」...面白いjQueryプラグインがあったのでご紹介します。ZoomというjQueryプラグインを使えば、画像を拡大ズ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。