215 lines
4.3 KiB
Plaintext
215 lines
4.3 KiB
Plaintext
<%@ page contentType="text/html;charset=utf-8" %>
|
|
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<title><s:message code="manager.visual.visualSetPreview.title"/></title>
|
|
<script src="/js/lib/jquery.slides.min.js"></script>
|
|
|
|
<style>
|
|
#visual {
|
|
display: none;
|
|
position:relative;
|
|
}
|
|
|
|
a.slidesjs-next_visual {
|
|
position:absolute;
|
|
top:140px;
|
|
right:0px;
|
|
width:12px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_next.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a:hover.slidesjs-next_visual {
|
|
position:absolute;
|
|
top:140px;
|
|
right:0px;
|
|
width:12px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_next_over.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a.slidesjs-previous_visual {
|
|
position:absolute;
|
|
top:140px;
|
|
left:0px;
|
|
width:12px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_pre.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a:hover.slidesjs-previous_visual {
|
|
position:absolute;
|
|
top:140px;
|
|
left:0px;
|
|
width:12px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_pre_over.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a.slidesjs-play_visual {
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
width:16px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_play.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a:hover.slidesjs-play_visual {
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
width:16px;
|
|
height:18px;
|
|
background-image: url("/img/manager/visual/btn_play_over.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a.slidesjs-stop_visual {
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
width:18px;
|
|
height:17px;
|
|
background-image: url("/img/manager/visual/btn_stop.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
a:hover.slidesjs-stop_visual {
|
|
position:absolute;
|
|
top:10px;
|
|
right:10px;
|
|
width:18px;
|
|
height:17px;
|
|
background-image: url("/img/manager/visual/btn_stop_over.png");
|
|
z-index:9999;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
float: left;
|
|
}
|
|
|
|
.slidesjs-pagination_visual {
|
|
font-size:0;
|
|
position:absolute;
|
|
bottom:10px;
|
|
right:10px;
|
|
z-index:9999;
|
|
float: left;
|
|
list-style: none;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
.slidesjs-pagination_visual li {
|
|
display:inline;
|
|
padding:0;
|
|
}
|
|
|
|
.slidesjs-pagination_visual li a {
|
|
float: left;
|
|
width: 13px;
|
|
height: 13px;
|
|
z-index:9999;
|
|
background-image: url("/img/manager/visual/btn_pagination_off.png");
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slidesjs-pagination_visual li a:hover {
|
|
width: 13px;
|
|
height: 13px;
|
|
z-index:9999;
|
|
background-image: url("/img/manager/visual/btn_pagination_over.png");
|
|
}
|
|
|
|
.slidesjs-pagination_visual li a.active,
|
|
.slidesjs-pagination_visual li a:hover.active {
|
|
width: 13px;
|
|
height: 13px;
|
|
z-index:9999;
|
|
background-image: url("/img/manager/visual/btn_pagination_on.png");
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="visual" style="width:650px; height:300px; display: none; position:relative;">
|
|
<img src="/img/manager/visual/example-slide-1.jpg" width="650px" height="300px" alt="visual1" />
|
|
<img src="/img/manager/visual/example-slide-2.jpg" width="650px" height="300px" alt="visual2" />
|
|
<img src="/img/manager/visual/example-slide-3.jpg" width="650px" height="300px" alt="visual3" />
|
|
</div>
|
|
|
|
<script>
|
|
/* <![CDATA[ */
|
|
var visualSetSkin = "";
|
|
|
|
<c:choose>
|
|
<c:when test='${visualSetSkin == "A"}'>
|
|
visualSetSkin = "fade";
|
|
</c:when>
|
|
<c:when test='${visualSetSkin == "B"}'>
|
|
visualSetSkin = "slide";
|
|
</c:when>
|
|
</c:choose>
|
|
|
|
$('#visual').slidesjs({
|
|
width:650,
|
|
height:300,
|
|
autoHeight: false,
|
|
dataKey : "visual",
|
|
play: {
|
|
active: true,
|
|
auto: true,
|
|
interval: 4000,
|
|
swap: true,
|
|
restartDelay: 2500,
|
|
effect: visualSetSkin
|
|
},
|
|
navigation: {
|
|
effect: visualSetSkin
|
|
},
|
|
pagination: {
|
|
effect: visualSetSkin
|
|
},
|
|
effect: {
|
|
fade: {
|
|
speed: 400
|
|
}
|
|
}
|
|
});
|
|
/* ]]> */
|
|
</script>
|
|
|
|
</body>
|
|
</html> |