workshop form
[prawokultury.git] / prawokultury / static / contrib / lightbox / index.html
1 <!DOCTYPE html>
2 <html lang="en-us">
3 <head>
4         <meta charset="utf-8">
5
6         <title>Lightbox</title>
7
8         <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
9         <meta name="author" content="Lokesh Dhakar">
10         <meta name="viewport" content="width=device-width, initial-scale=1">
11
12         <link rel="shortcut icon" href="img/demopage/favicon.png">
13         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
14         <link rel="stylesheet" href="css/screen.css">
15         <link rel="stylesheet" href="css/lightbox.css">
16 </head>
17 <body>
18
19         <header>
20                 <div class="container">
21                         <h1 class="logo">Lightbox</h1>
22                         <p class="lead">
23                                 The original lightbox script.<br />Eight years later &mdash; still going strong!
24                         </p>
25
26                         <a href="releases/lightbox-2.7.1.zip" class="button">
27                                 Download
28                         </a>
29
30                         <a href="https://github.com/lokesh/lightbox2/" class="button">
31                                 View on Github
32                         </a>
33
34                 </div>
35         </header>
36
37         <section id="examples" class="examples-section">
38                 <div class="container">
39                         <h2>Examples</h2>
40                         <h3>Two individual images</h3>
41                         <div class="image-row">
42                                 <a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
43                                 <a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a>
44                         </div>
45
46                         <hr />
47
48                         <h3 style="clear: both;">Four image set</h3>
49
50                         <div class="image-row">
51                                 <div class="image-set">
52                                         <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
53                                         <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
54                                         <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
55                                         <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
56                                 </div>
57                         </div>
58                 </div>
59         </section>
60
61         <section id="how-to-use" class="how-to-use-section">
62                 <div class="container">
63                         <h2>How to use</h2>
64                         <h3>Step 1 - Load the Javascript and CSS</h3>
65                         <ol>
66                                 <li>Download and unzip the latest version of Lightbox.</li>
67                                 <li>Look inside the <code>js</code> folder to find <code>jquery-1.11.0.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
68 <pre><code>&lt;script src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
69 &lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;</code></pre>
70                                 </li>
71                                 <li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
72         <pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
73                                 </li>
74                                 <li>Look inside the <code>img</code> folder to find <code>close.png</code>, <code>loading.gif</code>, <code>prev.png</code>, and <code>next.png</code>. These files are used in <code>lightbox.css</code>. By default, <code>lightbox.css</code> will look for these images in a folder called <code>img</code>.</li>
75                         </ol>
76                         <h3>Step 2 - Turn it on</h3>
77                 <ul>
78                                 <li>Add a <code>data-lightbox</code> attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
79         <pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; data-title=&quot;My caption&quot;&gt;Image #1&lt;/a&gt;</code></pre>
80                                  <em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
81                                 </li>
82                                 <li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
83         <pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #2&lt;/a&gt;
84 &lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #3&lt;/a&gt;
85 &lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #4&lt;/a&gt;</code></pre>
86                                 </li>
87                         </ul>
88                 </div>
89         </section>
90
91
92         <section id="help" class="questions-section">
93                 <div class="container">
94                         <h2>Help</h2>
95
96                         <h3>Have a feature request?</h3>
97                         <p>If you want a feature added, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>
98
99                         <h3>Found a bug?</h3>
100                         <p>If you find a bug, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Include your operating system and browser version along with detailed steps on how to reproduce the bug.</p>
101
102                         <h3>Can't get Lightbox working?</h3>
103                         <p>If you followed the instructions, but still can't get Lightbox working, <a href="http://stackoverflow.com/">search Stackoverflow</a> to see if other people have run into the same issue as you. If not, post a new question.</p>
104
105                         <h3>Looking for older versions?</h3>
106                         <p>You can access older versions and see a changelog on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>
107                 </div>
108         </section>
109
110         <section id="donate" class="donate-section">
111                 <div class="container">
112                         <h2>Donate</h2>
113                         <p>
114                                 Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks!
115                         </p>
116                         <form class="donate-button-form" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
117                                 <fieldset>
118                                         <input type="hidden" name="cmd" value="_xclick">
119                                         <input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
120                                         <input type="hidden" name="item_name" value="Donation for Lightbox">
121                                         <input type="hidden" name="no_note" value="1">
122                                         <input type="hidden" name="currency_code" value="USD">
123                                         <input type="hidden" name="tax" value="0">
124                                         <input type="hidden" name="bn" value="PP-DonationsBF">
125                                         <input type="submit" name="submit" class="button donate-button" value="Donate using Paypal" alt="Make payments with PayPal - it's fast, free and secure!">
126                                 </fieldset>
127                         </form>
128                 </div>
129         </section>
130
131         <footer>
132                 <div class="container">
133                         <p>
134                                 Lightbox is created by Lokesh Dhakar<br />
135                                 <a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
136                         </p>
137                 </div>
138         </footer>
139
140         <div id="sharing" class="sharing-section">
141                 <a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
142                 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
143         </div>
144
145         <script src="js/jquery-1.11.0.min.js"></script>
146         <script src="js/lightbox.js"></script>
147
148         <script>
149         var _gaq = _gaq || [];
150         _gaq.push(['_setAccount', 'UA-2196019-1']);
151         _gaq.push(['_trackPageview']);
152
153         (function() {
154                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
155                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
156                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
157         })();
158         </script>
159
160 </body>
161 </html>