Skip to content

Instantly share code, notes, and snippets.

@paxperscientiam

paxperscientiam/index.html

Created November 20, 2016 18:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save paxperscientiam/dbe707b65a9a4bcdb14d82c06bfe5a70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save paxperscientiam/dbe707b65a9a4bcdb14d82c06bfe5a70 to your computer and use it in GitHub Desktop.
Download ZIP
beta test of rejas/imagelightbox
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link rel="stylesheet" href="/src/imagelightbox.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left reveal-for-large" id="my-info" data-off-canvas data-position="left">
<div class="row column">
<br>
<img class="thumbnail" src="http://placehold.it/550x350">
<h5>Mike Mikerson</h5>
<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo.</p>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar hide-for-large">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="my-info"></button>
<span class="title-bar-title">Mike Mikerson</span>
</div>
</div>
<div class="callout primary">
<div class="row column">
<h1>Hello! This is the portfolio of a very witty person.</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla.</p>
</div>
</div>
<div class="row small-up-3">
<h3>Set A:</h3>
<div class="column">
<a data-imagelightbox="a" data-ilb2-caption="caption text" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550" alt="x">
</a>
</div>
<div class="column">
<a data-imagelightbox="a" data-ilb2-caption="captionx text" href="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg">
<img class="thumbnail" src="http://placehold.it/550x550" alt="asfd">
</a>
</div>
<div class="column">
<a data-imagelightbox="a" data-ilb2-caption="captiozn text" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550" alt="sgdf">
</a>
</div>
</div>
<div class="row small-up-2">
<h3>Set B:</h3>
<div class="column">
<a data-imagelightbox="b" data-ilb2-caption="b1" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550">
</a>
</div>
<div class="column">
<a data-imagelightbox="b" data-ilb2-caption="b2" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550">
</a>
</div>
</div>
<div class="row small-up-3">
<h3>Set C:</h3>
<div class="column">
<a data-imagelightbox="c" data-ilb2-caption="c1" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550">
</a>
</div>
<div class="column">
<a data-imagelightbox="c" data-ilb2-caption="c2" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550">
</a>
</div>
<div class="column">
<a data-imagelightbox="c" data-ilb2-caption="c3" href="http://placehold.it/550x550">
<img class="thumbnail" src="http://placehold.it/550x550">
</a>
</div>
</div>
<hr>
<div class="row">
<div class="medium-6 columns">
<h3>Contact Me</h3>
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor.</p>
<ul class="menu">
<li><a href="#">Dribbble</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Yo</a></li>
</ul>
</div>
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Name">
</label>
<label>Email
<input type="text" placeholder="Email">
</label>
<label>
Message
<textarea placeholder="holla at a designerd"></textarea>
</label>
<input type="submit" class="button expanded" value="Submit">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
<script src="/src/imagelightbox.js"></script>
<script>
$(document).foundation();
$( function()
{
var gallery_1 = $( "a[data-imagelightbox='a']" ).imageLightbox(
{
selector: 'a[data-imagelightbox]', // string;
id: 'imagelightbox', // string;
// allowedTypes: 'png|jpg|jpeg||gif', // string; * NOT WORKING ATM *
animationSpeed: 50, // integer;
activity: true, // bool; show activity indicator
arrows: true, // bool; show left/right arrows
button: true, // bool; show close button
caption: true, // bool; show captions
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
lockBody: true, // bool; disables body scrolling when lightbox is open
navigation: true, // bool; show navigation
overlay: true, // bool; display the lightbox as an overlay
quitOnEnd: false
}
);
//
//
//
var gallery_2 = $( "a[data-imagelightbox='b']" ).imageLightbox(
{
selector: 'a[data-imagelightbox]', // string;
id: 'imagelightbox', // string;
// allowedTypes: 'png|jpg|jpeg||gif', // string; * NOT WORKING ATM *
animationSpeed: 200, // integer;
activity: false, // bool; show activity indicator
arrows: false, // bool; show left/right arrows
button: false, // bool; show close button
caption: false, // bool; show captions
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
lockBody: true, // bool; disables body scrolling when lightbox is open
navigation: true, // bool; show navigation
overlay: true, // bool; display the lightbox as an overlay
quitOnEnd: false
}
);
//
//
//
var gallery_3 = $( "a[data-imagelightbox='c']" ).imageLightbox(
{
selector: 'a[data-imagelightbox]', // string;
id: 'imagelightbox', // string;
// allowedTypes: 'png|jpg|jpeg||gif', // string; * NOT WORKING ATM *
animationSpeed: 200, // integer;
activity: true, // bool; show activity indicator
arrows: true, // bool; show left/right arrows
button: true, // bool; show close button
caption: true, // bool; show captions
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
lockBody: false, // bool; disables body scrolling when lightbox is open
navigation: false, // bool; show navigation
overlay: false, // bool; display the lightbox as an overlay
quitOnEnd: false
}
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment