bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」JavaScript2012.01.26画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。LoupeというjQueryプラグインなんですが、これを使えばとても簡単に自分の指定した画像の一部を拡大したりできるようになります。単純に拡大しなくてもマウスオーバーした一部分だけに焦点を当て、それ以外の部分はオーバーレイで暗くするといった使い方もできるので結構おもしろいかと思います。サンプルも作ってみたのでよかったらそちらもどうぞ。以下のサイトからファイルをダウンロードします。pluginそしてhead内にjQuery本体とCSS、JSファイルを読み込みます。src="js/jquery.loupe.js"></script>あとは画像を指定します。$('#loupe1').loupe();});</script>上記はIDにloupe1が指定されている画像に適用します。マークアップはこんな感じです。/>これで以下のようなサンプルになります。画像にマウスを乗せると、スポットライトが当たったようになります。拡大したい場合はaタグを追加して、href属性に拡大した時の画像を指定してあげます。/></a>ついでにオプションも指定してみます。});これでこんな感じに拡大できるようになります。オプションを色々変えると、また違った感じになるのでおもしろいですね。こちらは虫眼鏡で見ているようになります。上記の画像のオプションは以下のようになります。});以下、少しだけオプションの解説です。オプションmax_sizeマウスオーバーした後にズームした時の最大サイズです。min_sizeマウスオーバーした後に縮小した時の最小サイズです。default_size最初にマウスオーバーした時に拡大表示される範囲のサイズを指定できます。shapeマウスオーバーした時の拡大する部分の形を変更できます。circle、rounded、squareの中から選べます。glossytrueかfalseを指定できます。trueにすると拡大表示される部分に光沢が追加されます。レンズを通してみているようになります。drop_shadowtrueかfalseを指定でき、trueにすると拡大表示される部分にドロップシャドウをつけることができます。いうことで他にも色々なパターンがあるので試してみるとおもしろいかと思います。TransitionはAjaxを使ってコン...JavaScriptリスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」ちょっと面白そうだったので使ってみました。個人的にかなり便利なプラグインを発見しました。このページを参考にさせて頂いております。引用はじめまして、こんにちは。今確認してみたところ確かにクリックすると拡大画像ページが表示されてしまいますね...。オプションでそういう指定ができないとなれば、プラグイン自体を弄ったりするしかないかと思います。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。