There are several images in folder . I want to fit as many images as possible from the folder into an html page. The images will be selected at random and will have different width & height. I don't want the dimension of the images to change.
How can this be accomplished ?? is this doable with JavaScript ?
This looks pretty complicated to me . is there a simple way of doing this via some other method (server side)?
thanks
Edit: so basically we have a room in which we want to pack as many boxes as we can , the boxes all have different size and cannot be stacked over one another..
This sounds like the bin packing problem:
http://en.wikipedia.org/wiki/Bin_packing_problem
http://mathworld.wolfram.com/Bin-PackingProblem.html
It would be doable but more difficult I think in JavaScript,
You could use a server side language like PHP to do it like this:
load random image files
add up their widths and stop adding images after you've reached your desired page width (do this for height too)
let PHP echo out the images as html <img/> elements with a basic html layout surrounding it or an empty layout
If you could elaborate some more about the details of the page (kind of layout , etc.) I might be able to provide a more specific answer.
Hope this helps.
Update:
It's quite easy to do in php,
if you would do it in javascript I would imagine the approach being something like this:
page with <img width="" height =""/> elements
using the DOM functions to get the elements and iterate through them to make a list while you are still below your maximum width and height
place them next to each other with CSS positioning
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!
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.
Im new to stackoverflow and really hope you guys can help me. I designed a small website for a photographer and he is not okay with the options for his images being download. I know that there is no way to secure images online. (You can easily just save page and get everything you need). if there is a better way. Please kindly let me know..
So anyway i said i will slice his images and upload so people will be downloading only pieces of his image. Even though it is not 100%n secure, he was okay with it after several explanation hours :)
I was hoping to used SuperSimple image tiles but since it runs php alot, it is a bit slow to load images. Im sure, you guys are aware of it.
So anyway now im hoping to use a batch image slicer and slice the images. oh i forgot to tell, there are around 100 images :D
So anyway, i will equally slice an image to 25 pieces (5x5). and i will be adding the image full complete inside a div. What i need to know is, is there away to add the sliced images with a js loop so the process will be much smoother and simpler. Since the div will resize according to the screed dimensions, full image should be in 100% width and height.
this is the current full image syntax.
<div> <img src="IMAGE (1).jpg" width="100%" height="100%" /> </div>
What i want to do is, instead of image tag above, i need to run a loop script. to add 25 images (instead of 1 image to make an image tile).
images are named as IMAGE (1)1, IMAGE (1)2, IMAGE (1)3..etc.. till IMAGE (1)25 and the again IMAGE (2)1, IMAGE (2)2, IMAGE (2)3..etc.. till IMAGE (2)25...
Hope i explained my problem well. Please someone let me know an easy way to add a script to automate the image inserting process. i believe Image style should be as FLOAT=LEFT and WIDTH=20% and HEIGHT=20%..
Thanks a lot in advance.
Using PHP will be better for one important reason: not everyone has javascript enabled.
I'm not familiar with 'SuperSimple image tiles' so I can't comment on its performance but plain php will not slow it down compared - in most situations it should be faster than a similar javascript loop just due to the fact that it is on less piece of data to download to the client side.
To do that in plain php (assumptions spelled out in the initial variables and that the image chunk numbering starts at 0):
<?php
$img_path = "images/funkytree_" //the base image path without the number or the extension
$img_ext = ".jpg" //the extension
$img_alt = "funky tree" //alt text for the images
$i = 0;
while ($i < 25) {
echo "<img src='{$img_path}{$i}{$img_ext}' alt='{$img_alt}'/>;
$i ++;
}
?>
Then best would be to use CSS styling to set the position/size of each image.
HTH
Nick
I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
Basically I'm trying to set up a layout to print bills with tcpdf and I want the bottom part to take up the space remaining after I print the products and services and stuff. I'm wondering if I can make it do that without calculating its height with javascript.
The problem I have with javascript is that I can't just take their height and do some magic math to make them fit because they don't exist in a window. I'd have to somehow calculate the height of the products table based on the number of rows which might not be hard but what do I do if something exceeds its cell width and takes up two of them?
Help's totally apreciated.
i'm not adding code because there's really not much to add, it's just feeding HTML to the tcpdf function.
It's very hard to make the bottom row of a table grow.
Alternate solutions:
Wrap the table in a div and set it's height to 100%. The div will then fill the background. If you make the table opaque, it will look right unless you want something like "extend column borders to the bottom".
HTML is not a good format to create paged output. HTML has no real concept of "page size", it's hard to influence where a page break should (or should not) occur, etc. Instead of trying to manipulate the output remotely, try to drive the TCPDF framework directly. Create PDF page objects, draw the table outline over the full height, start rendering cells until a page is full, start new page, rinse, repeat.