Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #45 from vestman/cell-border
Added the option to add borders
  • Loading branch information
jonathanmoore committed Apr 7, 2015
2 parents 8a8a7a8 + 4a053b0 commit 3419500
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 18 deletions.
26 changes: 18 additions & 8 deletions README.markdown
Expand Up @@ -4,7 +4,7 @@ A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's

## Demo

View the [photoset grid Github page](http://stylehatch.github.com/photoset-grid) for all the examples or jump straight to the following demos:
View the [photoset grid Github page](http://stylehatch.github.com/photoset-grid) for all the examples or jump straight to the following demos:

- [Basic usage](http://stylehatch.github.com/photoset-grid#demo-basic-usage)
- [Custom options](http://stylehatch.github.com/photoset-grid#demo-custom-options)
Expand All @@ -13,9 +13,9 @@ View the [photoset grid Github page](http://stylehatch.github.com/photoset-grid)

## Usage

Apply the photo set grid layout to a selected `div` containing images for the grid.
Apply the photo set grid layout to a selected `div` containing images for the grid.

The only markup requirement is a `data-layout` attribute on the selected `div`. `data-layout` should contain a string of numbers representing the number of columns for each row.
The only markup requirement is a `data-layout` attribute on the selected `div`. `data-layout` should contain a string of numbers representing the number of columns for each row.

If all of the images in a photoset set both a height and a width, the layout of the grid is triggered immediately before all of the images load. Otherwise [imagesLoaded](https://github.com/desandro/imagesloaded) is used to wait for all of the images to load in.

Expand All @@ -35,7 +35,7 @@ Simply call `photosetGrid();` on a div with the `data-layout` specified and a nu
<img src="image3.jpg">
<img src="image4.jpg">
</div>

##### Javascript:
$('.photoset-grid').photosetGrid();
#### Custom Options
Expand All @@ -50,6 +50,11 @@ Beyond the basic usage, you can set a number of optional arguments including cal
- `highresLinks` - `boolean` Set to `true` to automatically swap out the default image `src` with the `data-highres` attribute once the image is wider than `lowresWidth`. This will also wrap each image with an `a` vs. `div` element. Default: `false`
- `lowresWidth` - `number` Sets the width where the default image is swapped out for the high resolution image. Default: `500`
- `rel` - `string` This optional setting useful for lightbox viewers applies a common `rel` attribute to the anchor tags wrapping the images.
- `borderActive` - `boolean` This optional setting is used to wrap each image with a border. Default: `false`
- `borderWidth` - `string` Define the width of the border wrapping each image. Default: `'5px'`
- `borderColor` - `string` Defines the color used for the border wrapping each image. Default: `'#000000'`
- `borderRadius` - `string` Defines the border radius of the border wrapping each image. Default: `'0'`
- `borderRemoveDouble` - `boolean ` If the gutter is set to 0px (or not specified) then this option can be used to remove double borders that would occur between each row/cell. Default: `false`
- `onInit` - `function` Define a function to be called when the plugin is initialized.
- `onComplete` - `function` Define a function to be called when the plugin has completed the grid layout.

Expand All @@ -63,7 +68,7 @@ Beyond the basic usage, you can set a number of optional arguments including cal
<img src="image6.jpg" data-highres="highres-image6.jpg">
<img src="image7.jpg" data-highres="highres-image7.jpg">
</div>

##### Javascript:
$('.photoset-grid').photosetGrid({
layout: '232',
Expand All @@ -72,14 +77,19 @@ Beyond the basic usage, you can set a number of optional arguments including cal
highresLinks: true,
lowresWidth: 300,
rel: 'gallery-01',
borderActive: true,
borderWidth: '3px',
borderColor: '#000000',
borderRadius: '3px',
borderRemoveDouble: false,

onInit: function(){},
onComplete: function(){

$('.photoset-grid').css({
'visibility': 'visible'
});

}
});

Expand Down
16 changes: 16 additions & 0 deletions index.html
Expand Up @@ -100,6 +100,12 @@ <h5>Javascript:</h5>
highresLinks: true,
// Asign a common rel attribute
rel: 'print-gallery',
// Add a border to each image
borderActive: true,
borderWidth: '3px',
borderColor: '#000000',
borderRadius: '3px',
borderRemoveDouble: false,

onInit: function(){},
onComplete: function(){
Expand Down Expand Up @@ -209,6 +215,11 @@ <h4>Arguments:</h4>
<li><code>highresLinks</code> - <code>boolean</code> Set to <code>true</code> to automatically swap out the default image <code>src</code> with the <code>data-highres</code> attribute once the image is wider than <code>lowresWidth</code>. This will also wrap each image with an <code>a</code> vs. <code>div</code> element. Default: <code>false</code></li>
<li><code>lowresWidth</code> - <code>number</code> Sets the width where the default image is swapped out for the high resolution image. Default: <code>500</code></li>
<li><code>rel</code> - <code>string</code> This optional setting useful for lightbox viewers applies a common `rel` attribute to the anchor tags wrapping the images. Default: <code>''</code></li>
<li><code>borderActive</code> - <code>boolean</code> This optional setting is used to wrap each image with a border. Default: <code>false</code></li>
<li><code>borderWidth</code> - <code>string</code> Define the width of the border wrapping each image. Default: <code>'5px'</code></li>
<li><code>borderColor</code> - <code>string</code> Defines the color used for the border wrapping each image. Default: <code>'#000000'</code></li>
<li><code>borderRadius</code> - <code>string</code> Defines the border radius of the border wrapping each image. Default: <code>'0'</code></li>
<li><code>borderRemoveDouble</code> - <code>boolean</code> If the gutter is set to 0px (or not specified) then this option can be used to remove double borders that would occur between each row/cell. Default: <code>false</code></li>
<li><code>onInit</code> - <code>function</code> Define a function to be called when the plugin is initialized.</li>
<li><code>onComplete</code> - <code>function</code> Define a function to be called when the plugin has completed the grid layout.</li>
</ul>
Expand Down Expand Up @@ -267,6 +278,11 @@ <h5>Have a question?</h5>
layout: '21',
highresLinks: true,
rel: 'print-gallery',
borderActive: true,
borderWidth: '3px',
borderColor: '#000000',
borderRadius: '3px',
borderRemoveDouble: false,

onComplete: function(){
$('.photoset-grid-custom').attr('style', '');
Expand Down
59 changes: 51 additions & 8 deletions jquery.photoset-grid.js
Expand Up @@ -8,7 +8,7 @@
*/

/*jshint browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true, devel: true */
;(function ( $, window, document, undefined ) {
;(function ( $, window, document, undefined ) {

'use strict';

Expand All @@ -29,6 +29,17 @@
// relational attr to apply to the links for lightbox use
rel : '',

// add a border to each image
borderActive: false,
// set border width
borderWidth: '5px',
// set border color
borderColor: '#000000',
// set border radius
borderRadius: '0',
// if true it will remove "double" borders
borderRemoveDouble: false,

// Call back events
onInit : function(){},
onComplete : function(){}
Expand All @@ -53,7 +64,7 @@

this._setupRows(this.element, this.options);
this._setupColumns(this.element, this.options);

},

_callback: function(elem){
Expand Down Expand Up @@ -96,7 +107,7 @@

// Wrap each set of images in a row into a container div
$images.slice(rowStart, rowEnd).wrapAll('<div class="photoset-row cols-' + val + '"></div>');

imageIndex = rowEnd;
});

Expand Down Expand Up @@ -126,6 +137,9 @@
highres = $(this).attr('src');
}
$(this).wrapAll('<a href="' + highres + '" class="photoset-cell highres-link" />');
if(options.borderActive){
$(this).wrapAll('<span class="photoset-content-border" />');
}
});

// Apply the optional rel
Expand All @@ -135,7 +149,12 @@

} else {
$images.each(function(){
$(this).wrapAll('<div class="photoset-cell" />');
if(options.borderActive){
$(this).wrapAll('<div class="photoset-cell photoset-cell--border" />');
$(this).wrapAll('<div class="photoset-content-border" />');
} else {
$(this).wrapAll('<div class="photoset-cell" />');
}
});
}

Expand All @@ -145,6 +164,7 @@
var $cols3 = $(elem).find('.cols-3 .photoset-cell');
var $cols4 = $(elem).find('.cols-4 .photoset-cell');
var $cols5 = $(elem).find('.cols-5 .photoset-cell');
var $cellBorder = $(elem).find('.photoset-content-border');

// Apply styles initial structure styles to the grid
$(elem).css({
Expand All @@ -167,6 +187,17 @@
'width': '100%',
'height': 'auto'
});
if(options.borderActive){
$cellBorder.css({
'display': 'block',
'border': options.borderWidth + ' solid ' + options.borderColor,
'border-radius': options.borderRadius,
'overflow': 'hidden',
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
'box-sizing': 'border-box'
});
}

// if the imaged did not have height/width attr set them
if (waitForImagesLoaded) {
Expand Down Expand Up @@ -194,6 +225,11 @@
'padding-left': (gutterVal / 2) + 'px'
});

// If 'borderRemoveDouble' is true, let us remove the extra gutter border
if(options.borderRemoveDouble){
$(elem).find('.photoset-row').not(':eq(0)').find('.photoset-content-border').css({'border-top': 'none'});
$(elem).find('.photoset-row').not('.cols-1').find('.photoset-content-border').not(":eq(0)").css({'border-left': 'none'});
}

function resizePhotosetGrid(){

Expand Down Expand Up @@ -221,6 +257,13 @@
var bufferHeight = Math.floor(rowHeight * 0.025);
$(this).height( rowHeight - bufferHeight );

// If border is set to true, then add the parent row height to each .photoset-content-border
if(options.borderActive){
$(this).find('.photoset-content-border').each(function(){
$(this).css({'height': rowHeight - bufferHeight});
});
}

$(this).find('img').each(function(){
// Get the image height from the calculated/real height/width
var imageHeight = ( $(this).attr('height') * parseInt($(this).css('width'), 10) ) / $(this).attr('width');
Expand All @@ -232,14 +275,14 @@

});
$(elem).attr('data-width', w );
}
}

}
resizePhotosetGrid();

$(window).on("resize", function() {
resizePhotosetGrid();
});
});

};

Expand All @@ -266,7 +309,7 @@
$this._callback(elem);
}


}

};
Expand Down Expand Up @@ -410,7 +453,7 @@
* Copyright 2012 @louis_remi
* Licensed under the MIT license.
*
* This saved you an hour of work?
* This saved you an hour of work?
* Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
*/

Expand Down

0 comments on commit 3419500

Please sign in to comment.