| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/11585/cwd/html/old/plugins/content/jw_sigpro/jw_sigpro/includes/js/jquery_swipebox/ |
Upload File : |
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<meta name="description" content="A touchable jQuery lightbox plugin for desktop, mobile and tablet" />
<link rel="stylesheet" href="http://swipebox.brutaldesign.com/css/style.css">
<link rel="stylesheet" href="source/swipebox.css">
<title>Swipebox | A touchable jQuery lightbox</title>
</head>
<body>
<a href="https://github.com/brutaldesign/swipebox" id="fork-this"></a>
<div id="main">
<div class="wrap">
<header>
<h1>Swipebox.</h1>
<p class="tagline">A touchable jQuery lightbox</p>
</header>
<hr>
<section id="presentation">
<h2>What is Swipebox ?</h2>
<p>Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.</p>
<h3>Features</h3>
<ol>
<li>Swipe gestures for mobile</li>
<li>Keyboard Navigation for desktop</li>
<li>CSS transitions with jQuery fallback</li>
<li>Retina support for UI icons</li>
<li>Easy CSS customization</li>
</ol>
<h3>Compatibility</h3>
<p>Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone.</p>
</section>
<hr>
<section id="exemple">
<h2>Try it</h2>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/nuke.jpg" class="swipebox" title="Nuke">
<img src="http://swipebox.brutaldesign.com/assets/nuke_thumb.jpg" alt="nuke">
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="http://swipebox.brutaldesign.com/assets/leap_thumb.jpg" alt="leap">
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/reine.jpg" class="swipebox" title="Reine">
<img src="http://swipebox.brutaldesign.com/assets/reine_thumb.jpg" alt="reine">
</a>
</div>
<div class="box">
<a href="http://swipebox.brutaldesign.com/assets/full/neptune.jpg" class="swipebox" title="Neptune">
<img src="http://swipebox.brutaldesign.com/assets/neptune_thumb.jpg" alt="neptune">
</a>
</div>
<div class="clear"></div>
</section>
<hr>
<section id="usage">
<h2>Usage</h2>
<h3>Javascript</h3>
<p>Include jquery and the swipebox script in your <code>head</code> tags or right before your <code>body</code> closing tag.</p>
<pre><script src="lib/jquery-1.9.0.min.js"></script>
<script src="source/jquery.swipebox.min.js"></script></pre>
<h3>CSS</h3>
<p>Include the swipebox CSS style in your <code>head</code> tags.</p>
<pre><link rel="stylesheet" href="source/swipebox.css"></pre>
<h3>HTML</h3>
<p>Use a specific class for your links and use the title attribute as caption.</p>
<pre><a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a></pre>
<h3>Fire the plugin</h3>
<p>Bind the swipebox behaviour on every link with the "swipebox" class.</p>
<pre><script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
</pre>
<h4>Need a couple of options?</h4>
<pre><script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox({
useCSS : true, <span>// false will force the use of jQuery for animations</span>
hideBarsDelay : 3000 <span>// 0 to always show caption and action bar</span>
});
});
</script>
</pre>
</section>
<section id="action">
<p><a class="button" href="https://github.com/brutaldesign/swipebox/archive/master.zip">Download</a> <a class="button" href="https://github.com/brutaldesign/swipebox">View Source</a></p>
</section>
<hr>
<section id="credits">
<p><strong>Credits</strong></p>
<p>Photos by <a href="http://www.flickr.com/photos/astragony/" target="_blank">Daniele Zedda</a></p>
</section>
</div>
<footer>
<div class="wrap">
<a href="http://brutaldesign.com" target="_blank">Constantin Saguin</a> | <a href="http://twitter.com/brutaldesign" target="_blank">@brutaldesign</a>
</div>
</footer>
</div>
<script src="lib/jquery-1.9.0.min.js"></script>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="source/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
</body>
</html>