I'm in a search for some jQuery resources or other things that will help me building a customizable start page for users.
I'm talking about tiles that have to be aligned reasonably in the screen (usually a parent div).
The tiles have equal size and if possible I want to let the user drag them for customization (Not a must).
The main issue is aligning the tiles in a rasonable way.
I found some jQuery plugins like freewall etc. but they usually try to fill an area and less appropriate for my cause...
When you using Freewall you can choice option for not fill by set:
fixSize: 0
even you can control the gaps too, by using method setHoles.
please check there links for know how to control the gaps:
http://vnjs.net/www/project/freewall/404.html
http://vnjs.net/www/project/freewall/
Best
I've found a very appropriate plugin:
http://masonry.desandro.com/
It's capaable of performing layout and placing the tiles centered in the given space.
Perfect for me.
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.
I want to know if there's a way to show more than 3 images on this script. I already tried, but I couldn't do it.
Link: http://tympanus.net/Development/3DGallery/
If it's impossible, is there any other plugin in this same style?
Thanks.
No you can't with this plugin (well, obviously you can with vast amounts of changes, as in recoding it from scratch). And the reason is it basically spins through a left, center and right screen, so you can't add more "states". You will even see leftCSS, rightCSS and currentCSS, which applies to the 3 different states
About options to this, there are a lot of options, most of them paid, but you can check 3D Flow, which is free and has a lot of different view options
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)
I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.
I want to enable the user to drag a bar up/down to reveal/hide content in two contiguous panes. I also need to create some buttons that move the bar to some preset locations. I know this is all possible, but am not sure where to start.
I'm creating a prototype whose purpose is to figure out the right user experience, so it's OK if it's not going to scale to 300 million simultaneous users on IE6/Windows Millenium. ;-)
That's a rather complicated thing to do from scratch, so consider using a plugin. Wijmo is based on jQuery UI and has an open-source splitter widget. The documentation is decent as well.
While I don't see any methods to resize it, you may be able to add one and contribute it back to the project.