repp / balancedgallery Goto Github PK
View Code? Open in Web Editor NEWA balanced photo gallery plugin for jQuery.
License: Do What The F*ck You Want To Public License
balancedgallery's People
Contributors
Stargazers
Watchers
Forkers
pinneo uplanning owtp adamqureshi rafaelhrborges myalban iwacheto kollectivesolutions abhik137 mdenisov karimabdul thetron bily nunodotferreira antoniodesouza afilipiuk gerhobbelt mgenev eolsen lartisan tylerstaines mrmax182 federico39 biyas imaginationeverywhere tkosse akshay-mediastinct maitrenem juanonsoftware kxs678 dombajc drybaby devsubhanibalancedgallery's Issues
Odd result when attached to element other than body
It seems I can only get this to work when I apply it to body. If I try to contain the gallery inside a div, oddly enough the first 4 images expand to the width of the screen and the last 4 expand to about 50%. They are all stacked vertically.
Sounds like the same issue reported here:
http://www.reddit.com/r/webdev/comments/1kyt2r/perfectly_balanced_photo_galleries_a_jquery_plugin/cbuf99h
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<style type="text/css"></style>
<script src="jquery.min.js"></script>
<script src="jquery.balanced-gallery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#gallery').BalancedGallery({ background: '#DDD' });
});
</script>
</head>
<body>
<div id="gallery">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.jpg">
<img src="6.png">
<img src="7.png">
<img src="8.png">
</div>
</body>
</html>
I've tried adding height:100% and various other styles to the element, to no avail. Any suggestions?
Flickering effect when resizing the window
When resizing the window, even if it's by one pixel, all images are shown for a moment on their original sizes, creating an uncomfortable flickering.
Would it be possible to avoid this effect?
Error idealWidth is not a function
I tried to use your amazing gallery, but it wouldn't work. It threw the error:
Uncaught TypeError: I.idealWidth is not a function
Any idea why that could happen?
Demos broken
"jQuery is not defined"
Doesn't work with multiples gallery
Hi,
When i try to make multiples gallery like this :
And i instanciate the gallery like this :
` $(window).load(function () {
$(".test").each(function() {
$( this ).BalancedGallery({
autoResize: true, // re-partition and resize the images when the window size changes
background: null, // the css properties of the gallery's containing element
idealHeight: 150, // 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
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
padding: 10, // 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
});
});
});`
The grid looks good but when i resize the first one do nothing and the second one is resized.
Rounding errors sum up after 5 resizes
Hi, Great plugin, I noticed that when the user does a couple of resizes, the rounding errors seem to sum up and aspect-ratios of the images are lost. Since modern browsers seem to handle decimal places in style tags very well I suggest you either use the decimal places like 123.45995 px to increase the number of allowed resizes or completely redraw each time, but I get that last one is not preferable. Maybe store the original aspect ratios in a data-aspectratio attribute in the image its self.
Feature request: Register as a Bower Packager
Hi, @repp . Great plugin!
Please, can you register it as a Bower Package
Cheers!
Bug on mouseover caused by 3rd party plugin
Pinterest button plugin installed in Chrome results in such view on image mouseover: http://cl.ly/image/092J3f3n3i08
I'm certain that this is layout problem, as I've never had anything like that for many months I'm using this plugin in Chrome.
Chrome 41 on MacOS X 10.10.2
Doesn't work when i change the 'body'
Hi,
The plugin works very nice with the demo (even with my own pictures) but now I try to change the body to a custom div, so i change this line : $("#gallery").BalancedGallery ... and i have a div with a 'gallery' id, but this doesn't work, when i resize the blocks doesn't go well.
Why ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.