Skip to content

Commit 33d13bc

Browse files
xremixxremix
authored
Merge pull request #33 from xremix/develop
Option to set the gallery margin
2 parents dbed168 + 406c990 commit 33d13bc

File tree

6 files changed

+24
-21
lines changed

6 files changed

+24
-21
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ Check out the full [CodePen Demo](http://codepen.io/xremix/pen/QyqJzQ) including
5050
| Name | Default / Options | Type | Description |
5151
|---|---|---|---|
5252
| `margin` | e.g. `10` | `int` | Value in pixels of the margin of each image on each side |
53+
| `galleryMargin` | e.g. `17` | `int` | Value in pixels of the margin outside of the gallery. **This is set to 17px default because of some rendering issue on macOS Safari** |
5354
| `mode` | `default`, `bootstrap`, `bootstrapv4`, `flickr`, `small` or custom object | `string` or `object` | The style mode wich defines how the gallery should be displayed and how many images fit in a row. See description in the mode section. |
5455
| `lastRow` | `adjust`, `fullwidth` or `hidden` | `string` | Set the last row to the full width, hide it or find a good adjustment. *NOTE:* I personally prefer `adjust`, wich is also the default. |
5556
| `jsSetup` | `true` or `false` | `bool` | Sets some default CSS values to the elements like `dislay:inline-block` and for each image inside of a container `width:100%`. This can be disabled if you want to have your own floating or style this in plain CSS. |

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "xGallerify",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"homepage": "https://github.com/xremix/xGallerify",
55
"authors": [
66
"Toni Hoffmann <toni-hoffmann@xremix.de>"

‎dist/jquery.xgallerify.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
//Initial Parameters
1818
params = params || {};
1919
params.margin = params.margin !== undefined && params.margin !== null ? params.margin : 10;
20+
params.galleryMargin = params.galleryMargin !== undefined && params.galleryMargin !== null ? params.galleryMargin : 17; // 17px is the largest native scrollbar width state of 2017
2021
params.width = params.width || undefined; //width of the whole gallery
2122
params.mode = params.mode || 'default'; //default, bootstrap, flickr, small
2223
params.jsSetup = params.jsSetup !== undefined && params.jsSetup !== null ? params.jsSetup : true; //if you are going to set the css variables for the elements in CSS
@@ -38,11 +39,11 @@
3839
this.gallerify.renderAsyncImages = function(){
3940
setupChilds(_this, params.margin);
4041
if(params.debounceLoad){
41-
_this.find("img").load(function(){
42+
_this.find("img").on('load', function(){
4243
asyncImagesLoadedFinished();
4344
});
4445
}else{
45-
_this.find("img").load(function(){
46+
_this.find("img").on('load', function(){
4647
renderGallery(_this, params);
4748
});
4849
}
@@ -111,12 +112,12 @@
111112
) || //Checking if current row is a complete row
112113
_params.lastRow == "fullwidth" //check if a non-complete row should be displayed with the full width
113114
){
114-
lastRowHeight = renderRow(jChildRows[jChildRows.length - 1], width, _params.margin, screenSettings.maxHeight);
115+
lastRowHeight = renderRow(jChildRows[jChildRows.length - 1], width, _params.margin, _params.galleryMargin, screenSettings.maxHeight);
115116
}else{
116117
if(_params.lastRow === 'hidden' && imagesPerRow !== 1){
117118
hideRow(jChildren); // Don't render last row
118119
}else{ // default / adjust
119-
renderLastRow(jChildRows[jChildRows.length - 1], width, _params.margin, lastRowHeight);
120+
renderLastRow(jChildRows[jChildRows.length - 1], width, _params.margin, _params.galleryMargin, lastRowHeight);
120121
}
121122

122123
}
@@ -129,17 +130,17 @@
129130
}
130131
}
131132

132-
function renderRow(jChildren, galleryWidth, margin, maxHeight){
133+
function renderRow(jChildren, galleryWidth, margin, galleryMargin, maxHeight){
133134
resizeToSameHeight(jChildren, maxHeight);
134-
return resizeToWidth(jChildren, galleryWidth, margin); //Returning height of the current row
135+
return resizeToWidth(jChildren, galleryWidth, margin, galleryMargin); //Returning height of the current row
135136
}
136137

137-
function renderLastRow(jChildren, galleryWidth, margin, rowHeight){
138+
function renderLastRow(jChildren, galleryWidth, margin, galleryMargin, rowHeight){
138139
rowHeight = resizeToSameHeight(jChildren, rowHeight);
139140
var currentWidth = 0;
140141
$(jChildren).each( function(){ currentWidth += $(this).width(); });
141142
if(currentWidth > galleryWidth){
142-
rowHeight = resizeToWidth(jChildren, galleryWidth, margin);
143+
rowHeight = resizeToWidth(jChildren, galleryWidth, margin, galleryMargin);
143144
}
144145
return rowHeight;
145146
}
@@ -156,13 +157,13 @@
156157
return jChildren[0].height(); //Returning height of the current row
157158
}
158159

159-
function resizeToWidth(jChildren, rowWidth, margin){
160+
function resizeToWidth(jChildren, rowWidth, margin, galleryMargin){
160161
var currentWidth = 0;
161162
$(jChildren).each( function(){ currentWidth += $(this).width(); });
162163
var marginTotal = (jChildren.length * (margin) * 2);
163164
// Adding 17 pixel of margin to the whole gallery because of some scrollbar issue
164165
// TODO find workaround here
165-
marginTotal += 17;
166+
marginTotal += galleryMargin;
166167
var factor = (rowWidth - marginTotal) / currentWidth;
167168
for (var i = 0; i < jChildren.length; i++){
168169
jChildren[i].css('width', jChildren[i].width() * factor);

‎dist/jquery.xgallerify.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "xgallerify",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"description": "A lightweight, responsive, smart gallery based on jQuery.",
55
"main": "gulpfile.js",
66
"scripts": {

‎src/jquery.xgallerify.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
//Initial Parameters
1818
params = params || {};
1919
params.margin = params.margin !== undefined && params.margin !== null ? params.margin : 10;
20+
params.galleryMargin = params.galleryMargin !== undefined && params.galleryMargin !== null ? params.galleryMargin : 17; // 17px is the largest native scrollbar width state of 2017
2021
params.width = params.width || undefined; //width of the whole gallery
2122
params.mode = params.mode || 'default'; //default, bootstrap, flickr, small
2223
params.jsSetup = params.jsSetup !== undefined && params.jsSetup !== null ? params.jsSetup : true; //if you are going to set the css variables for the elements in CSS
@@ -111,12 +112,12 @@
111112
) || //Checking if current row is a complete row
112113
_params.lastRow == "fullwidth" //check if a non-complete row should be displayed with the full width
113114
){
114-
lastRowHeight = renderRow(jChildRows[jChildRows.length - 1], width, _params.margin, screenSettings.maxHeight);
115+
lastRowHeight = renderRow(jChildRows[jChildRows.length - 1], width, _params.margin, _params.galleryMargin, screenSettings.maxHeight);
115116
}else{
116117
if(_params.lastRow === 'hidden' && imagesPerRow !== 1){
117118
hideRow(jChildren); // Don't render last row
118119
}else{ // default / adjust
119-
renderLastRow(jChildRows[jChildRows.length - 1], width, _params.margin, lastRowHeight);
120+
renderLastRow(jChildRows[jChildRows.length - 1], width, _params.margin, _params.galleryMargin, lastRowHeight);
120121
}
121122

122123
}
@@ -129,17 +130,17 @@
129130
}
130131
}
131132

132-
function renderRow(jChildren, galleryWidth, margin, maxHeight){
133+
function renderRow(jChildren, galleryWidth, margin, galleryMargin, maxHeight){
133134
resizeToSameHeight(jChildren, maxHeight);
134-
return resizeToWidth(jChildren, galleryWidth, margin); //Returning height of the current row
135+
return resizeToWidth(jChildren, galleryWidth, margin, galleryMargin); //Returning height of the current row
135136
}
136137

137-
function renderLastRow(jChildren, galleryWidth, margin, rowHeight){
138+
function renderLastRow(jChildren, galleryWidth, margin, galleryMargin, rowHeight){
138139
rowHeight = resizeToSameHeight(jChildren, rowHeight);
139140
var currentWidth = 0;
140141
$(jChildren).each( function(){ currentWidth += $(this).width(); });
141142
if(currentWidth > galleryWidth){
142-
rowHeight = resizeToWidth(jChildren, galleryWidth, margin);
143+
rowHeight = resizeToWidth(jChildren, galleryWidth, margin, galleryMargin);
143144
}
144145
return rowHeight;
145146
}
@@ -156,13 +157,13 @@
156157
return jChildren[0].height(); //Returning height of the current row
157158
}
158159

159-
function resizeToWidth(jChildren, rowWidth, margin){
160+
function resizeToWidth(jChildren, rowWidth, margin, galleryMargin){
160161
var currentWidth = 0;
161162
$(jChildren).each( function(){ currentWidth += $(this).width(); });
162163
var marginTotal = (jChildren.length * (margin) * 2);
163164
// Adding 17 pixel of margin to the whole gallery because of some scrollbar issue
164165
// TODO find workaround here
165-
marginTotal += 17;
166+
marginTotal += galleryMargin;
166167
var factor = (rowWidth - marginTotal) / currentWidth;
167168
for (var i = 0; i < jChildren.length; i++){
168169
jChildren[i].css('width', jChildren[i].width() * factor);

0 commit comments

Comments
 (0)