I'm working on a class project at the moment and I'm having some trouble with the front-end part of it.
What I'm trying to do is implement a grid of hexagonal like shapes (I'm using this example by web-tiki), that works exactly as I want when resizing the screen.
I want to put this grid in a carousel-like div, that adds a page with the same number of items when resizing, instead of stacking them underneath, thus taking up more space downwards.
I've been through a lot of research, but none of the examples given seemed to fit my case. Can anybody give me an insight on how to do that?
Edit: Based on Rustyjim's comment, I actually edited the carousel's js file to fit my needs, so consider the issue solved. Thanks for the responses!
Related
Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.
Here's a weird one that I've been wracking my brain on.
I want to do two things, in order:
Generate a masonry-style layout from a list of divs, imgs, or whatever. These will utilize images but they can be background images, within the divs, or some other method that works. This can be pure CSS or a jquery plugin.
Once the grid has been generated, apply a physics based plugin like '.throwable' to the individual divs/objects. The objects will fall on each other, but overall retain their structure, much like you'd see in Angry Birds or something.
The goal here is to paste in a list of divs, let a jquery plugin or even pure CSS automatically figure out how to align them, and then apply gravity to the masonry grid.
The problem I've run into over and over is that the masonry grid is generated... but then when I apply a physics system to it, the individual objects snap back to a different position. I think masonry wants them as "relative" while the physics system wants them in "absolute"? Not sure...
I have a rough version of my latest attempt up here if anyone wants to get an idea of what I'm attempting: http://cssdeck.com/labs/full/f5dm0zv8
Jasper's reply hinted at the solution, although I'm not sure why things seemed to work this time for me. I had tried multiple javascript/jquery based masonry plugins, and nothing had worked. I ended up trying "http://masonry.desandro.com/methods.html" and it ended up working for me. I thought I had tried this one already - maybe not? Anyways, I have a more or less working example here, but new issues have arisen: http://output.jsbin.com/runewidapi/2/
I'm a little bit depressed because I need a customizable grid (moving and resizing DIVs) like Gridster, you can check the demo here: http://gridster.net/
Basically I need all the features Gridster is offering, like dragging and dropping DIVs, resizing them and saving the positions of the DIVs and loading them.
However, there is one problem. It is not possible to drop the DIVs anywhere.
In the Screenshot I want to drop the red highlighted DIV on that place, but it will snap to the upper highlighted area.
http://fs1.directupload.net/images/150307/z2qlxelp.png
Is there any solution to fix this problem?
Also, could someone explain me how the Grid of Gridster works? Is there a "virtual grid" behind that or how is it realised?
If someone has a solution for that problem, an example would be really nice.
I'm not sure if gridster supports this but you can try gridstack.js with options {float: true}. I've started gridstack.js because I need responsive layout support. But now it has bunch of features which gridster doesn't have (like knockout.js support, etc).
The original Gridster.js project is abandoned. However, there is a well maintained fork that provides the functionality you need:
https://github.com/dsmorse/gridster.js
Take a look at the sticky-position code for an example.
Also, take a look at Angular Gridster:
https://github.com/ManifestWebDesign/angular-gridster
Does anyone know of a jQuery content slider (not just an image slider) that allows you to specify a grid of elements?
As an example, this is the sort of grid that I'm after:
http://cl.ly/image/0O213C1n2b0s
You can see that it's a 2x2 grid. With the controls, when someone clicks on a 'next' link, it should scroll to show the next 4 elements. I'd like to be able to have multiple instances on a page, each having different grids (I may be 3x2, 2x2, 4x1 on the same page)
Also, as an added caveat, I need this to be responsive.
First question is; does anyone know of a solution that already exists which would fit my requirements? If not, that leads to my second question; would anyone like to help me write such a thing? I'm relatively savvy with javascript (more specifically jQuery if I'm being absolutely honest) but by no means an expert.
I've done a fair amount of googling, but came up short. Hopefully someone is way ahead of me and has already written something along these lines.
What say you, Internet?
Have you seen this:
jQuery grid syle slider
I would like to take some arbitrary HTML and display it in a carousel, showing a page at a time. For example, see how articles are laid out in the NY Times iPad app. I have achieved the column layout using the -webkit-column-width CSS property, and it works as expected if I add empty carousel items:
http://www.senchafiddle.com/#ea1RR
However, I need to figure out programmatically how many dummy carousel items to add, based on the number of columns. As far as I can tell, there is no way to find the width of the text, since the extra columns are overflow and don't affect the size of the element. Any help with this issue, or ideas on other ways I could achieve the same functionality, would be appreciated.
I think this solution can be adapted to fit your needs: http://www.webdeveloper.com/forum/showthread.php?t=196319
If you have problems start a senchafiddle so i can inspect your code