bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptMediumライクな画像ズームを実装できる「MediumLightbox」JavaScript2016.07.15Mediumライクな画像ズームを実装できる「MediumLightbox」シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「MediumLightbox」をご紹介します。Mediumライクな美しいズーム機能を取り入れたい方は必見です。必要最小限のアニメーションで、長文記事との相性はバツグンだと思います。MediumLightbox以下、MediumLightboxの実際のデモになります。デモ文章内に埋め込まれた画像をクリックすると、アニメーションとともに画像がズーミングします。オーバーレイつきなので、文章が非表示になり画像に集中できるのがいいですね。拡大された画像を再度クリックすると、元の状態にもどります。「さっと拡大してさっともどせる」。このシンプルな動作が、可読性を損なわずに長文を読み進められるポイントになるのではないでしょうか。使い方もカンタンで、手軽に実装できるのがうれしいですね。imgタグ内には、data-width、data-heightといった属性を指定できます。オプションではmarginを設定することも可能です。marginのデフォルト値は20になります。シンプルなコードで美しいズーム機能を実装できるMediumLightbox。Ideasは、フォルダにさまざまな楽しい...JavaScript拡張性の高い美しいツールチップを実装できる「Drooltip.js」Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実...JavaScriptナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」...覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。