{include file="header.html"} 
<script type="text/javascript" src="{$template_path}js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="{$template_path}js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{$template_path}js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="{$template_path}js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
{literal}
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 960,
			panel_height:500,
			frame_width: {$min_thumb_w},
			frame_height: {$min_thumb_h},
			overlay_color: 'dimgray',
			background_color: 'dimgray',
			overlay_text_color: 'dimgray',
			caption_text_color: 'dimgray',
			border: '1px solid dimgray' 

		});
	});

	//缩放图片到合适大小
	function ResizeImages(a)
	{
		var myimg,oldwidth,oldheight;
		var maxwidth=960;
		var maxheight=500;
		var imgs = document.getElementById(a).getElementsByTagName('img');   //如果你定义的id不是article，请修改此处

		for(i=0;i<imgs.length;i++){
			myimg = imgs[i]; 
			if(myimg.width > myimg.height)
			{
				 if(myimg.width > maxwidth)
				 {
					oldwidth = myimg.width;
					myimg.height = myimg.height * (maxwidth/oldwidth);
					myimg.width = maxwidth;
				 }
			}else{
				if(myimg.height > maxheight)
				{
					oldheight = myimg.height;
					myimg.width = myimg.width * (maxheight/oldheight);
					myimg.height = maxheight;
				}
			}
		}
	}
{/literal}
</script> 
<style> 
body,div,dl,dt,dd,ul,ol,li{font-size:12px; font-family: simsun,arial,helvetica,clean,sans-serif;} 
.text{width:960px;text-align:center; height:25px; line-height:25px;font-size:20px;font-weight: bold;margin-top:0px;}
.text a{color:#FF0000}
.intro{width:960px;border-top:2px solid #F7F7F7; text-align:left; line-height:25px;  color:#666666;}
img{border:0;} 
ol,ul {list-style:none;}   
/* GALLERY LIST */
/* IMPORTANT - Change '#photos' to the ID of your gallery list to prevent a flash of unstyled content */
#photos { visibility: hidden; margin:0 auto;}
/* GALLERY CONTAINER */
.gallery { background: #ddd; border: 1px solid #aaa; padding: 5px; } 
/* LOADING BOX */
.loader { background: url({$template_path}js/loader.gif) center center no-repeat #ddd; }
/* GALLERY PANELS */
.panel {} 
.panel img {margin:0 auto;display:block;} 
/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay, .panel .overlay-background { height: 60px; padding: 0 1em; }
/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #222; }
/* PANEL OVERLAY CONTENT */
.panel .panel-overlay { color: white; font-size: 0.7em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }
/* FILMSTRIP */
/* 'margin' will define top/bottom margin in completed gallery */
.filmstrip { margin: 5px; }
/* FILMSTRIP FRAMES (contains both images and captions) */
.frame { }
/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: 1px solid #aaa; }
/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap { border-color: #000; }
/* FRAME IMAGES */
.frame img { border: none; }
/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }
/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }
/* POINTER FOR CURRENT FRAME */
.pointer { border-color: #000; }
/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer { filter: chroma(color=pink); } 

#imgShow{ width:960px;height:120px;margin-top: 1px;overflow:hidden;background-color:#000;}
#imgShow a{color:#FF6600;}
#imgShow .txt{width:122px;padding:1px;height:18px;text-align: middle;line-height:18px;font-weight: bold;overflow:hidden;} 

#imgShow .middle{margin: 1px;width:710px;height:120px;line-height:114px;float:left;background-color:#111;overflow:hidden;}
#imgShow .middle ul{}
#imgShow .middle ul li{width:122px; background-color: #787878;float: left;margin-left:2px;margin-top:1px;height:116px; line-height:116px;overflow:hidden;}

#imgShow .left{margin-top: 1px; width:122px;height:114px;line-height:112px;float:left; border: 1px solid #1588FB;padding:1px 0;text-align: center; overflow:hidden;} 
#imgShow .right{margin-top: 1px; width:122px;height:114px;line-height:112px;float:right;border: 1px solid #1588FB;padding:1px 0;text-align: center; overflow:hidden;}

.right_nr {width:750px; float:right;}
.right_nr .top {width:740px; height:30px;  padding-left:10px; line-height:30px; text-align:left; float:left;margin-left:0px}
.right_nr .top ul{}
.right_nr .top ul li{text-align:center;float: left;height:22px; line-height:22px;width:70px; overflow:hidden;} 

.p_title {background-image: url({$template_path}images/index_26.jpg);background-repeat: repeat-x;background-position: left center;float: left;height: 28px;width: 100%;
</style>
<DIV id=main>


	<div id="Layer1" style="border:3px solid #F00; text-align:center;display:none;position:absolute;z-index:1300;"></div>
	<div  style="width:960px;margin: 0;padding: 0">
		<div id="p_title">
			<div class="p_left_nava">
				<ul>{$home.nowNave}</ul>
			</div>
		</div>
		<div class="blank2"></div>
		<div class="nr" style="width:960px;margin: 0;padding: 0">   
			<div class="text"><a href="{$home.arti.article_url}">{$home.arti.name}</a></div>
			<div class="intro"> {$home.arti.edit_comm} [<a href="{$home.arti.article_url}">详细...</a>] </div> 
			<div id="photos" class="galleryview">  
				{if $home.arti.show_img_list} 
				<!-- {foreach from=$home.arti.img_list item=img} -->
					 <div class="panel" id="pics_{$img.fileid}"><A HREF="{$img.filename}" target="_blank"><img src="{$img.filename}" /></A></div>  
				<!-- {/foreach} --> 
				{/if}
 
				<ul class="filmstrip">  
					{if $home.arti.show_img_list} 
					<!-- {foreach from=$home.arti.img_list item=img} --> 
					<li><img SRC="{$img.thumb_url}" onmousemove="ResizeImages('pics_{$img.fileid}');"  BORDER="0" alt="{$img.descs}"  title="{$img.descs}"  width="{$min_thumb_w}" height="{$min_thumb_h}" ></li>
					<!-- {/foreach} --> 
					{/if} 
				</ul> 
			</div>
			<div id="imgShow">
				<div class="left">
					{if $home.arti.pre_arti.arid}
					<a href="{$home.arti.pre_pic_url}" title="{$home.arti.pre_arti.name}"><img src="{$home.arti.pre_arti.min_thumb}" border="0" /></a> 
					<div class="txt"><a href="{$home.arti.pre_pic_url}"><<上一图集</a></div>
					{else}
					 已无图片
					{/if} 		
				</div>
				<div class="middle">
				
					<ul>
					<!-- {foreach from=$home.Tproducts_top item=products} --> 
							<li>
								<a href="{$products.product_url}" target="_blank"><img SRC="{$products.min_thumb}"  WIDTH="{$min_thumb_w}" HEIGHT="{$min_thumb_h}" BORDER="0" title="{$products.alt_name}"></a>
								<div class="txt">
									<a href="{$products.product_url}"  target="_blank">{$products.name}</a>  
								</div>
							</li>
					<!-- {/foreach} --> 
					</ul>				
				
				</div>
				<div class="right">
					{if $home.arti.next_arti.arid} 
						<a href="{$home.arti.next_pic_url}" title="{$home.arti.next_arti.name}"><img src="{$home.arti.next_arti.min_thumb}" border="0" /></a> 
						<div class="txt"><a href="{$home.arti.next_pic_url}">下一图集>></a></div>
					{else}
					 已无图片
					{/if}				
				</div>
			</div>
		</div>
	</div>

 
</DIV>  
{include file="footer.html"}