1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <title>Yet another simplelightbox test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- <style type="text/css">
- body {
- width: 900px;
- margin: 0 auto;
- font-family: Verdana, Helvetica, Arial, sans-serif;
- background: #DEDEDE;
- color: #555;
- font-size: 14pt;
- }
- h1, h2, h3 {
- font-weight: normal;
- }
- h1 {
- font-size: 2.5em;
- }
- p {
- line-height: 1.5em;
- }
- img {
- display: block;
- margin: 5px;
- float: left;
- }
- </style>
- </head>
- <body>
- <h1>Simplelightbox in action</h1>
- <p>
- This page demonstrates the usage of simplelightbox in a webpage. To activate it, just
- click on any image in this page. Simplelightbox will fade the background and create a
- nice highlighting presentation for it. To go back to the page, click the button on the
- top right corner of the image. If you click a highlighted image, the next one in the
- sequence will be shown, looping around if it's the last one in line.
- </p>
- <img src="http://wallpaperdj.us/wallpapers/abducted_by_dubstep_music-1920x1080.jpg" height="80" />
- <img src="http://funnypicturesplus.com/wp-content/uploads/2013/05/funny-programmers-meme.jpg" height="80" />
- <img src="http://www.kashflow.com/bb/img/write_all_the_code_in_javascript1.jpg" height="80" />
- <img src="http://www.neobytesolutions.com/wp-content/uploads/2013/07/old-programmers-never-die-meme.jpg" height="80" />
- <p style="clear: both">
- Credit goes to whoever created these images. You guys rock.
- </p>
- <p>Click <a href="http://simplelightbox.googlecode.com/">here</a> to go back to the project's page.</p>
- <script src="simplelightbox.js"></script>
- </body>
- </html>
|