https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > Jqery LightBox・FancyZoom(PCサイト用)

Jqery LightBox・FancyZoom(PCサイト用)


Jqeryを利用したLight Box(FancyZoom)プラグインです。Jqeryの設置が条件になります。
※以降、LightBoxの設定説明ですが、項目「5.html 本文記述」の調整で、FancyZoomとしても使えます。
詳しくは uikit LightBox参照

「CODE」ボタンをクリックすると参考コードを参照できます。


使用ディレクトリ/
	│
	├index.html (Jqueryの読み込み・下記ファイルの読み込み)
	├css/     ←(「css」「js」「fonts」ディレクトリは別の階層でも問題なし・ただし3ディレクトリを同階層に設置)
	│ └uikit.lightbox.min.css.gz
	├js/
	│ └uikit.lightbox.min.js.gz
	├fonts/
	│ └フォントファイルを設置
	│
	│
	├(image/)   ←(「image」ディレクトリはどこの階層でも問題なし)
	│ └画像を設置
	│



サンプル




1.LightBox CSSファイル


LightBox CSSファイル設置
ディレクトリ配下にcssディレクトリを作成し、uikit.lightbox.min.css、または圧縮版uikit.lightbox.min.css.gzを設置

LightBox CSSファイル読み込み
<head>内に、上記ファイルを読み込み
※CSS遅延読み込みする場合は、下記の項目、6.オプション CSS遅延読み込みを参照


html <head>内

<!-- lightbox用CSS --> <link rel="stylesheet" href="css/uikit.lightbox.min.css.gz">


2.Jqery本体読み込み


Jqery読み込み
Jqery CDN利用参照


3.LightBox JSファイル


LightBox JSファイル設置
ディレクトリ配下にjsディレクトリを作成し、uikit.lightbox.min.js、または圧縮版uikit.lightbox.min.js.gzを設置

LightBox JSファイル読み込み
<head>内もしくは、Avobe the Foldで表示する必要がなければ、</body>直前で読み込み


html </body>直前(または<head>内)

<!-- SCRIPT --> <!-- SCRIPTは、AboveTheFoldで使わないものは</body>直前に記述 Facebook SNS系など --> <!-- Jquery2.1.4 CDN START 最新版 --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js.gz"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js.gz"><\/script>')</script> <!--<![endif]--> <!-- Jquery END --> <!-- JQUERYを利用するSCRIPTやJSファイルは、Jquery.js読み込み後に記述 --> <script src="js/uikit.lightbox.min.js.gz"></script> </body>


4.FONTSファイル


FONTSファイル設置
ディレクトリ配下にfontsディレクトリを作成し、fontファイル10ファイルを設置


5.html 本文記述


html 本文記述
<a>タグ内に、data-uk-lightbox="{group:'group1'}" を追加すると、LightBoxを表示する際のグルーピングがされる('group1'は任意のグループ名)
<a>タグ内に、title="タイトル"を追加すると、LightBox拡大表示の際、画像下にタイトルが表示される("タイトル"は任意のテキスト)
※<a>タグ内に、data-uk-lightbox="{group:'group1'}" のグルーピングをしなければ、FancyZoomとして使える


html 本文

<a href="/image/big_01.jpg" data-uk-lightbox="{group:'group1'}" title="タイトルなど  1件目/20件中"> <img src="/image/thumbnail_01.jpg" alt="タイトル" width="250" height="150"> </a> <a href="/image/big_02.jpg" data-uk-lightbox="{group:'group1'}" title="タイトルなど  1件目/20件中"> <img src="/image/thumbnail_02.jpg" alt="タイトル" width="250" height="150"> </a> <a href="/image/big_03.jpg" data-uk-lightbox="{group:'group1'}" title="タイトルなど  1件目/20件中"> <img src="/image/thumbnail_03.jpg" alt="タイトル" width="250" height="150"> </a>


ここまでは、必須設定です。
以下はページスピードアップのためのオプション設定です。



6.オプション CSS遅延読み込み(ページスピードアップ目的)


CSS遅延読み込み
ページスピードアップのため、LightBoxのCSSファイルを遅延読み込みする場合、
以下のように、CSS読み込み記述を変更して、<head>内に記述
※Above the Foleで使用しない場合、遅延読み込み可能
<link id="lazyCss" rel="subresource" href="css/uikit.lightbox.min.css.gz">

CSS遅延読み込み用Javascript
</body>直前に、下記Javascript CODEの通りJavascriptを記述


html </body>直前

<!-- CSS遅延読み込み --> <script async> //CSS遅延読み込み Lazycss $(function(){ $('#lazyCss').attr('rel', 'stylesheet'); }); </script>


7.オプション 画像preload(画像読み込みスピードアップ目的)


画像preload用Javascript
大画像を表示する際、読み込みに時間がかかると、読込中アイコンがクルクル回り、待機になります。
大画像読み込みスピードアップのため、LightBoxで表示する大画像を前もって読み込みしておく場合、
</body>直前に、下記Javascript CODEの通りJavascriptを記述


html </body>直前

<!-- 画像preload --> <script async> //画像preload function preloadFunc() { for(var i = 0; i< arguments.length; i++){ $("<img>").attr("src", arguments[i]); } } //画像preload引数に先読みしておく画像のパスを指定 preloadFunc("image/big_01.jpg","image/big_02.jpg","image/big_03.jpg"); </script>

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会