I have a folder of images and I want my website to display them all without resizing them while minimizing whitespace.
Is this possible at all?
A few of the images would be able to be rotated to make it fit better, but I'm not sure how I would go about this. The page would have to figure out the way to arrange the images correctly to minimize whitespace, and then create divs with absolute page positions to place each image at that location.
I would also want the page to be able to dynamically resize, so a layout algorithm that takes a few seconds to run would make window resizes super slow.
I found some tutorials on how to do this WITH resizing, but I'm trying to keep the relative sizes of each image the same to one another, so I can't resize them.
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
I'm trying to create an online tool using html/javascript where users can upload their pictures that are imported into a canvas and then they can overlay other pictures on top of them, resize and move them around. To add this, I'm using fabric.js.
I do want to maintain the Image resolutions while I do this, so I have to resize the canvas according to the size of the base image which can get out of hand if the image is 4000px wide. What I'd like to do is display the images in a limited area such as 1000x1000 while maintaining the original size to provide the users with the original resolution when they are done. I tried messing around with CSS to limit the canvas display size but unlike img, canvas seems to override the limits I specify. I'm also using github pages to host this.
What would be the best way to do this?
I'd keep track of my images separately from my rendering layer. So, I'd either keep them in a hash or array in memory or, if that's too expensive, I'd persist them to storage (server side or in S3 or whatever).
Then, you just render low(er)-fidelity images to your canvas.
I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
Let's say I have a big image (mine is 3968x3584) and I want to view it zoomed in. OK, well I can usually zoom in and scroll using the scrollbars.
Well that's annoying. Is there a way I can take the image. And just start somewhere and have it "original" size and I can move it by doing the mouse "drag" across the screen.
and if you resize your browser screen, it will act accordingly.
Is there a jquery or such plugin that can do this?
Check if this helps
http://code.google.com/p/panojs/
Here is a copy of what is written there so I can meet the 30 words this form is forcing me to do:
PanoJS is an interactive JavaScript widget for panning and zooming a
panoramic image stitched together dynamically from smaller tiles. This
widget can be used for viewing images that are larger than the
available space in the browser viewport. Examples include maps or high
resolution document scans.
I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.