1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
  2. Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title>Home Page</title>
  8. <link rel="shortcut icon" href="Image/Train.ico" />
  9. <script type="text/javascript" src="script/jquery-1.3.1.min.js"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function() {
  12. //Execute the slideShow
  13. slideShow();
  14. });
  15. function slideShow() {
  16. //Set the opacity of all images to 0
  17. $('#gallery a').css({
  18. opacity: 0.0
  19. });
  20. //Get the first image and display it (set it to full opacity)
  21. $('#gallery a:first').css({
  22. opacity: 1.0
  23. });
  24. //Set the caption background to semi-transparent
  25. $('#gallery .caption').css({
  26. opacity: 0.7
  27. });
  28. //Resize the width of the caption according to the image width
  29. $('#gallery .caption').css({
  30. width: $('#gallery a').find('img').css('width')
  31. });
  32. //Get the caption of the first image from REL attribute and display it
  33. $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({
  34. opacity: 0.7
  35. }, 400);
  36. //Call the gallery function to run the slideshow,
  37. 6000 = change to next image after 6 seconds
  38. setInterval('gallery()', 2500);
  39. }
  40. function gallery() {
  41. //if no IMGs have the show class, grab the first image
  42. var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
  43. //Get next image, if it reached the end of the slideshow,
  44. rotate it back to the first image
  45. var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
  46. //Get next image caption
  47. var caption = next.find('img').attr('rel');
  48. //Set the fade in effect for the next image, show class has higher z-index
  49. next.css({
  50. opacity: 0.0
  51. }).addClass('show').animate({
  52. opacity: 1.0
  53. }, 1000);
  54. //Hide the current image
  55. current.animate({
  56. opacity: 0.0
  57. }, 1000).removeClass('show');
  58. //Set the opacity to 0 and height to 1px
  59. $('#gallery .caption').animate({
  60. opacity: 0.0
  61. }, {
  62. queue: false,
  63. duration: 0
  64. }).animate({
  65. height: '1px'
  66. }, {
  67. queue: true,
  68. duration: 300
  69. });
  70. //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
  71. $('#gallery .caption').animate({
  72. opacity: 0.7
  73. }, 100).animate({
  74. height: '100px'
  75. }, 500);
  76. //Display the content
  77. $('#gallery .content').html(caption);
  78. }
  79. </script>
  80. <style type="text/css">
  81. body {
  82. font-family: arial
  83. }
  84. .clear {
  85. clear: both
  86. }
  87. #gallery {
  88. position: relative;
  89. height: 360px
  90. }
  91. #gallery a {
  92. float: left;
  93. position: absolute;
  94. }
  95. #gallery a img {
  96. border: none;
  97. }
  98. #gallery a.show {
  99. z-index: 500
  100. }
  101. #gallery .caption {
  102. z-index: 600;
  103. background-color: #000;
  104. color: #ffffff;
  105. height: 100px;
  106. width: 100%;
  107. position: absolute;
  108. bottom: 0;
  109. }
  110. #gallery .caption .content {
  111. margin: 5px
  112. }
  113. #gallery .caption .content h3 {
  114. margin: 0;
  115. padding: 0;
  116. color: #1DCCEF;
  117. }
  118. </style>
  119. </head>
  120. <body>
  121. <form id="form1" runat="server">
  122. <div style="width: 258px; margin-left: auto; margin-right:auto; height: 113px;">
  123. <asp:Login ID="Login1" Style="margin:auto" runat="server" BackColor="#F7F7DE" BorderColor="#CCCC99" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="10pt" Font-Bold="True" OnAuthenticate="Login1_Authenticate" TitleText="Log In To PRS" LoginButtonText="Sign In">
  124. <TitleTextStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
  125. <LoginButtonStyle Font-Bold="True" />
  126. </asp:Login>
  127. <b><u>New Registration:</u></b>
  128. <asp:LinkButton ID="lnkSignUp" runat="server" PostBackUrl="~/Passenger_Registration.aspx" Font-Bold="True" Style="z-index: 50; left: 510px; position:
  129. absolute; top: 138px" Width="77px">Sign Up</asp:LinkButton>
  130. </div>
  131. <br /><br />
  132. <table>
  133. <tr>
  134. <td>
  135. <div id="gallery">
  136. <a href="#" class="show">
  137. <img src="Image/Train6.jpeg" alt="Flowing Rock" width="400" height="260" title="" alt="" rel="<h3>Wel Come To PRS(Passenger Reservation System)</h3>LifeLine of The Nation....." />
  138. </a>
  139. <a href="#">
  140. <img src="Image/Train1.jpeg" alt="Grass Blades" width="400" height="260" title="" alt="" rel="<h3>At Your Service</h3>The All Weather Route with Center to Center Convenience . " />
  141. </a>
  142. <a href="#">
  143. <img src="Image/Train2.jpeg" alt="Ladybug" width="400" height="260" title="" alt="" rel="<h3>Rail Road</h3>The Standard Railroad of the World." />
  144. </a>
  145. <a href="#">
  146. <img src="Image/Train3.jpeg" alt="Lightning" width="400" height="260" title="" rel="<h3>Old Reliable</h3>But the Railroad Always Runs ." />
  147. </a>
  148. <a href="#">
  149. <img src="Image/Train4.jpeg" alt="Lotus" width="400" height="260" title="" alt="" rel="<h3>Lotus</h3>Room to Move, Think, Relax ." />
  150. </a>
  151. <a href="#">
  152. <img src="Image/Train5.jpeg" alt="Mojave" width="400" height="260" title="" alt="" rel="<h3>Western Railways</h3>Good Ideas Make a Great Railway." />
  153. </a>
  154. <div class="caption">
  155. <div class="content"></div>
  156. </div>
  157. </div>
  158. <div class="clear"></div>
  159. </td>
  160. </tr>
  161. </table>
  162. <iframe src="marqeePage.htm" width="400" height="260" style="z-index: 100; left: 573px;
  163. position: absolute; top: 170px"></iframe>
  164. </form>
  165. </body>
  166. </html>