Unite Gallery

1. 官網：http://unitegallery.net/
2. GitHub：https://github.com/vvvmax/unitegallery/
3. 說明：http://unitegallery.net/index.php?page=documentation#documenter_cover
4. 主題選項：http://unitegallery.net/index.php?page=default-options

安裝

1. 下載並解壓縮
2. 在專案根目錄建立「unitegallery」資料夾
3. 將解壓目錄中的「dist」裡面檔案複製到「專案/unitegallery」中4.

範例

1. 架構

      <div id="gallery" style="display:none;">
        
        <img alt="Lemon Slice(tile1.jpg)"
             src="img/img01.jpg"
             data-image="img/img01.jpg"
             data-description="This is a Lemon Slice"
             style="display:none">

        <img alt="Peppers"
             src="img/img02.jpg"
             data-image="img/img02.jpg"
             data-description="Those are peppers"
             style="display:none">

        <img alt="Keys"
             src="img/img03.jpg"
             data-image="img/img03.jpg"
             data-description="Those are keys"
             style="display:none">

        <img alt="Friuts in cup"
             src="img/img04.jpg"
             data-image="img/img04.jpg"
             data-description="Those are friuts in a cup"
             style="display:none">

        <img alt="Yellow Flowers"
             src="img/img05.jpg"
             data-image="img/img05.jpg"
             data-description="Those are yellow flowers"
             style="display:none">

        <img alt="Butterfly"
             src="img/img06.jpg"
             data-image="img/img06.jpg"
             data-description="This is butterfly"
             style="display:none">

        <img alt="Boat"
             src="img/img07.jpg"
             data-image="img/img07.jpg"
             data-description="This is a boat"
             style="display:none">

        <img alt="Woman"
             src="img/img08.jpg"
             data-image="img/img08.jpg"
             data-description="This is a woman"
             style="display:none">

        <img alt="Cup Of Coffee"
             src="img/img09.jpg"
             data-image="img/img09.jpg"
             data-description="This is cup of coffee"
             style="display:none">

        <img alt="Iphone Back"
             src="img/img10.jpg"
             data-image="img/img10.jpg"
             data-description="This is iphone back"
             style="display:none">
        <img alt="Lemon Slice"
             src="img/img11.jpg"
             data-image="img/img11.jpg"
             data-description="This is a Lemon Slice"
             style="display:none">

        <img alt="Peppers"
             src="img/img12.jpg"
             data-image="img/img12.jpg"
             data-description="Those are peppers"
             style="display:none">

        <img alt="Keys"
             src="img/img13.jpg"
             data-image="img/img13.jpg"
             data-description="Those are keys"
             style="display:none">

        <img alt="Friuts in cup"
             src="img/img14.jpg"
             data-image="img/img14.jpg"
             data-description="Those are friuts in a cup"
             style="display:none">

        <img alt="Yellow Flowers"
             src="img/img15.jpg"
             data-image="img/img15.jpg"
             data-description="Those are yellow flowers"
             style="display:none">

        <img alt="Butterfly"
             src="img/img16.jpg"
             data-image="img/img16.jpg"
             data-description="This is butterfly"
             style="display:none">

        <img alt="Boat"
             src="img/img17.jpg"
             data-image="img/img17.jpg"
             data-description="This is a boat"
             style="display:none">

        <img alt="Woman"
             src="img/img18.jpg"
             data-image="img/img18.jpg"
             data-description="This is a woman"
             style="display:none">
           
      </div>

2. 引入

    <script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
    <link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
    <script type='text/javascript' src='unitegallery/themes/tiles/ug-theme-tiles.js'></script>

3. 調用插件

  
      <script type="text/javascript">

        jQuery(document).ready(function(){

          jQuery("#gallery").unitegallery();

        });
        
      </script>