<div class=\"inside-banner\">
    <div class=\"banner-title\">圖片集</div>
  </div>

  <div class=\"main clearfix\">
    <div class=\"content-body\">
     
      <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=\"co1-100 col-m\">
          <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>
    ({section name=m0 loop=$article.<~_mode~>})
          <div class=\"lightbox\">
            <img src=\" ({$article.<~_mode~>[m0].pic.0})\" alt=\"\" />
            <div class=\"hover-overlay\"></div>
            <div class=\"hover-icons\"><a class=\"fancybox\" href=\" ({$article.<~_mode~>[m0].pic.0})\" data-fancybox-group=\"gallery\"><img src=\"gallery_set/images/icon-zoom.png\" title=\"放大\" alt=\"放大\" /></a></div>
          </div>
({/section})
          
        </div>
     
        <!-- 頁次模組 -->
       <div class=\"page\">({$article_page.gallery.wd_rwd_page})</div>      
      </div> <!-- 右欄 END -->
      
      
    </div>
  </div>