I'm trying to emmulate the following:
Any ideas how? Basically all photos have the same height and photos are arrange/cropped/resized dynamically to fit perfectly on rows so there are no jagged sides left or right. If you resize the browser window it resizes the photos as well to fit. I have tried isotope and jquery masonry and neither give me this effect.
I just implemented this very thing. Here's how I did it:
When the page loads, I measure the available width of the target container (the container where my images will live), and call this maxWidth
I make an AJAX call, passing the maxWidth up to the server
I determine my list of gallery images to display on the server, and process each one by one
During iteration of my list, I keep adding images to a row, the row's length being the maxWidth available (which I passed up). Once an image overflows the maxWidth, I calculate the overflow amount
I take that overflow amount, divide it by the number of images in my row, and subtract that value off each of the images in the row (so one image doesn't get its width reduced too much)
I repeat this for each row, so each row adds up to exactly maxWidth
Some things I had to consider:
I had to take into account the width of the margins I wanted in between each image, and factor that into the maxWidth accumulated value when processing each row.
We needed a corner stamp image (an image that was larger and was fixed in the top left corner. This image encompassed two rows, and was wider than my other thumbnails. I had to calculate a different maxWidth for the first 2 rows as a consequence.
I had to recalculate the dimensions when the browser was resized. Binding to the resize event of the window caused multiple AJAX calls during dragging. I had to fix the resize event so it only fired when done.
Overall, the image gallery turned out quite well. He's a screenshot.
the fluid grid system will help you in such a case:
http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Related
I have a ng-zorro table and i would want the scroll bar to resize when i resize the browser window (say for example in a smaller device). So that it will be dinamically changed based on the page size, how to do that?
Well, firstly you should provide more context to your question: for example you could provide a minimal reproducible example
and some code so we can have more context to the question asked.
But anyway i will try to answer your question:
Here's what you can do:
looking at the ng-zorro table i see that there is a property for nzScroll that takes an object as argument.
so when you delcare the table you can do this:
<nz-table [nzScroll]="{ y: 'calc(100vh - 276px)' }">
</nz-table>
What is that code doing?
So since we want to scroll vertically (and not horizontally) we need to change the y axis ence the y: in the code.
you can assign a pixel value to that ybut that will result your scrollbar to have a fixed height so resizing the window will not resize the scrollbar.
what i did was calculate all the elements heights in my page so that i know how much height my table is taking. I did this when the table was empty using an extension for google chrome smart page ruler extension
knowing the elements height in my page i could subtract that amount to the viewHeight of my page.
Therefore everytime you resize the window the scrollbar is going to resize because is calculating the difference between 100% of the viewHeight and the sum between all of your elements heights.
If you have any question about my answer i will happly answer, cheers!
when i work with flash i getting trouble when working with images
now my present project i'm uploading images dynamically, but here main problem is all the images sizes are different when i put the images into flash canvas every image looking different size means exact image size, but i need all the images should look same size in the canvas
check the image
if i change both of the height and width values that is not effecting any where, that is automatically taking fixed images size but i need all the images looks exact size, i didn't get any thing
I think I have the solution to your problem.
Basically, you need to create a container (if you haven't already done so) to 'hold' the images as they come up OR know the maximum height and width you want for the images. Then you need to make sure the aspect ratio is correct (so your picture won't be skewed. )
Code Example:
var wHRatio:Number=image.width/image.height; //this will give you the width to height ratio to make sure aspect ratio stays the same.
if (image.width>mcContainer.width){ //if not using container, enter max width
image.width=mcContainer.width;
image.height=image.width/wHRatio;
// at this point, if the height is still taller than the container, you want to shrink the image again so it's no taller than the container.
if (image.height>mcContainer.height){ //if not using container, enter max height
image.height=mcContainer.height;
image.width=image.height*wHRatio;
}
}
**** Don't forget to 'addChild' after you've completed the re-sizing.
This may not be the most efficient way of doing things, but I think it will work for your purposes.
I'm struggling with a issue with my images. i have a series of images and i want to resize the m to fit is container based on the biggest one. preferably handled in jquery, javascript. there is an example below:
http://jsbin.com/bicupana/1/edit?html,css,js,output
So you see the images. The need to be resized proportionally, based on the largest image. i want the larges image to be filling 80% of it's parent, the body in this case. The reason why i'm struggling is that sometimes the width is bigger than the height and sometimes the height is bigger than the width.
The second reason i'm worried about is performance. If there are a lot of images, will people see the images flickering from big the the final size?
I would like to create a gallery like Google+ "Photos From Your Circles" in which the thumbnails looks like a collage.
Thumbnails keeps the aspect ratio of the photo.
Gallery rows are close in height (not equal but very close).
Spacing between thumbnails is equal everywhere.
The gallery fills in a rectangle.
Photos are not cropped. They're just resized to fill in the space.
Please see the screenshot as example:
http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg
i would like to learn how can i use css/javascript/jquery to style gallery thumbnails like this at the client side programatically.
Thank you for answers!
You may find this write-up helpful: Building a Google Plus Inspired Image Gallery
He uses a technique that does not require sorting the images, and it's pretty simple. Basically, once you know the width W of your rows of thumbnails, keep placing thumbnails until the total width exceeds W. Let's say you exceed W by 40px. Now, crop each thumbnail in the row (via css) to remove 40 pixels total.
If, say, you want to crop 10px from an image, you can do it with something like this:
<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
<img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>
The overflow:hidden crops the image, and the negative margin centers it horizontally, basically.
This is classic cutting stock problem. You can solve it using branch and bound method or dynamic programming.
Generally Google has huge base of pictures thus finding proper combination of widths is easier for them.
For you I would suggest having limited set of aspect ratios (ex. 16) which creates finite number of combinations (256). Every picture before conversion should be scaled or cropped to closest aspect ratio.
Keep in mind that there may be very wide pictures which need some workaround: cropped or width of them should be width of row and height variable. Also spacing needs to be solved somehow. I would join all pictures in one row and put spacings as white overlays over pictures.
I'm going to simplify what I see (e.g. the numbers I provide won't be 100%, down-to-the-pixel accurate), but it will give you one method for accomplishing this.
When I look at the screenshot, what I see is a list of images that are approximately 4x3 aspect ratio (or 3x4 in reverse). This aspect ratio is at the heart of the layout. The overall rectangle that is filled can be any aspect ratio, but it should be a multiple of some widths and heights. For example, you'll see that each row contains some portrait, and some landscape photos. The overall effect, however, is that G+ can pull from a large pool of images, and therefore, can choose a combination of images that meet the needs of the individual aspect ratio (landscape or portrait aspect of the given image), as well as overall aspect ratio of the containing rectangle.
I would take images that are available in the pool, and calculate their aspect ratio (a simple width divided by height). Then group the images by their aspect ratio.
Finally, the part that's tricky about the layout is that you have to figure out which combinations of aspect ratios will result in a row that is completely full, from left to right. From the screenshot we see three such examples:
1st row = 4 landscape photos
2nd row = 2 landscape photos, 2 portrait photos, and 1 square photo
3rd row = 3 landscape photos, 1 portrait photo, and 1 square photo
The result is that, since all thumbnails have the same height, their combined widths in these particular combinations give you the desired resulting width for the layout rectangle.
So, I think solving this particular problem is basically a matter of solving 4 sub-problems:
Compute the aspect ratios of all photos in the available "photo pool"
Make a list of all combinations of photos' aspect ratios that result in the desired width (to make a single row)
From the pool of photos available, figure out which photos you can combine into which valid combinations, resulting in a single, composed row of images
Finally, steps 1-3 create a single row of images. In order to get the overall rectangle, you just use steps 1-3 to create as many rows of images as you like, and then stack them all on top of one another.
We have a page with multiple content areas, in one of which we build a table from a result set. The user requirement is that the page not scroll. If we fix the number of rows to now allow scrolling at our preferred screen resolution, it looks great at the preferred resolution, but at lower resolutions the page scrolls. If we fix the number of rows so that the page does not scroll at our lowest supported resolution, we end up with a lot of wasted space at our preferred resolution. We have done some things with the viewport size (get viewport size, subtract all fixed elements, divide the result by normal row height to calculate number of rows to display), but these do not take into account that some of the rows wrap to be two lines. When that happens, we push down and end up scrolling at lower resolutions. Is there any way to dynamically fill an element with rows until it is full but not go past the point where the element would be forced to scroll?
Keep appending rows, all the while checking $('table').outerHeight() until it's greater than $(window).height(), then delete the last row.
Call this window fitting thing again on window resize events.