1 | <!DOCTYPE html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <meta charset="utf-8"> |
---|
5 | <title>Galleria History Plugin</title> |
---|
6 | <style> |
---|
7 | |
---|
8 | /* Demo styles */ |
---|
9 | html,body{background:#222;margin:0;} |
---|
10 | body{border-top:4px solid #000;} |
---|
11 | .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;} |
---|
12 | h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;} |
---|
13 | p{margin:0 0 20px} |
---|
14 | a {color:#22BCB9;text-decoration:none;} |
---|
15 | .cred{margin-top:20px;font-size:11px;} |
---|
16 | |
---|
17 | /* This rule is read by Galleria to define the gallery height: */ |
---|
18 | #galleria{height:320px} |
---|
19 | |
---|
20 | </style> |
---|
21 | |
---|
22 | <!-- load jQuery --> |
---|
23 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
---|
24 | |
---|
25 | <!-- load Galleria --> |
---|
26 | <script src="../../galleria-1.2.6.min.js"></script> |
---|
27 | |
---|
28 | <!-- load the History plugin, no need for further scripting --> |
---|
29 | <script src="galleria.history.min.js"></script> |
---|
30 | |
---|
31 | </head> |
---|
32 | <body> |
---|
33 | <div class="content"> |
---|
34 | <h1>Galleria History Plugin</h1> |
---|
35 | <p>Demonstrating a basic history example. Supports most browsers, including FF 3.0+ and IE 7+</p> |
---|
36 | |
---|
37 | <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary --> |
---|
38 | |
---|
39 | <div id="galleria"> |
---|
40 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/800px-Locomotives-Roundhouse2.jpg"> |
---|
41 | <img title="Locomotives Roundhouse" |
---|
42 | alt="Steam locomotives of the Chicago & North Western Railway." |
---|
43 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg"> |
---|
44 | </a> |
---|
45 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg"> |
---|
46 | <img title="Icebergs in the High Arctic" |
---|
47 | alt="”The debris loading isn't particularly extensive, but the color is usual.”" |
---|
48 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/100px-Icebergs_in_the_High_Arctic_-_20050907.jpg"> |
---|
49 | </a> |
---|
50 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/1000px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg"> |
---|
51 | <img title="Araña" |
---|
52 | alt="Xysticus cristatus, A Estrada, Galicia, Spain" |
---|
53 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/100px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg"> |
---|
54 | </a> |
---|
55 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/1000px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg"> |
---|
56 | <img title="Museo storia naturale" |
---|
57 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/100px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg"> |
---|
58 | </a> |
---|
59 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg/1000px-Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg"> |
---|
60 | <img title="Grjótagjá caves in summer 2009" |
---|
61 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg/100px-Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.jpg"> |
---|
62 | </a> |
---|
63 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg/1000px-20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg"> |
---|
64 | <img title="Thermes" |
---|
65 | alt="Xanthi hot-spa springs, Xanthi Prefecture, Greece" |
---|
66 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg/100px-20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg"> |
---|
67 | </a> |
---|
68 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Polish_Army_Ko%C5%82obrzeg_077.JPG/1024px-Polish_Army_Ko%C5%82obrzeg_077.JPG"> |
---|
69 | <img title="Polish Army Kołobrzeg" |
---|
70 | alt="A display of the Polish Army. Both the soldier, and the vehicle belong to the 7th Pomeranian Coastal Defence Brigade, a part of the Szczecin-based 12th Mechanized Division ”Bolesław Krzywousty”" |
---|
71 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Polish_Army_Ko%C5%82obrzeg_077.JPG/100px-Polish_Army_Ko%C5%82obrzeg_077.JPG"> |
---|
72 | </a> |
---|
73 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/20100213_Zlatograd_Bulgaria_3.jpg/1024px-20100213_Zlatograd_Bulgaria_3.jpg"> |
---|
74 | <img title="Zlatograd Bulgaria" |
---|
75 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/20100213_Zlatograd_Bulgaria_3.jpg/100px-20100213_Zlatograd_Bulgaria_3.jpg"> |
---|
76 | </a> |
---|
77 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg/1024px-FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg"> |
---|
78 | <img title="09-28-2001 in New York City" |
---|
79 | alt="New York, NY, September 28, 2001 -- Debris on surrounding roofs at the site of the World Trade Center. Photo by Andrea Booher/ FEMA News Photo" |
---|
80 | src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg/100px-FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg"> |
---|
81 | </a> |
---|
82 | <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Antennae%2C_Hubble_images.jpg/1024px-Antennae%2C_Hubble_images.jpg"> |
---|
83 | <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Antennae%2C_Hubble_images.jpg/100px-Antennae%2C_Hubble_images.jpg"> |
---|
84 | </a> |
---|
85 | </div> |
---|
86 | |
---|
87 | <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p> |
---|
88 | </div> |
---|
89 | |
---|
90 | <script> |
---|
91 | |
---|
92 | // Load the classic theme |
---|
93 | Galleria.loadTheme('../../themes/classic/galleria.classic.min.js'); |
---|
94 | |
---|
95 | // Initialize Galleria |
---|
96 | $('#galleria').galleria(); |
---|
97 | |
---|
98 | </script> |
---|
99 | </body> |
---|
100 | </html> |
---|