이것도 연습 삼아...
언제쯤 jquery의 고수가 될까요...
<!doctype html>
<html>
<head>
<title>jQuery Dynamic Image Loading V2</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<style type="text/css">
<!--
#loading { background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center;
position:absolute;
left:50px;
top:50px;
z-index:999;
}
//-->
</style>
<script type="text/javascript">
var gx_img_idx = 0;
var gx_imgs = [];
var loadingImg = "http://jqueryfordesigners.com/images/spinner.gif";
var imgList = ["http://photo-media.daum-img.net/201003/08/yonhap/20100308104425253.jpg"
, "http://photo-media.daum-img.net/201003/08/newsis/20100308114211763.jpg"
, "http://photo-media.daum-img.net/201003/08/yonhap/20100308104504848.jpg"
, "http://photo-media.daum-img.net/201003/08/yonhap/20100308104424018.jpg"];
$(document).ready(function() {
var idx = 0;
$('#imgA').attr("src", imgList[0]); // view first image
// preload images
for(idx=0; idx<imgList.length; idx++) {
gx_imgs.push ( $('<img />').attr('src', imgList[idx]) );
}
$('a').click(function(e) {
var hx = $(this).attr('href');
var pos = $("#imgA").offset();
var width = $("#imgA").width();
var height = $("#imgA").height();
//show the menu directly over the placeholder
$("#loading").css( { "left": (pos.left + width/2) + "px", "top":pos.top+height/2 + "px" } );
$('#loading').show();
if(hx == "#left") {
gx_img_idx--;
if(gx_img_idx == -1) gx_img_idx = 0;
else $('#imgA').attr("src", imgList[gx_img_idx]);
e.preventDefault();
}
else if(hx == "#right") {
gx_img_idx++;
if(gx_img_idx == imgList.length) gx_img_idx = imgList.length-1;
else $('#imgA').attr("src", imgList[gx_img_idx]);
e.preventDefault();
}
//alert (1)
$('#loading').hide();
});
});
</script>
</head>
<body>
<table border=1>
<tr><td><a href="#left"> < </td>
<td>
<div id="tableA">
<img id="imgA" />
<img id="imgB" width=0 height=0/>
</div>
</td>
<td><a href="#right"> > </td></tr>
</table>
<div id="loading">
</div>
</body>
</html>