$(function() { getdata(); slideShow(); function getdata() { var i = 0; $.post("Data/MusicGuide.ashx", function(result) { var html = ""; var Album = ""; $.each(result, function(k, v) { if (v.AlbumName != Album) { if (k != 0) { if (i < 3) { html += "<tr height='30px'><td></td><td></td></tr>" } html += "</table>" } Album = v.AlbumName; i = 0; if (k == 0) { html += "<table cellpadding='0' cellspacing='0' class='show' style='border: 2px solid #FFFF00; height: 280px; width: 100%;'>" } else { html += "<table cellpadding='0' cellspacing='0' style='border: 2px solid #FFFF00; height: 280px; width: 100%;'>" } html += "<tr><td valign='top' align='center' colspan='2'>"; html += "<img src='Images/Album.jpg' height='224px'/>"; if (v.ImgPath == null || v.ImgPath == "") { html += "<img style='cursor: pointer;' src='images/blank.png' width='250px' height='224px' onclick=\"javascript:window.open('AlbumData.aspx?AI=" + v.AlbumID + "');\"title='" + v.AlbumName + "' />" } else { html += "<img style='cursor: pointer;' src='http://alice.toplinedigital.co.th/DataFiles/album/" + v.ImgPath + "' width='250px' height='224px' onclick=\"javascript:window.open('AlbumData.aspx?AI=" + v.AlbumID + "');\"title='" + v.AlbumName + "' />" } html += "</td></tr>" } if (i < 4) { if (i % 2 == 0) { html += "<tr height='30px'><td  style='vertical-align: middle;' width='50%' >" } else { html += "<td  style='vertical-align: middle;' width='50%'>" } html += " &nbsp;<img style='cursor: pointer;' src='Images/gif/Sound.gif' class='IconCenter' onclick=\"javascript:window.open('AlbumData.aspx?AI=" + v.AlbumID + "');\" />"; html += v.SongName; if (i % 2 == 0) { html += "</td>" } else { html += "</td></tr>" } i++ } }); if (i < 3) { html += "<tr height='30px'><td></td><td>&nbsp;</td></tr>" } html += "</table>"; $("#gallery").html(html) }, {}, 'json') } }); function slideShow() { $('#gallery table').css("opacity", "0.0"); $('#gallery table:first').css("opacity", "1.0"); setInterval('gallery()', 6000) } function gallery() { var current = ($('#gallery table.show') ? $('#gallery table.show') : $('#gallery table:first')); var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery table:first') : current.next()) : $('#gallery table:first')); next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 500); current.animate({ opacity: 0.0 }, 500).removeClass('show') }