menu
menu

フラッシュサイトのように画像を全画面表示するjQueryプラグイン | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook3
  • はてなブックマーク2
  • Google+4
  • Pocket0
  • Twitter0

フラッシュサイトのように画像を全画面表示するjQueryプラグイン

  • Labs

jQuery

こんにちは(・∀・)

 今回はフラッシュサイトのように画像を全画面表示するjQueryプラグインのご紹介です。

 今までは画像を全画面に表示するようなウェブサイトを作る場合、Adobe Flash等を使用してのサイト作成がメインでした。


 フルスクリーンフラッシュ表示スクリプト

画像を全画面表示

 最近はHTMLとJavaScript等のライブラリーを利用して同じような効果を付けられるようになってきました。

 ゲーム制作等ではまだまだAdobe Flashの需要はありそうですが、ウェブサイト制作においては、その役割はHTML5とJavaScript置き換わってきたような気がします。なので最近ではFlashを立ち上げることがほとんどなくなりましたww


 今回ご紹介するのはこちらの[JS]画像を簡単に全画面表示するjQueryプラグイン(IE6対応)とこちらjQueryで画面いっぱいに背景写真を表示したり、複数の写真をランダムで表示させる方法です。


 どちらもシンプルで使いやすそうだったので今回ご紹介させていただきましたm(_ _)mちなみに後者は、画像のストレッチ+複数の画像をランダム表示することもできます。


 [JS]画像を簡単に全画面表示するjQueryプラグイン(IE6対応)
 サンプル
 ダウンロード


 サンプルのzipファイルをダウンロードして解凍、中にDemoページと同じサンプルページがそのまま入ってます。


ライセンス

 MIT License


 jQueryで画面いっぱいに背景写真を表示したり、複数の写真をランダムで表示させる方法
 サンプルはリンク先をご確認ください。
 jQueryダウンロード


 設置方法はリンク先に詳しく解説されておりますので、そちらを参考にしてください。


ライセンス

 MIT License


サンプルデモ

 サンプルデモはこちら!

  • カテゴリー:Labs
  • facebook3
  • はてなブックマーク2
  • Google+4
  • Pocket0
  • Twitter0