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.
Related
I'm designing a website for an artist, and using JQuery to pull images from directories to display on their website.
The problem is that the images are all different sizes, and it's hard to make them look nice in a grid.
In the following example, you can see the images are the same height as the other images in their row, but the width of each row is adjusted so that the rows are of equal length.
How is this achieved? Here is a live example: https://www.zhangjingna.com/
This is achieved using a flexbox and flex-wrap in css.
You probably also need some logic to determine the width of the three images you want to display and use that to set the images width according to that in relation to window.innerWidth. Then in css you can set the height to your desired height (maybe an average of the heights of your images?) and set the object-fit css property of your images to cover;
BTW: The way your example does it is by just arranging the images with absolute positions, which is a nightmare
You should dynamically check aspect ratio of every image, if it is horizontal (landscape), then set image width to 33.3% and don't set height.
If aspect ratio of image is vertical (portrait), then set image height to your row height, for example 300px and don't set width.
I have fixed size frame, in this frame there are some images with different size, it looks like this:
I want to show the images randomly or not in order.
If you want to show an image that covers the whole surface of the container you can use the css3 function cover.
Here an example: https://css-tricks.com/perfect-full-page-background-image/#article-header-id-0
Here the official documentation: http://www.w3schools.com/cssref/css3_pr_background-size.asp
I am using isotope.js in a wordpress theme. I want the user to upload a single image, and then select its shape.
The shape choices are square, long rectangle, and tall rectangle. I'd rather not have the user upload an additional image if they don't have to - and I'd rather use either CSS or Javascript/jQuery to handle the shaping process.
Is this even possible?
::edit:: this is in a responsive layout, so I can't use hard pixel sizes for heights or widths.
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).