I've been developing a photo gallery with 44 images in total, each sized at 300kb. The images are hidden using CSS as shown below:
.koImg1
{
display:none;
}
.koImg2
{
display:none;
}
.koImg3
{
display:none;
}
These examples illustrate how I've hidden all 44 images and animated them using JavaScript as follows:
$(document).ready(function(){
$("#Img1").hover(function(){
$("#kImg1").show();
$("#kImg1").animate({width:'765px',height:'435px'},1000);
});
$("#Img1").mouseleave(function(){
$("#kImg1").hide();
});
$("#Img2").hover(function(){
$("#kImg2").show();
$("#kImg2").animate({width:'765px',height:'435px'},1000);
});
$("#Img2").mouseleave(function(){
$("#kImg2").hide();
});
});
In more detail, here is how the layout works:
<table style="width:100%; background-color:Black;"><tr><td style="width:100%">
<table style="width:800px; height:450px; margin-left:auto; margin-right:auto; border- style:solid; border-width:5px; border-color:Red;"><tr><td style="width:800px; height:450px;">
<asp:Panel ID="Pnl1" runat="server" CssClass ="Pnl1" Width="780" Height="445" BorderStyle="solid" BorderWidth="5px" BorderColor="yellow">
<center>
<asp:Image ID="kImg1" CssClass="koImg1" runat="server" ImageUrl="PAlbum/BMeet/Img1.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="5px" BorderColor="white" />
<asp:Image ID="kImg2" CssClass="koImg2" runat="server" ImageUrl="PAlbum/BMeet/Img2.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="5px" BorderColor="white" />
<asp:Image ID="kImg3" CssClass="koImg3" runat="server" ImageUrl="PAlbum/BMeet/Img3.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white" />
</center>
</asp:Panel>
</td></tr></table>
//AND BELOW TABLES IS THE HOVER TYPE DISPLAYS...
<table style="width:800px; height:110px; margin-left:auto; margin-right:auto;border- style:solid; border-width:5px; border-color:White;"><tr><td style="width:800px; height:110px;">
<asp:Panel ID="Panel1" runat="server" Width="780" Height="105" BorderStyle="solid" BorderWidth="5px" BorderColor="green" ScrollBars="Auto">
<asp:Image ID="Img1" CssClass="Img1" runat="server" ImageUrl="PAlbum/BMeet/Img1.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white" />
<asp:Image ID="Img2" runat="server" ImageUrl="PAlbum/BMeet/Img2.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white" />
<asp:Image ID="Img3" runat="server" ImageUrl="PAlbum/BMeet/Img3.jpg" Width="100" Height="100" BorderStyle="solid" BorderWidth="2px" BorderColor="white" />
</asp:Panel>
</td></tr></table>
</td></tr></table>
The setup works perfectly on the local server and Mozilla Firefox on the production server, but encounters issues with Google Chrome on the production server. Specifically, Chrome only hides and animates images 1 to 26, not 27 to 44.
My suspicion is that it might be due to loading times for the images on the server. Any suggestions on how to overcome this issue would be greatly appreciated!