Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Huge update on the gallery #7

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

Huge update on the gallery #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3e07ad7
Nearly rewrote the gallery. The vertical option no longer creates hor…
tkosse Feb 24, 2017
a771218
Added fix for Firefox on vertical galleries that prevents columns fro…
tkosse Feb 25, 2017
3ebb23d
Added function to create vertical galleries with the exact same heigh…
tkosse Feb 25, 2017
8f0393e
Fix for galleries that are directly inside the body-element. Some thi…
tkosse Feb 25, 2017
b860e64
Fix in column ratio calculation on vertical galleries. Now the result…
tkosse Feb 25, 2017
ad0ba17
Bug fix: When the scrollbar disappears after resizing and after check…
tkosse Feb 25, 2017
a038bb3
Updated minified version
tkosse Feb 25, 2017
792ac64
Adjusted documentation
tkosse Feb 25, 2017
cc74220
Added new orientation: grid
tkosse Mar 11, 2017
68a28d8
Added new demo files and adjusted documentation
tkosse Mar 11, 2017
fb84234
Added autoResize support for multiple galleries on a page
tkosse Mar 13, 2017
cabf1e1
Added option for grid galleries for different aspect ratios
tkosse Mar 14, 2017
b6b043d
Refactoring
tkosse Mar 21, 2017
48ca0dd
Added compatibility for 'Lightbox' libraries like Fullsizable or Magn…
tkosse Mar 21, 2017
71f90d8
Small improvement on vertical mode.
tkosse Mar 21, 2017
7314d38
Set padding/margin of image in init to 0 and set css properties via f…
tkosse Mar 21, 2017
b66fc8b
Makes a grid gallery more robust in foreign environments
tkosse Sep 9, 2017
22eeaaf
Directly save and use JQuery objects of container elements instead of…
tkosse Sep 10, 2017
4ec4dbf
Small logic bug
tkosse Sep 13, 2017
92f99ad
Added random order for images in grid mode through the options mainta…
tkosse Sep 13, 2017
0378d21
Bugfix: clearing div was added several times
tkosse Sep 13, 2017
b9f0c36
Reorder functions
tkosse Sep 14, 2017
8af7e2b
Use more Vanilla JS
tkosse Sep 16, 2017
7e619fb
Adding colName as a class instead of an id is more sematically correc…
tkosse Sep 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,17 @@ Options
-------
``` javascript
var defaults = {
autoResize: true, // re-partition and resize the images when the window size changes
autoResize: true, // resize the images when the window size changes
background: null, // the css properties of the gallery's containing element
idealHeight: null, // ideal row height, only used for horizontal galleries, defaults to half the containing element's height
idealWidth: null, // ideal column width, only used for vertical galleries, defaults to 1/4 of the containing element's width
idealHeight: null, // ideal row height, only used for horizontal galleries, defaults to 1/4 of the container width
idealWidth: null, // ideal column width, only used for vertical galleries, defaults to 1/4 of the container width
maintainOrder: true, // keeps images in their original order, setting to 'false' can create a slightly better balance between rows
orientation: 'horizontal', // 'horizontal' galleries are made of rows and scroll vertically; 'vertical' galleries are made of columns and scroll horizontally
orientation: 'horizontal', // 'horizontal' galleries are made of rows; 'vertical' galleries are made of columns; 'grid' galleries combine both
padding: 5, // pixels between images
shuffleUnorderedPartitions: true, // unordered galleries tend to clump larger images at the begining, this solves that issue at a slight performance cost
viewportHeight: null, // the assumed height of the gallery, defaults to the containing element's height
viewportWidth: null // the assumed width of the gallery, defaults to the containing element's width
shuffleUnorderedPartitions: true, // unordered galleries tend to clump larger images at the beginning, this solves that issue at a slight performance cost
gridAspectRatio: 1, // the aspect ratio with which the images are going to be displayed; only used for grid galleries
widthDivisor: 4 // used to define idealHeight/idealWidth (when they aren't set) by dividing the elements container width by the given value;
// the bigger the widthDivisor value, the smaller the images get; on vertical galleries the value simply defines the number of columns
};
```

Expand Down
2 changes: 1 addition & 1 deletion balancedgallery.jquery.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
"dependencies" : {
"jquery": ">=1.5"
},
"description" : "Balanced Gallery is a jQuery plugin that evenly distributes photos across rows or columns, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for (responsive) websites."
"description" : "Balanced Gallery is a jQuery plugin that evenly distributes photos across rows, columns or a grid, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a great choice for (responsive) websites."
}
46 changes: 46 additions & 0 deletions demo_grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>Balanced Gallery Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.balanced-gallery.js"></script>
<style type="text/css">
html, body {
font-family: helvetica, arial, sans-serif;
height: 100%;
padding: 0;
margin: 0;
line-height: 12px;
}
img {
max-width: 100%;
}
</style>
<script type="text/javascript">
$(window).load(function () {
$('#gallery').BalancedGallery({orientation: 'grid'});
});
</script>
</head>
<body>

<div id="gallery" style="width: 70%; margin: auto;">
<img src="http://placekitten.com/335/283" style="padding: 10px; margin: 5px" />
<img src="http://placekitten.com/325/596" />
<img src="http://placekitten.com/580/365" />
<img src="http://placekitten.com/282/581" />
<img src="http://placekitten.com/503/319" />
<img src="http://placekitten.com/549/577" />
<img src="http://placekitten.com/355/493" />
<img src="http://placekitten.com/500/150" />
<img src="http://placekitten.com/360/529" />
<img src="http://placekitten.com/589/361" />
<img src="http://placekitten.com/452/462" />
<img src="http://placekitten.com/550/304" />
<img src="http://placekitten.com/352/204" />
<img src="http://placekitten.com/400/220" />
</div>

</body>
</html>

6 changes: 5 additions & 1 deletion demo.html → demo_horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@
</style>
<script type="text/javascript">
$(window).load(function () {
$('body').BalancedGallery({ /* options */ });
$('#gallery').BalancedGallery({divisor: 3});
});
</script>
</head>
<body>

<div id="gallery" style="width: 70%; margin: auto;">
<img src="http://placekitten.com/335/283" style="padding: 10px; margin: 5px" />
<img src="http://placekitten.com/325/596" />
<img src="http://placekitten.com/580/365" />
Expand All @@ -33,6 +35,8 @@
<img src="http://placekitten.com/550/304" />
<img src="http://placekitten.com/352/204" />
<img src="http://placekitten.com/400/220" />
</div>

</body>
</html>

4 changes: 2 additions & 2 deletions demo_small_box.html → demo_vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
</style>
<script type="text/javascript">
$(window).load(function () {
$('#gallery').BalancedGallery({ /* options */ });
$('#gallery').BalancedGallery({orientation: 'vertical', widthDivisor: 3, maintainOrder: false});
});
</script>
</head>
<body>

<div id="gallery" style="width: 80%; height: 600px">
<div id="gallery" style="width: 70%; margin: auto;">
<img src="http://placekitten.com/335/283" style="padding: 10px; margin: 5px" />
<img src="http://placekitten.com/325/596" />
<img src="http://placekitten.com/580/365" />
Expand Down
Loading