パソコンヲタクのにょびたが社会保険労務士の国家資格を取得をめざすメディアです

lightGallery メモ

By

html メモ

lightGalleryはjQueryの画像/動画のギャラリープラグインです。

個人的なメモを書いています。

 

lightGallery

 

ダウンロード

http://sachinchoolur.github.io/lightGallery/

 

使い方

  1. サイトからダウンロードする。
  2. 解答されたファイルのCSS, fonts, img, jsをコピぺする
  3. 下記のようにhtml内にJava Scriptとhtmlを書く

 

html

head内に

<link type=”text/css” rel=”stylesheet” href=”./css/lightgallery.css” />

を書く。

 

次に、</body>直前に

<!–jQueryを呼び出す ver.1.8.0以上が必要–>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<!–lightGalleryのスクリプト–>
<script src=”js/lightgallery.min.js”></script>
<!–欲しい機能のjsファイルを呼び出す–>
<script src=”js/lg-thumbnail.min.js”></script>
<script src=”js/lg-fullscreen.min.js”></script>
<script src=”js/lg-autoplay.min.js”></script>
<script src=”js/lg-hash.min.js”></script>
<script src=”js/lg-pager.min.js”></script>
<script src=”js/lg-video.min.js”></script>
<script src=”js/lg-zoom.min.js”></script>
<script type=”text/javascript”> $(document).ready(function() { $(“#lightgallery”).lightGallery(); }); </script>

をコピぺ。

最後に、


<div id=”lightgallery”>

<a href=”./images/001.jpg”>
<img src=”./images/001.jpg”>
</a>

<a href=”./images/002.jpg”>
<img src=”./images/002.jpg” >
</a>

</div>

a hrefは画像、img srcはサムネイルを指定する。

サンプルサイト↓
http://nyobita.main.jp/ichiran/



 

カテゴリー: webデザイン
タグ: , ,