[jQuery] フルサイズ（ブラウザいっぱい）で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
公開日：
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
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で作るリストのアイコン
CSSだけでも色々出来る！ CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
-
[CSS] ベンダープレフィックスはどこまで必要か？
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[HTML]デザインは、やはり大切だった！
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは？ CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン！
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
