unitegallery 套件

tags: 台南社大10701 相簿

---

引入

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

架構

      <!-- 相簿包裝 -->
      <div id="gallery" style="display:none;">
        
        <!-- 相片項目 -->
        <img alt="相片標題"
             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">

      </div>

調用插件

      <!-- 調用插件 -->
      <script type="text/javascript">
        jQuery(document).ready(function(){
          jQuery("#gallery").unitegallery();
        });        
      </script>

參數

http://unitegallery.net/index.php

tiles-columns	說明
theme_enable_fullscreen_button: true,	//顯示，隱藏主題全屏按鈕。 主題中的位置是不變的

gallery options	說明
theme_enable_fullscreen_button: true,	//顯示，隱藏主題全屏按鈕。 主題中的位置是不變的