相册
//弹出boatspic.jsp
function bigPic(){ var ajaxObj = { url : contextPath+"/business/boatsbaseinfo/findsgzcbTpById.do", data:{id:gzcbid_tp}, sucF : function(data) { if(data!=null || data!=""){ var url = encodeURI(contextPath+"/business/boats/boatspic.jsp?id="+gzcbid_tp+"&data="+data); top.openDialog(url,{id:"swzhoto",height:500,width:1050,title:"查看照片"}); // window.open("bbjmphoto.html"); }else{ alert("暂无图片"); } } }; App.ajax(ajaxObj); }
//boatspic.jsp页面
<%@page import="bios.report.hazelnut.id"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <% String contextPath = request.getContextPath(); String id = request.getParameter("id"); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0037)http://www.cjienc.com/gis/search.html --> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片轮播</title> <head> <link href="/njszhd/webfront/css/szhd/nj_szhd.css" rel="stylesheet" /> <link href="/njszhd/webfront/css/style.css" rel="stylesheet" /> <link href="css/newsdetail.css" rel="stylesheet" type="text/css"></link> <script src="/njszhd/webfront/js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="<%=contextPath %>/assets/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="<%=contextPath%>/assets/artDialog/jquery.artDialog.js?skin=default"></script> <script type="text/javascript" src="<%=contextPath%>/assets/artDialog/iframeTools.js"></script> <script type="text/javascript" src="<%=contextPath%>/webfront/js/jquery.getParmByUrl.js"></script> <script type="text/javascript" src="<%=contextPath%>/webfront/js/jquery.getParmByUrl.js"></script> <script type="text/javascript" src="<%=contextPath%>/webfront/js/scripts.js"></script> <script type="text/javascript" src="<%=contextPath%>/webfront/js/scripts-ext.js"></script> <script src="js/boatspic.js" type="text/javascript"></script> <script type="text/javascript">var contextpath='<%=contextPath%>';</script> </head> <body> <center> <div class="detail_context_pic"> <div class="detail_context_pic_top"> <a href="#"><img src="<%=contextPath%>/business/boatsbaseinfo/getBeaconPictureAll.do?id=<%=id%>,0" alt="" id="pic1" curindex="0" style="max-width: 600px;max-height: 340px"/></a> <a id="preArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="preArrow_A"></span></a> <a id="nextArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="nextArrow_A" style="display: none;"></span></a> <div id="miaoshuwarp"> <div class="miaoshu"> </div> </div> </div> <!--图片轮播--> <div class="detail_context_pic_bot" style="position:absolute;height:120px;z-index:2008;bottom:10px;"> <div class="detail_picbot_left"> <a href="javascript:void(0)" id="preArrow_B"><img src="image/left1.jpg" alt="上一个"></a> </div> <div class="detail_picbot_mid"> <ul id = "tplb"> </ul> </div> <div class="detail_picbot_right"> <a href="javascript:void(0)" id="nextArrow_B"><img src="image/right1.jpg" alt="下一个"/></a> </div> </div> </div> <!--图片轮换结束--> </center> </body></html>
/*通用newsdetail.css*/ body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,figure{ margin:0px; padding:0px;} body,button,input,select,textarea{ font-family:"微软雅黑";font-size:12px; } .clearleft{clear:left;} .clearright{clear:right} .left{float:left;} .right{float:right;} .clear{clear:both;} p,ul,li,dl,dd,dt,form,h1,h2,h3,h4,h5,h6{list-style:none;} img{border:none;} a{outline:none;blr:expression(this.onFocus=this.blur());text-decoration:none;color:Black;} a:hover{ color:#ff5d11; text-decoration:underline;} img:hover{background: white;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8;} /*图片轮播*/ .detail_context_pic{width:680px;margin-top:20px;margin-bottom:20px;overflow:hidden;} .detail_context_pic_top{width:680px;overflow:hidden;text-align:center;position:relative;z-index:1;} .detail_context_pic_bot{width:680px;height:107px;overflow:hidden;margin-top:20px;} .detail_picbot_left{float:left;width:30px;height:107px;overflow:hidden;} .detail_picbot_left a{display:block;width:30px;height:107px;} .detail_picbot_mid{float:left;width:620px;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;height:77px;overflow:hidden;padding-top:15px;padding-bottom:13px;} .detail_picbot_mid ul{height:77px;width:620px;overflow:hidden;position:relative;} .detail_picbot_mid ul li{float:left;height:77px;margin-left:25px;display:inline;width:94px;text-align:center;overflow:hidden;position:relative;} .detail_picbot_mid ul li img{height:73px;max-width:90px;} #pic1{max-width:680px;} .selectpic{border:2px solid red;} .detail_picbot_right{float:left;width:30px;height:107px;overflow:hidden;} .detail_picbot_right a{display:block;width:30px;height:107px;} #preArrow{left:0px;} #nextArrow{right:0px;} .contextDiv{cursor:pointer;height:100%;width:50%;position:absolute;top:0px;z-index:5;background:url("blank") repeat;} .contextDiv span{position:absolute;top:50%;margin-top:-20%;width:39px;height:50px;} #preArrow_A{left:16px;background:url('images/left1.jpg') no-repeat;display:none;} #nextArrow_A{right:16px;background:url('images/left1.jpg') no-repeat;display:none;} #miaoshuwarp{position:relative;bottom:0;z-index:1;width:680px;text-align:left;} .miaoshu{position:absolute;width:660px; padding:0 10px; bottom:0;height:30px; line-height:30px;color:White;font-size:14px;z-index:3;background:url("images/bcgL.png") repeat-x; font-family:"宋体";} .bodymodal{width:100%;height:100%;overflow:hidden;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;z-index:1100;position:fixed;top:0px;left:0px;display:none;} .firsttop_left{width:300px;height:250px;margin-right:30px;overflow:hidden;float:left;} .firsttop_right{float:left;width:270px;overflow:hidden;} .close2{height:17px;} .close2 a{background:url('images/close.jpg') 0px 0px no-repeat;width:15px;height:15px;display:block;float:right;} .replay{height:24px;margin-top:20px;overflow:hidden;} .replay h2{float:left;font-size:16px;} .replay p{float:left;margin-left:15px;display:inline;line-height:24px;padding-right:25px;background:url('images/replay.png') right no-repeat;} .replay p a{color:white;font-size:14px;} .replay p a:hover{color:#FF702D;text-decoration:underline;} .pictwo{width:270px;height:88px;overflow:hidden;margin-top:20px;} .pictwo ul li{width:120px;height:88px;float:left;margin-right:15px;position:relative;overflow:hidden;} .pictwo ul li img{width:120px;height:88px;} .imgdivtext{position:absolute;bottom:0px;height:25px;width:120px;background:rgba(0, 0, 0, 0.6);line-height:25px;text-align:center;left:0px;z-index:4;*background:#000;*filter:alpha(opacity=50);} .imgdivtext a{color:White;font-size:14px;font-weight:bold;} .imgdivtext a:hover{color:#FF702D;text-decoration:underline;} .returnbtn {margin-top:35px;margin-left:50px;} .returnbtn a{width:115px;height:22px;border:1px solid #ccc;padding:5px 15px;line-height:22px;text-align:center;color:White;font-size:16px;display:block;} .returnbtn a:hover{color:#FF702D;border:1px solid #8d5a00;} .firsttop{width:600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;} .endtop{width:600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;}
@RequestMapping(value = "/getBeaconPictureAll.do", method = RequestMethod.GET) @ResponseBody public void getBeaconPictureAll(String id,HttpServletResponse response) throws IOException { String id1 = id.split(",")[0]; int index = Integer.valueOf(id.split(",")[1]); List<GzcbPic> list = getBoatsBaseInfoService().getPictureAll(id1); response.setContentType("image/jpeg"); FileInputStream fis = null; OutputStream os = null; try { fis = new FileInputStream(list.get(Integer.valueOf(index)).getTplj()); os = response.getOutputStream(); int count = 0; byte[] buffer = new byte[1024 * 8]; while ((count = fis.read(buffer)) != -1) { os.write(buffer, 0, count); } } catch (Exception e) { e.printStackTrace(); } finally { try { os.flush(); fis.close(); os.close(); } catch (IOException e) { e.printStackTrace(); } } } /** * 查询工作船舶图片 判断是否有图片 */ @RequestMapping(value = "/findsgzcbTpById.do", method = RequestMethod.POST) @ResponseBody public int findswztpById(String id){ return getBoatsBaseInfoService().findsgzcbtpById(id).size(); }