I have a gallery that is page with just a bunch of images. Nothing else.
And I want to resize and reduce/increase the number of images on a row depending on the with of the browser window.
Right now I have a fixed number if images per row.
imgSize = documentWidth/18;
With my browser window (1770px), this produces 18 images on one row รก 98.3px wide.
But if the users window is a lot smaller than mine, let's say 962px, the images will be 53.4px wide which is to small.
I want them around 100px.
So I need to calculate how many images will fit on one row if the window size is X and the image cannot be larger than 120px and smaller than 80px.
Divide the window size by 80 and round up.
Responsive design addresses what you are trying to do. You'd use media queries to specify a different number of columns depending on the width of the window - this is done by giving the images a percentage width. Then you could give the images a min-width as well as max-width to constrain their actual sizes.
Related
I'm making a small review card project.
I got the functionality of the card and how I want everything placed. Problem is I want all the pictures to stay the same size without having to set media queries every like 150-200px
I know I can get the initial width/height of the images with no problem. But If I set the images to an initial size is there a way for me to then scale it from that initial size with say the viewport width or viewport height? They are all the same aspect ratio, so I found a size that works for all pictures as the initial size
For those looking for a similar solution I did a portion outside of the code as it made it a lot easier. I just cropped the photos and set them all to the same aspect ratio to start off.
Then I was able to set an initial width on my images to a pixel length.
Then use #media queries to keep them scaled properly for larger screens, I only had to do it for 4 different screen sizes to keep the layout looking proper.
Example:
image {
width: 300px
}
#media screen only and (width: 1920px) {
width: 800px
}
I have a div which contains another 3 divs, and each of them has a table.
I want them to change their size depending on screen size.
The reason why I need it is because:
If page are opened on 1366x768 resolution then page footer are moved with it and as a result, I am getting scrollbar. Because one of the tables already has scrollbar by itself, another scrollbar seems ugly. On bigger resolution everything seems fine (except maybe tables looks smaller and there a big amount of empty space under them).
I read that it could be done with css help but will this kind of solution will work on a different browser? (IE and Chrome for example).
Give max-width to your most outer div which contains other DIVs and then use percentage % for inner DIVs
Assuming you have a container div is 960px wide if you have a col div in the container as 320px wide then that would be 33.33%
320*100/960 = 33.33%
I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});
I am using the jqDock from wizzud.com/jqdock and I was hoping that someone here had some experience with it.
Here is what my dock looks like:
(source: jamespwright.com)
My first issue is that my client is INSISTING that the dock should fill the entire width of the page, but nothing that I change makes that happen. The dock stays the same width no matter what I do.
The second issue is that 3rd from last image. Notice how it is smashed vertically? Each of these images has a second image associated on rollover to display text to the user. That looks like this:
(source: jamespwright.com)
Now each of those images is 64x75 (width x height) pixels. The small images are that same width, but are constrained by the dock to be 48 pixels tall. The only image that is different is the "Companion Animals" hover image, which is 64x83 pixels (so that it can fit the 2 lines of text).
I can't do this without having 2 lines of text on that image. But I can't figure out why the first image (which is the exact same dimensions as the other images) would be "smushed" because the 2nd image is a different height.
Any help would be appreciated.
2nd issue first :
You are constraining the height (height being the minor axis in a horizontal menu) to 48px. Images are constrained proportionately, so a full image size of 64x75 results in an 'at rest' (ie. constrained) size of 41x48. But an image size of 64x83 results in an 'at rest' size of 37x48, ie. narrower than the others by 4px.
One thing to bear in mind here is that the ability to provide separate small images for the at rest state is purely and simply for clarity of images - ie. not having to rely on the browser's size reduction rendition of the reduced 'larger' image. It is always the 'large' image that is the important one and the one that is constrained; the 'smaller' image merely replaces the reduced 'large' image when that image is completely 'at rest' in the dock.
Back to the 1st issue :
I'm not entirely clear on exactly what is required to 'fill the entire width of the page', nor am I certain of what that page is, but I assume it's a fixed width website design, eg. 900px (for sake of argument), and that the 'at rest' dock needs to fill the entire 900px (presumably you're allowed half the inter-image gap at either end!).
You have a problem! Because as soon as any image in the dock is hovered over, the ends of the dock are going to exceed your 'page' width! That is the nature of the dock; that is what it does.
If that really is what you need to do, you have 2 ways of getting the 'at rest' dock to match the required width:
set your image sizes and constraint size such that they fit, and/or
apply css left/right padding to each menu item (better if all images are contained in anchors, then just evenly pad the anchors).