모바일 터치 슬라이더 관련인데요
혹시나 아시는분계실까 질문드려봅니다.
view.jsp , Detail.jsp 가 있구요
view.jsp 에서는 이미지가 리스트로 보여지고
detail.jsp에서는 슬라이더가 되는 상황입니다.
view.jsp 에서 이미지를 클릭해서 넘어가면 detail.jsp에서 그 이미지부터 슬라이더가 되야되는 상황인데
view.jsp 에서 리스트중 첫번째 이미지를 선택했을땐 detail.jsp에서 슬라이드가 잘 됩니다
헌데
두번째 이미지나 기타 다른 이미지를 선택해주고 넘어가면
슬라이드가 되긴하나 다음,전 요런 이미지가 보여지질 않네요
소스 올려봅니다.
view.jsp 에서 필요한 소스
function showdetail(ojs){
var form = document.slist;
form.mp.value = ojs;
form.action = "viewDetail.jsp";
form.submit();
}
<td bgcolor="#F4F4F4">사진들</td>
<td bgcolor="#FFFFFF">
<form name="slist" method="get" >
<input type="hidden" name="mp"/>
<input type="hidden" name="ps1" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_main"/>" />
<input type="hidden" name="ps2" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_one"/>" />
<input type="hidden" name="ps3" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_two"/>" />
<input type="hidden" name="ps4" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_three"/>" />
<input type="hidden" name="ps5" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_four"/>" />
<input type="hidden" name="ps6" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_five"/>" />
<input type="hidden" name="ps7" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_six"/>" />
<input type="hidden" name="ps8" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_seven"/>" />
</form>
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_main"/>" onclick="showdetail('ps1');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_one"/>" onclick="showdetail('ps2');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_two"/>" onclick="showdetail('ps3');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_three"/>" onclick="showdetail('ps4');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_four"/>" onclick="showdetail('ps5');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_five"/>" onclick="showdetail('ps6');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_six"/>" onclick="showdetail('ps7');" />
<img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_seven"/>" onclick="showdetail('ps8');" />
=================================================
detail.jsp 소스
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String mp = request.getParameter("mp");
String ps1 = request.getParameter("ps1");
String ps2 = request.getParameter("ps2");
String ps3 = request.getParameter("ps3");
String ps4 = request.getParameter("ps4");
String ps5 = request.getParameter("ps5");
String ps6 = request.getParameter("ps6");
String ps7 = request.getParameter("ps7");
String ps8 = request.getParameter("ps8");
String mps = mp.substring(2,3);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
</HEAD>
<link rel="stylesheet" type="text/css" href="../css/Site.css" />
<script type="text/javascript" language="javascript" src="../Scripts/zepto.js"></script>
<script>
var tmp = 0;
function showpt(){
var obs = "<%=mp%>";
document.getElementById(obs).style.display = "block";
}
$(document).ready(function () {
//translate 좌표
//이미지1개당 크기
var mps = "<%=mps%>" ;
var x1 = 190 * mps - 190;
var w = 190;
var x = 0;
//width = mps * 190;
var width = $($("ul img").get(0)).width();
x = x1;
width = w;
$("ul").swipeLeft(function (event) {
if (x == ($(this).width() - $($(this).find("img").get(0)).width())) {
//끝점에서 아무이벤트 없음
event.preventDefault();
}
else {
x += width;
alert("오른쪽");
alert("width값 "+width);
alert("x 값"+ x);
if(tmp == 0)
{
tmp = mps;
}
// document.getElementById("ps" + tmp).style.display="inline";
$(this).anim({ translate: '-' + x + 'px, 0px', opacity: 0.5 }, 0.5, 'ease-out').css("opacity", 1);
tmp = parseInt(tmp)+parseInt(1);
document.getElementById("ps"+tmp).style.display= "inline";
}
}).swipeRight(function () {
if (x == 0) {
//시작점에서 아무이벤트없음
event.preventDefault();
}
else {
x -= width;
$(this).anim({ translate: '-' + x + 'px, 0px', opacity: 0.5 }, 0.5, 'ease-out').css("opacity", 1);
alert("왼쪽");
}
});
});
</script>
<BODY onload="showpt();">
<div id="wrap">
<ul>
<li>
<div id ="ps1" style="display:none">
<img src ="<%=ps1 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id ="ps2" style="display:none">
<img src ="<%=ps2 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id = "ps3" style="display:none" >
<img src ="<%=ps3 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id = "ps4" style="display:none">
<img src ="<%=ps4 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id ="ps5" style="display:none">
<img src ="<%=ps5 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id ="ps6" style="display:none">
<img src ="<%=ps6 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id = "ps7" style="display:none">
<img src ="<%=ps7 %>" width="190px" height="300px"/>
</div>
</li>
<li>
<div id ="ps8" style="display:none">
<img src ="<%=ps8 %>" width="190px" height="300px"/>
</div>
</li>
</ul>
</div>
</BODY>
</HTML>
잘부탁드립니다. 몇일째 해매고 있습니다. ㅜㅜ
위 붉은색으로 해논 스크립트에서 수정이 되면 될거같은데
잘안되네요 도움기다려봅니다 ㅜㅜㅜ
339
3,854
2011-03-08 09:58:47
닉네임
