Permalink
Browse files

first commit

  • Loading branch information...
adamhenson committed Aug 31, 2014
1 parent ecde2fb commit b6ae775c806283e83d8c73af09520da5877dcde1
View
@@ -2,6 +2,9 @@
> A lighterweight lightbox gallery module. A simple plugin supporting modern browsers only to minimize configuration and hacky code. Customizable.
## Example
[Click me](http://www.hensonism.com/static/plugins/jquery/lighterbox/)
## Installation
Download **lighterbox** and reference it after jQuery.
@@ -14,12 +17,14 @@ Or load via synchronous or asynchronous module definition.
## Usage
All basic styling is set in the JS, however it would be easy to override using the class selectors.
### HTML
```html
<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin3.jpg" class="lighterbox">
<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin3.jpg" />
<h2 class="lighterbox-title">Painting by Paul Gaugin</h2>
<p class="lighterbox-desc">Oil on Canvas</div>
<p class="lighterbox-desc">Oil on Canvas</p>
</a>
```
### JavaScript
@@ -28,6 +33,6 @@ $(".lighterbox").lighterbox({ overlayColor : "white" });
```
## Options
- overlayColor : {string} Any valid css value.
- overlayColor : {string} "white" or "black" options sets the theme. Default is white.
- overlayOpacity : {string or integer} Any valid css value.
- animateSpeed : {string or integer} Any valid css value.
View
@@ -80,10 +80,11 @@
};
// Re-position the image
Plugin.prototype.reposition = function( $el ) {
Plugin.prototype.reposition = function( $el, $caption ) {
var init = function(){
var marginTop = -(Math.floor(parseInt($el.height()) / 2));
var captionHeight = ($caption.height() > 0) ? $caption.height() : 0;
var marginTop = -((Math.floor(parseInt($el.height()) / 2)) + (captionHeight / 2));
var marginRight = -(Math.floor(parseInt($el.width()) / 2));
$el.css({
"margin-top" : marginTop + "px",
@@ -184,7 +185,7 @@
// Re-position image
$img.load(function(){
repositioner = new that.reposition($(this));
repositioner = new that.reposition($(this), $caption);
repositioner.init();
$(window).resize(repositioner.init);
that.destroy([$loader]);
View
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<title>lighterbox</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.lighterbox.0.0.1.min.js"></script>
<script>
$(function(){ // document ready
$(".lighterbox").lighterbox({ overlayColor : "white" });
});
</script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/**
*
* This styling is mostly to display the gallery.
* The plugin handles most styling. The CSS below is mostly for the gallery layout.
*
*/
body, h1, h2{
font-family: 'Roboto', Arial, sans-serif;
font-weight: 300;
}
article {
max-width:610px;
margin: 0.5em auto;
}
h1 {
font-size: 2.7em;
text-align: center;
}
section {
max-width: 49%;
float: left;
margin-right: 0.5%;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
a {
color: black;
text-decoration: none;
}
a h2, a p {
/* hide the title and caption until lighterbox shows it */
display: none;
}
@media (max-width: 400px) {
h1 {
font-size: 1.5em;
}
section {
max-width: 100%;
float: none;
}
}
</style>
</head>
<body>
<h1><strong>lighterbox</strong> Example</h1>
<article>
<section>
<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin1.jpg" class="lighterbox">
<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin1.jpg" />
<h2 class="lighterbox-title">Painting #1 by Paul Gaugin</h2>
<p class="lighterbox-desc">Oil on Canvas</p>
</a>
</section>
<section>
<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin2.jpg" class="lighterbox">
<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin2.jpg" />
<h2 class="lighterbox-title">Painting #2 by Paul Gaugin</h2>
<p class="lighterbox-desc">Oil on Canvas</p>
</a>
</section>
<section>
<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin3.jpg" class="lighterbox">
<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin3.jpg" />
<h2 class="lighterbox-title">Painting #3 by Paul Gaugin</h2>
<p class="lighterbox-desc">Oil on Canvas</p>
</a>
</section>
<section>
<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin4.jpg" class="lighterbox">
<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin4.jpg" />
<h2 class="lighterbox-title">Painting #4 by Paul Gaugin</h2>
<p class="lighterbox-desc">Oil on Canvas</p>
</a>
</section>
</article>
</body>
</html>

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -25,7 +25,7 @@ gulp.task('minify', function() {
path.basename += '.' + package.version;
}
}))
.pipe(gulp.dest('./'));
.pipe(gulp.dest('./versions'));
gulp.src('./dev/jquery.lighterbox.js')
.pipe(uglify())
@@ -34,7 +34,7 @@ gulp.task('minify', function() {
path.basename += '.' + package.version + '.min';
}
}))
.pipe(gulp.dest('./'));
.pipe(gulp.dest('./versions'));
});
@@ -80,10 +80,11 @@
};
// Re-position the image
Plugin.prototype.reposition = function( $el ) {
Plugin.prototype.reposition = function( $el, $caption ) {
var init = function(){
var marginTop = -(Math.floor(parseInt($el.height()) / 2));
var captionHeight = ($caption.height() > 0) ? $caption.height() : 0;
var marginTop = -((Math.floor(parseInt($el.height()) / 2)) + (captionHeight / 2));
var marginRight = -(Math.floor(parseInt($el.width()) / 2));
$el.css({
"margin-top" : marginTop + "px",
@@ -184,7 +185,7 @@
// Re-position image
$img.load(function(){
repositioner = new that.reposition($(this));
repositioner = new that.reposition($(this), $caption);
repositioner.init();
$(window).resize(repositioner.init);
that.destroy([$loader]);

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit b6ae775

Please sign in to comment.