Current File : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/jquery-lightbox/index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox</title>
<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."/>
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/demopage/favicon.png">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Lightbox</h1>
<p class="lead">
The original lightbox script.<br/>Eight years later — still going strong!
</p>
<a href="releases/lightbox-2.7.1.zip" class="button">
Download
</a>
<a href="https://github.com/lokesh/lightbox2/" class="button">
View on Github
</a>
</div>
</header>
<section id="examples" class="examples-section">
<div class="container">
<h2>Examples</h2>
<h3>Two individual images</h3>
<div class="image-row">
<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>
<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>
</div>
<hr/>
<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</section>
<section id="how-to-use" class="how-to-use-section">
<div class="container">
<h2>How to use</h2>
<h3>Step 1 - Load the Javascript and CSS</h3>
<ol>
<li>Download and unzip the latest version of Lightbox.</li>
<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.
<pre><code><script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script></code></pre>
</li>
<li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
<pre><code><link href="css/lightbox.css" rel="stylesheet" /></code></pre>
</li>
<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>
</ol>
<h3>Step 2 - Turn it on</h3>
<ul>
<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:
<pre><code><a href="img/image-1.jpg" data-lightbox="image-1" data-title="My
caption">Image #1</a></code></pre>
<em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
</li>
<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:
<pre><code><a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a></code></pre>
</li>
</ul>
</div>
</section>
<section id="help" class="questions-section">
<div class="container">
<h2>Help</h2>
<h3>Have a feature request?</h3>
<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>
<h3>Found a bug?</h3>
<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>
<h3>Can't get Lightbox working?</h3>
<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>
<h3>Looking for older versions?</h3>
<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>
</div>
</section>
<section id="donate" class="donate-section">
<div class="container">
<h2>Donate</h2>
<p>
Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous,
consider a donation. Thanks!
</p>
<form class="donate-button-form" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
<input type="hidden" name="item_name" value="Donation for Lightbox">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="submit" name="submit" class="button donate-button" value="Donate using Paypal"
alt="Make payments with PayPal - it's fast, free and secure!">
</fieldset>
</form>
</div>
</section>
<footer>
<div class="container">
<p>
Lightbox is created by Lokesh Dhakar<br/>
<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
</p>
</div>
</footer>
<div id="sharing" class="sharing-section">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
<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>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Mini Shell