Created
April 22, 2013 19:51
-
-
Save Mbaimbai/221bbccb66e42eccaf9f to your computer and use it in GitHub Desktop.
How to show pictures in a slide show
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>How to show pictures in a slide show</title> | |
| <style> | |
| /* Demo styles */ | |
| .content html, body { | |
| background: #222; | |
| margin: 0; | |
| } | |
| .content body { | |
| border-top: 4px solid #000; | |
| } | |
| .content { | |
| color: #777; | |
| font: 12px/1.4 "helvetica neue",arial,sans-serif; | |
| width: 620px; | |
| margin: 20px auto; | |
| } | |
| .content h1 { | |
| font-size: 12px; | |
| font-weight: normal; | |
| color: #ddd; | |
| margin: 0; | |
| } | |
| .content p { | |
| margin: 0 0 20px; | |
| } | |
| .content a { | |
| color: #22BCB9; | |
| text-decoration: none; | |
| } | |
| .cred { | |
| margin-top: 20px; | |
| font-size: 11px; | |
| } | |
| /* This rule is read by Galleria to define the gallery height: */ | |
| #galleria { | |
| height: 320px; | |
| } | |
| .content .auto-style1 { | |
| text-align: center; | |
| } | |
| </style> | |
| <!-- load jQuery --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> | |
| <!-- load Galleria --> | |
| <script src="galleria-1.2.9.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="content"> | |
| <h1>Photograph portfolio</h1> | |
| <p>Demonstrating a basic gallery example.</p> | |
| <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary --> | |
| <div id="galleria" class="auto-style1"><img alt="number1"src="images/1.jpg",data-description="black face."> | |
| <img src="images/2.jpg"data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/1280px-Athabasca_Rail_at_Brule_Lake.jpg"data-title="Athabasca Rail" | |
| data-description="The Athabasca River railroad track at the mouth of Brulé Lake in Alberta, Canada."> | |
| <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1280px-Back-scattering_crepuscular_rays_panorama_1.jpg"> | |
| <img | |
| src="images/3.jpg" data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1400px-Back-scattering_crepuscular_rays_panorama_1.jpg" | |
| data-title="Back-scattering crepuscular rays" | |
| data-description="Picture of the day on Wikimedia Commons 26 September 2010." | |
| > | |
| </a> | |
| <img | |
| src="images/4.jpg" data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/1400px-Interior_convento_3.jpg" | |
| data-title="Interior convento" | |
| data-description="Interior view of Yuriria Convent, founded in 1550." | |
| > | |
| <img | |
| src="images/5.jpg" data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/1280px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg" | |
| data-title="Oxbow Bend outlook" | |
| data-description="View over the Snake River to the Mount Moran with the Skillet Glacier." | |
| > | |
| <img | |
| src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/100px-Hazy_blue_hour_in_Grand_Canyon.JPG", | |
| data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/1280px-Hazy_blue_hour_in_Grand_Canyon.JPG" | |
| data-title="Hazy blue hour" | |
| data-description="Hazy blue hour in Grand Canyon. View from the South Rim." | |
| > | |
| <img | |
| src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/100px-2909_vallon_moy_res.jpg", | |
| data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/1280px-2909_vallon_moy_res.jpg" | |
| data-title="Haute Severaisse valley" | |
| data-description="View of Haute Severaisse valley and surrounding summits from the slopes of Les Vernets." | |
| > | |
| <img | |
| src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/100px-Bohinjsko_jezero_2.jpg", | |
| data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/1280px-Bohinjsko_jezero_2.jpg" | |
| data-title="Bohinj lake" | |
| data-description="Bohinj lake (Triglav National Park, Slovenia) in the morning." | |
| > | |
| <img | |
| src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/100px-Bowling_Balls_Beach_2_edit.jpg", | |
| data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/1280px-Bowling_Balls_Beach_2_edit.jpg" | |
| data-title="Bowling Balls" | |
| data-description="Mendocino county, California, USA." | |
| > | |
| </div> | |
| </div> | |
| <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p> | |
| <script> | |
| // Load the classic theme | |
| Galleria.loadTheme('galleria.classic.min.js'); | |
| // Initialize Galleria | |
| Galleria.run('#galleria'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment