example.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  3. <head>
  4. <title>Yet another simplelightbox test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  7. <style type="text/css">
  8. body {
  9. width: 900px;
  10. margin: 0 auto;
  11. font-family: Verdana, Helvetica, Arial, sans-serif;
  12. background: #DEDEDE;
  13. color: #555;
  14. font-size: 14pt;
  15. }
  16. h1, h2, h3 {
  17. font-weight: normal;
  18. }
  19. h1 {
  20. font-size: 2.5em;
  21. }
  22. p {
  23. line-height: 1.5em;
  24. }
  25. img {
  26. display: block;
  27. margin: 5px;
  28. float: left;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <h1>Simplelightbox in action</h1>
  34. <p>
  35. This page demonstrates the usage of simplelightbox in a webpage. To activate it, just
  36. click on any image in this page. Simplelightbox will fade the background and create a
  37. nice highlighting presentation for it. To go back to the page, click the button on the
  38. top right corner of the image. If you click a highlighted image, the next one in the
  39. sequence will be shown, looping around if it's the last one in line.
  40. </p>
  41. <img src="http://wallpaperdj.us/wallpapers/abducted_by_dubstep_music-1920x1080.jpg" height="80" />
  42. <img src="http://funnypicturesplus.com/wp-content/uploads/2013/05/funny-programmers-meme.jpg" height="80" />
  43. <img src="http://www.kashflow.com/bb/img/write_all_the_code_in_javascript1.jpg" height="80" />
  44. <img src="http://www.neobytesolutions.com/wp-content/uploads/2013/07/old-programmers-never-die-meme.jpg" height="80" />
  45. <p style="clear: both">
  46. Credit goes to whoever created these images. You guys rock.
  47. </p>
  48. <p>Click <a href="http://simplelightbox.googlecode.com/">here</a> to go back to the project's page.</p>
  49. <script src="simplelightbox.js"></script>
  50. </body>
  51. </html>