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
Related
I've gone through lots of masonry libraries before posting this question, but I could not find anything similar. So, I would greatly appreciate your advice.
What I'm trying to achieve is a perfect square masonry with just several (1-5) images - similar to Facebook images layout. E.g:
Also, I've been trying to build it myself from scratch, but there are some difficulties: As I understand, one can never know image height and width before it is partly or fully loaded. Even though, at first I need dimensions of only the first image to decide on a grid style, this waiting does not seem a good solution. On fb, the grid seems(?) to be determined from the beginning.
I have doubts that in case of FB the positions and sizes of these images are calculated in back-end and css is used only for masking, because server returns already resized images and maybe it even stores these alignment data to avoid repeated calculations.
Could you share your experience on this or redirect me to some library that solves this task? Actually, this algorithm should be easier than perfect masonry algorithms with many images, because only 1-5 images needs be shown here and all cases are determined based on whether first image is a portrait, landscape or square and whether it fills container width.
Thanks!
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 would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
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.
I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.