[jQuery] フルサイズ（ブラウザいっぱい）で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
公開日：
:
jQuery, Web制作 javascript, jQuery
jQuery fullsizable plugin
ブラウザ画面いっぱいに画像を表示したい時に使えるプラグインの紹介です。
使い方
使い方はかなりシンプルです。
<link rel="stylesheet" href="css/fullsizable.css">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullsizable.2.0.1.min.js"></script>
<script>
$(function() {
$('a.fullsizable').fullsizable();
});
</script>
これを<head>内に。
つづいてHTMLです。
<a href="IMG_4556_b.jpg" class="fullsizable"><img alt="London Sunset" src="IMG_4556.jpg"></a> <a href="IMG_4851_b.jpg" class="fullsizable"><img alt="London Eye 1" src="IMG_4851.jpg"></a> <a href="IMG_4713_b.jpg" class="fullsizable"><img alt="London Eye 2" src="IMG_4713.jpg"></a> <a href="IMG_5887_b.jpg" class="fullsizable"><img alt="Big Ben" src="IMG_5887.jpg"></a> <a href="IMG_5898_b.jpg" class="fullsizable"><img alt="Tower Bridge" src="IMG_5898.jpg"></a> <a href="IMG_6194_b.jpg" class="fullsizable"><img alt="Piccadilly Circus" src="IMG_6194.jpg"></a>
かなりシンプルです。
大きいサイズの画像にリンクし、aタグに「fullsizable」のクラスをつけるだけです。
実際のデモは、下記ページをご覧ください。
ad
関連記事
-
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[javascript] Google Maps javascript API v3の使い方（基本編）
Google Maps javaScript API v3とは Google Maps API V
-
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選！
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする！
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
-
[HTML]デザインは、やはり大切だった！
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[Dreamweaver] テンプレート機能初級編！
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる！
デフォルトのままじゃ、狭い！ DreamWeaverのタイトルを入力する枠があると思いますが、これ
