<div class=\"inside-banner\">
    <div class=\"banner-title\">圖片集</div>
</div>
<div class=\"main clearfix\">
  
  <script type=\"text/javascript\" src=\"gallery_set/js/jquery.fancybox.js?v=2.1.5\"></script>
	<script type=\"text/javascript\" src=\"gallery_set/js/jquery.fancybox-buttons.js?v=1.0.5\"></script>
	<script type=\"text/javascript\" src=\"gallery_set/js/jquery.fancybox-thumbs.js?v=1.0.7\"></script>
	<script type=\"text/javascript\" src=\"gallery_set/js/jquery.fancybox-media.js?v=1.0.6\"></script>
	<script type=\"text/javascript\">
		$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */

			$(\'.fancybox\').fancybox();

			/*
			 *  Different effects
			 */

			// Change title type, overlay closing speed
			$(\".fancybox-effects-a\").fancybox({
				helpers: {
					title : {
						type : \'outside\'
					},
					overlay : {
						speedOut : 0
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(\".fancybox-effects-b\").fancybox({
				openEffect  : \'none\',
				closeEffect	: \'none\',

				helpers : {
					title : {
						type : \'over\'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(\".fancybox-effects-c\").fancybox({
				wrapCSS    : \'fancybox-custom\',
				closeClick : true,

				openEffect : \'none\',

				helpers : {
					title : {
						type : \'inside\'
					},
					overlay : {
						css : {
							\'background\' : \'rgba(238,238,238,0.85)\'
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(\".fancybox-effects-d\").fancybox({
				padding: 0,

				openEffect : \'elastic\',
				openSpeed  : 150,

				closeEffect : \'elastic\',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});

			/*
			 *  Button helper. Disable animations, hide close button, change title type and content
			 */

			$(\'.fancybox-buttons\').fancybox({
				openEffect  : \'none\',
				closeEffect : \'none\',

				prevEffect : \'none\',
				nextEffect : \'none\',

				closeBtn  : false,

				helpers : {
					title : {
						type : \'inside\'
					},
					buttons	: {}
				},

				afterLoad : function() {
					this.title = \'Image \' + (this.index + 1) + \' of \' + this.group.length + (this.title ? \' - \' + this.title : \'\');
				}
			});


			/*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */

			$(\'.fancybox-thumbs\').fancybox({
				prevEffect : \'none\',
				nextEffect : \'none\',

				closeBtn  : false,
				arrows    : false,
				nextClick : true,

				helpers : {
					thumbs : {
						width  : 50,
						height : 50
					}
				}
			});

			/*
			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
			*/
			$(\'.fancybox-media\')
				.attr(\'rel\', \'media-gallery\')
				.fancybox({
					openEffect : \'none\',
					closeEffect : \'none\',
					prevEffect : \'none\',
					nextEffect : \'none\',

					arrows : false,
					helpers : {
						media : {},
						buttons : {}
					}
				});

			/*
			 *  Open manually
			 */

			$(\"#fancybox-manual-a\").click(function() {
				$.fancybox.open(\'1_b.jpg\');
			});

			$(\"#fancybox-manual-b\").click(function() {
				$.fancybox.open({
					href : \'iframe.html\',
					type : \'iframe\',
					padding : 5
				});
			});

			$(\"#fancybox-manual-c\").click(function() {
				$.fancybox.open([
					{
						href : \'1_b.jpg\',
						title : \'My title\'
					}, {
						href : \'2_b.jpg\',
						title : \'2nd title\'
					}, {
						href : \'3_b.jpg\'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});
		});
	</script>
    <div class=\"content-body\">
        <div class=\"col-025 col-m\">
            <div class=\"in-left-menu\">
                <ul>
                    ({section name=m0 loop=$article.<~_mode~>})
                        <li><a href=\"<~gallery~>({$article.<~_mode~>[m0].parent_url})\">({$article.<~_mode~>[m0].name})</a></li>
                     ({/section})
                </ul>
            </div>
        </div>
        <div class=\"cor-075 col-m\">
          <h3 class=\"page-title\">({$article_main.name})</h3>
            <div class=\"photo-gallery\">
                <link rel=\"stylesheet\" type=\"text/css\" href=\"gallery_set/css/jquery.fancybox.css?v=2.1.5\" media=\"screen\" />
                <link rel=\"stylesheet\" type=\"text/css\" href=\"gallery_set/css/jquery.fancybox-buttons.css?v=1.0.5\" />
                <link rel=\"stylesheet\" type=\"text/css\" href=\"gallery_set/css/jquery.fancybox-thumbs.css?v=1.0.7\" />
              
              	<link rel=\"stylesheet\" type=\"text/css\" href=\"gallery_set/css/lightbox.css\" />
              
                <style type=\"text/css\">
                .fancybox-custom .fancybox-skin {
                    box-shadow: 0 0 50px #222;
                }
                </style>
              
              	({if $_GET.parent_id==null})
              
              ({section name=m1 loop=$article.<~_mode~>[0].child})
              <div class=\"lightbox\"> <img src=\"({$article.<~_mode~>[0].child[m1].pic.0})\" alt=\"\" />
                    <div class=\"hover-overlay\"></div>
                    <div class=\"hover-icons\">
                        <a class=\"fancybox\" href=\"({$article.<~_mode~>[0].child[m1].pic.0})\" data-fancybox-group=\"gallery\"><img src=\"gallery_set/images/icon-zoom.png\" title=\"放大\" alt=\"放大\" /></a>
                    </div>
                </div>
              ({/section})
              
              ({else})
              
                ({section name=m0 loop=$article_parent})
                <div class=\"lightbox\"> <img src=\"({$article_parent[m0].pic.0})\" alt=\"\" />
                    <div class=\"hover-overlay\"></div>
                    <div class=\"hover-icons\">
                        <a class=\"fancybox\" href=\"({$article_parent[m0].pic.0})\" data-fancybox-group=\"gallery\"><img src=\"gallery_set/images/icon-zoom.png\" title=\"放大\" alt=\"放大\" /></a>
                    </div>
                </div>
                ({/section})
              
              ({/if})
            </div>
            <!-- 頁次模組 -->
            <div class=\"page\">({$article_parent_page.wd_rwd_page})</div>
        </div>
        <!-- 右欄 END -->
          
          <script>
    /*
    選單點擊時焦點屬性自動添加
    */
    $(function() {
        var j_setting = {
            tag: \'<~_mode~>\', //-- *命名空間 不可重複使用
            item: \'.in-left-menu>ul>li\', //-- *目標物件群 EX: \'.prolist ul>li\'
            resetitem: \'#menu li:eq(1)\', //-- *重置物件 (通常放到上板選單)
            addclass: \'active\', //-- *增加的class屬性
            default: 0, //-- *預設第幾個為選取
            action: {
                main: \'\',
                menu_child_body: \'ul\',
                menu_child_list: \'li\'
            } //-- 模式 類型  menu1收合式選單
        }

        function work(j_setting) {
            sessionStorage[j_setting.tag] = (typeof(sessionStorage[j_setting.tag]) != \"undefined\" ? sessionStorage[j_setting.tag] : j_setting.default);
            $(j_setting.item).each(function(idx, obj) {
                $(obj).attr(\'jtagid\', idx);
            }).bind(\'click\', function(event) {
                sessionStorage[j_setting.tag] = $(event.target).attr(\'jtagid\');
            });
            $(j_setting.resetitem).bind(\'click\', function() {
                sessionStorage[j_setting.tag] = j_setting.default;
            });
            $(j_setting.item).eq(sessionStorage[j_setting.tag]).addClass(j_setting.addclass);
            if (typeof(j_setting.action) != \"undefined\") menu(j_setting)
        }

        section_back = function(e) {
            var check_child = false;
            sessionStorage[j_setting.tag] = ($(e.target).attr(\'jtagid\') ? $(e.target).attr(\'jtagid\') : $(e.target).parentsUntil(j_setting.action.menu_child_body).last().attr(\'jtagid\'));
            $(j_setting.item).removeClass(j_setting.addclass).find(j_setting.action.menu_child_body).filter(\':visible\').slideUp();
            $(j_setting.item).find(j_setting.action.menu_child_list).removeClass(j_setting.addclass);
            $(e.target).parentsUntil(j_setting.action.menu_child_body).each(function(idx, obj) {
                if ($(obj).find(j_setting.action.menu_child_body).filter(\':visible\').length <= 0 && $(obj).find(j_setting.action.menu_child_body).length > 0 && $(obj).find(j_setting.action.menu_child_body)[0].tagName.toLowerCase() == j_setting.action.menu_child_body.toLowerCase()) {
                    check_child = false;
                    $(obj).addClass(j_setting.addclass).find(j_setting.action.menu_child_body).stop().slideDown();
                } else if ($(obj).find(j_setting.action.menu_child_body).length <= 0) {
                    check_child = true;
                }
            });
            return check_child;
        }

        function menu(j_setting) {
            $(j_setting.item).each(function(idx, obj) {
                $(obj).on(\'click\', section_back);
            });

            switch (j_setting.action.main) {
                case \"menu1\":
                    $(j_setting.item).find(j_setting.action.menu_child_body).find(j_setting.action.menu_child_list).each(function(idx, obj) {
                        $(obj).attr(\'jtagid\', $(j_setting.item).length + idx);
                    }).on(\'click\', section_back);
                    break;
                default:
                    break;
            }

            $(j_setting.item).find(j_setting.action.menu_child_body).hide();
            if (sessionStorage[j_setting.tag]) {
				$(\'[jtagid=\"\' + sessionStorage[j_setting.tag] + \'\"]\').addClass(j_setting.addclass);
				if ($(\'[jtagid=\"\' + sessionStorage[j_setting.tag] + \'\"]\').parentsUntil(\'[jtagid]\').last()[0].tagName!=\'HTML\'){
					$(\'[jtagid=\"\' + sessionStorage[j_setting.tag] + \'\"]\').parentsUntil(\'[jtagid]\').each(function(idx, obj) {
						$(obj).show();
						if (j_setting.action.menu_child_list.toLowerCase() == $(obj)[0].tagName.toLowerCase()) $(obj).addClass(j_setting.addclass);
					});
					$(\'[jtagid=\"\' + sessionStorage[j_setting.tag] + \'\"]\').parentsUntil(\'[jtagid]\').parent().addClass(j_setting.addclass);
                }
            }
        }

        work(j_setting);
    });
    </script>
    </div>
</div>