-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
67 lines (59 loc) · 5.02 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html lang="de">
<title>sG - free, smart and fast standalone Javascript Lightbox</title>
<meta charset="utf-8">
<style>
html,body{height:100%}
body{font:.9em 'OpenSans','Open Sans',Helvetica,Arial,sans-serif;background:#f2f2f2}
code{background:#f4f4f4;padding:6px 12px 6px 12px;font:.85em/1.8em Inconsolata,'Droid Sans Mono','Liberation Mono','Source Code Pro',Consolas,sans-serif;border:1px dashed #dfdfdf}
.clear{clear:both}
p code{display:block;margin:12px}
p { line-height:1.5em }
.wrapper{display:block;width:75%;background:#fff;padding:6px 12px 24px 24px;margin:120px auto;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
.example li{float:left;list-style:none}
.example img{display:block;border:2px solid #000;margin:6px;max-width:128px;max-height:128px;width:auto;height:auto}
.example img:hover{border-color:#f4f4f4}
div.dl{width:300px;float:right;margin:24px}
a.download-button{display:block;padding:15px 20px 10px 20px;color:#fff;text-decoration:none;font-size:18px;font-weight:bold;background:#33a700 url('//i.imgur.com/wt7UJ.png') no-repeat 92% 50%;border:2px solid #339410;-webkit-box-shadow:3px 3px 5px #000;-moz-box-shadow:3px 3px 5px #000;box-shadow:3px 3px 5px #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-transition:350ms;-moz-transition:350ms;-o-transition:350ms;transition:350ms}
a.download-button:hover{background-color:#267c00;background-position:90% 50%}
a.download-button span{font-size:12px;display:block;margin-top:2px}
</style>
<link rel="stylesheet" href="sg.min.css" type="text/css" media="screen">
</head>
<body>
<div class="wrapper">
<div class="dl"><a href='//github.com/basteyy/sg/archive/master.zip' class='download-button'>Download<span>Latest version from GitHub</span></a></div>
<h1>sG: free, smart and fast standalone JS-Lightbox</h1>
<p>
Dies ist die Beispielseite, die dir zeigt, was sg eigentlich ist und kann. Eine ausführliche README und Informationen zur Installation findest du auf <a href="//github.com/basteyy/sg/#readme" title="Sourcecode und Anleitungen auf Github">Github</a>.
</p>
<h2>Beispiel</h2>
<h3>Example 2 ( <code>data-sg="group1"</code>)</h3>
<ul class="example">
<li><a data-sg="group00" href="//cdn.34n.de/sg/images/cat-22322__340.jpg"><img src="//cdn.34n.de/sg/images/cat-22322__340.jpg"></a></li>
<li><a data-sg="group1" href="//cdn.34n.de/sg/images/girl-358768_640.jpg"><img src="//cdn.34n.de/sg/images/girl-358768_640.jpg"></a></li>
<li><a data-sg="group1" href="//cdn.34n.de/sg/images/girl-91692_640.jpg"><img src="//cdn.34n.de/sg/images/girl-91692_640.jpg"></a></li>
<li><a data-sg="group1" href="//cdn.34n.de/sg/images/horse-204328_640.jpg"><img src="//cdn.34n.de/sg/images/horse-204328_640.jpg"></a></li>
<li><a data-sg="group1" href="//cdn.34n.de/sg/images/kids-56951_640.jpg"><img src="//cdn.34n.de/sg/images/kids-56951_640.jpg"></a></li>
</ul>
<br class="clear">
<h3>Example 2 ( <code>data-sg="gruppe_2"</code>)</h3>
<ul class="example">
<li><a data-sg="gruppe_2" href="//cdn.34n.de/sg/images/storm-troopers-112224_640.jpg"><img src="//cdn.34n.de/sg/images/storm-troopers-112224_640.jpg"></a></li>
<li><a data-sg="gruppe_2" href="//cdn.34n.de/sg/images/woman-358765_640.jpg"><img src="//cdn.34n.de/sg/images/woman-358765_640.jpg"></a></li>
<li><a data-sg="gruppe_2" href="//cdn.34n.de/sg/images/person-11982_640.jpg"><img src="//cdn.34n.de/sg/images/person-11982_640.jpg"></a></li>
</ul>
<h3>Example 3 ( <code>data-sg="gruppe3"</code> und <code>data-sg="gruppe4"</code>)</h3>
<ul class="example">
<li><a data-sg="gruppe_3" href="//farm5.staticflickr.com/4150/5067353466_6eeb170197_q.jpg"><img src="//farm5.staticflickr.com/4150/5067353466_6eeb170197_q.jpg"></a></li>
<li><a data-sg="gruppe_4" href="//cdn.34n.de/sg/images/log-cabin-411766__340.jpg"><img src="//cdn.34n.de/sg/images/log-cabin-411766__340.jpg"></a></li>
</ul>
<br class="clear">
<p>
<strong>Bilder</strong> © Alle Rechte vorbehalten von <a href="//pixabay.com/de/users/Greyerbaby/">Lisa Runnels</a>
</p>
<h4>© PUBLIC DOMAIN - Do what ever you want ;) — 2013 <a href="//github.com/basteyy">basteyy</a> from <a href="//xzit.online">xzit</a></h4>
</div>
<div id="sgBg"></div><div id="sgLayer"><div id="sgNav"><a href="#" onclick="sg.go(-1); return false;" title="Zum vorherigen Bild" class="prev"></a><a href="#" onclick="sg.go(1); return false;" title="Zum nächsten Bild" class="next"></a></div><div id="sgImg"><div id="sgAct"><a href="#" onclick="sg.close(); return false;" title="Bild schließen" class="close"></a><a href="#" title="Bild öffnen" target="_blank" class="zoom"></a></div></div></div><script src="sg.min.js" charset="utf-8"></script>
</body>
</html>