|
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.resim
{
background-repeat:no-repeat;
width:150px;
height:150px;
background-image:url(image/yukleniyor.gif) ;
background-position : center;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#galeri').hide();
$('#btGoster').click(function () {
$('#galeri').show();
$.getJSON("JsonImageView.aspx", { resimEfekt: true },
function (data) {
$.each(data, function (i, resim) {
var yeniResim = $("<img>").attr("src", resim.Url).attr("width", 150).attr("height", 150).load(function () {
$(".resim:eq(" + i + ")").empty().append(yeniResim);
});
});
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server" method="post" action="JsonImageView.aspx">
<div>
<input id="btGoster" type="button" value="Resimleri Göster" />
<table id="galeri">
<tr>
<td>
<div class="resim"></div>
</td>
<td>
<div class="resim"></div>
</td>
<td>
<div class="resim"></div>
</td>
</tr>
<tr>
<td>
<div class="resim"></div>
</td>
<td>
<div class="resim"></div>
</td>
<td>
<div class="resim"></div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|