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
A balanced photo gallery plugin for jQuery.
License: Do What The F*ck You Want To Public License
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?
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.
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?
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.
"jQuery is not defined"
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 ?
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?
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
Hi, @repp . Great plugin!
Please, can you register it as a Bower Package
Cheers!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.