PageRenderTime 51ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/Menu/media/js/Slides/examples/Linking/index.html

https://bitbucket.org/vincentjames501/cs394
HTML | 91 lines | 88 code | 3 blank | 0 comment | 0 complexity | fab251819ae76dec906a23025591a511 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	
    6. 

  6. 	<title>Slides, A Slideshow Plugin for jQuery</title>
    7. 

  7. 	
    8. 

  8. 	<link rel="stylesheet" href="css/global.css">
    9. 

  9. 	
    10. 

  10. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    11. 

  11. 	<script src="js/slides.min.jquery.js"></script>
    12. 

  12. 	<script>
    13. 

  13. 		$(function(){
    14. 

  14. 			// Set starting slide to 1
    15. 

  15. 			var startSlide = 1;
    16. 

  16. 			// Get slide number if it exists
    17. 

  17. 			if (window.location.hash) {
    18. 

  18. 				startSlide = window.location.hash.replace('#','');
    19. 

  19. 			}
    20. 

  20. 			// Initialize Slides
    21. 

  21. 			$('#slides').slides({
    22. 

  22. 				preload: true,
    23. 

  23. 				preloadImage: 'img/loading.gif',
    24. 

  24. 				generatePagination: true,
    25. 

  25. 				play: 5000,
    26. 

  26. 				pause: 2500,
    27. 

  27. 				hoverPause: true,
    28. 

  28. 				// Get the starting slide
    29. 

  29. 				start: startSlide,
    30. 

  30. 				animationComplete: function(current){
    31. 

  31. 					// Set the slide number as a hash
    32. 

  32. 					window.location.hash = '#' + current;
    33. 

  33. 				}
    34. 

  34. 			});
    35. 

  35. 		});
    36. 

  36. 	</script>
    37. 

  37. </head>
    38. 

  38. <body>
    39. 

  39. 	<div id="container">
    40. 

  40. 		<div id="example">
    41. 

  41. 			<div id="slides">
    42. 

  42. 				<div class="slides_container">
    43. 

  43. 					<div class="slide">
    44. 

  44. 						<h1>First Slide</h1>
    45. 

  45. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    46. 

  46. 						<p><a href="#4" class="link">Check out the fourth slide &rsaquo;</a></p>
    47. 

  47. 					</div>
    48. 

  48. 					<div class="slide">
    49. 

  49. 						<h1>Second Slide</h1>
    50. 

  50. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    51. 

  51. 						<p><a href="#5" class="link">Check out the fifth slide &rsaquo;</a></p>
    52. 

  52. 					</div>
    53. 

  53. 					<div class="slide">
    54. 

  54. 						<h1>Third Slide</h1>
    55. 

  55. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    56. 

  56. 						<p><a href="#1" class="link">Check out the first slide &rsaquo;</a></p>
    57. 

  57. 					</div>
    58. 

  58. 					<div class="slide">
    59. 

  59. 						<h1>Fourth Slide</h1>
    60. 

  60. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    61. 

  61. 						<p><a href="#6" class="link">Check out the sixth slide &rsaquo;</a></p>
    62. 

  62. 					</div>
    63. 

  63. 					<div class="slide">
    64. 

  64. 						<h1>Fifth Slide</h1>
    65. 

  65. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    66. 

  66. 						<p><a href="#7" class="link">Check out the seventh slide &rsaquo;</a></p>
    67. 

  67. 					</div>
    68. 

  68. 					<div class="slide">
    69. 

  69. 						<h1>Sixth Slide</h1>
    70. 

  70. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    71. 

  71. 						<p><a href="#1" class="link">Check out the first slide &rsaquo;</a></p>
    72. 

  72. 					</div>
    73. 

  73. 					<div class="slide">
    74. 

  74. 						<h1>Seventh Slide</h1>
    75. 

  75. 						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
    76. 

  76. 						<p><a href="#3" class="link">Check out the third slide &rsaquo;</a></p>
    77. 

  77. 					</div>
    78. 

  78. 				</div>
    79. 

  79. 				<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
    80. 

  80. 				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
    81. 

  81. 			</div>
    82. 

  82. 			<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
    83. 

  83. 		</div>
    84. 

  84. 		<div id="footer">
    85. 

  85. 			<p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
    86. 

  86. 			<p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
    87. 

  87. 			<p>&copy; 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
    88. 

  88. 		</div>
    89. 

  89. 	</div>
    90. 

  90. </body>
    91. 

  91. </html>
    92. 

  92.