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] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

公開日: : jQuery, Web制作 ,


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」のクラスをつけるだけです。

実際のデモは、下記ページをご覧ください。

jquery-fullsizable

ad

関連記事

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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