I'm trying to make a slider (using bxSlider) similar to this one.
It seems the div containing the slider changes its width in equal increments depending on the width of the user's browser. In other words, the div never cuts off the image partially, it always shows the full picture or hides it.
Does anyone know how this works?
You can use media queries
For that you have to know how wide your images are, so you can calculate the width of the slider container.
Just a quick example - your images are 200px wide. So for screens between 800 and 1000px your image container has to be 800px - only 4 images can fit without crop. For screens between 1000 and 1200px - 1000px, so 5 images fit, etc.
Related
There is a div in my masonary images and on 1920 resolution the div increases its height on some images and on few it acts same
for height I have used height:intial;
Any solution?
On my website, some pictures are pretty long (width varies between 400 and 1000px while height >= 3500px). I want to set same width (800px) for all pictures in Lightbox and then scroll down to view them, but don't know how. Where and what exactly should I change in the lightbox.css or lightbox.js?
Problem solved
My Lightbox version is v2.9.0 by Lokesh Dhakar. I solved the problem by commenting out the image fitting part in the lightbox.js. Specifically, in lightbox.js, comment out lines 276-281 and 290-321. This operation will prevent an image from resizing to fit the window and will allow users to scroll down to view a picture if the picture's height exceeds the height of the window.
I have a high resolution image I want to use for a simple yet responsive "coming soon page." The image is 3 times taller than it is wide and itself contains a logo and some centered text strewn across three panes as in this example.
To make this webpage work on both large and small screens it would be great to
Auto resize the image height to 3 times the browser height
Maintain aspect ratio
Set a minimum image pixel width so that "Widest Text Blurb" is never cutoff
Allow the image to overflow as necessary to accomplish 1. without creating a horizontal scroll bar
It would be awesome to scroll snap between panes.
Parts Of The Solution
In the beginning I was using vw or vh on width or height settings but perhaps I should be scaling to something other than the viewport.
Aspect ratio is maintained by specifying the width, or the height, but not both,
Just use CSS min-width
This SO post and answered fiddle help but breaks when I try scaling the image.
I've experimented with cutting the image into 3 different images and placing them in divs in this scroll snap demo but the panes end up overlapping. Scrolling wouldn't necessarily have to show an entire pane but should snap to the horizontal center of a pane
How can I mix the partial solutions above (or others) to make an image scale as described? I have a ton of failed Fiddles I could share but none of them really give a starting advantage.
UPDATE
The text depicted in the imgr link isn't a placeholder for text that will be in divs but is itself in the image. Apologies for any confusion
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 have a page that is laid out using DIVs, and it essentially consists of a header(menu), a left pane (about 20% page width), right pane (remaining 80%), and a footer. The height of the page is about 2-3 screen heights, so it is scrollable. It looks like this.
All I have in the left pane <div> is an image that occupies about 40% of the screen height. I'd like the image to basically "slide" up and down the screen as the user scrolls.
The menu takes up ~100 pixels in height, so the image begins in the left pane at ~px 100. Once the user scrolls down to the point where the image is at 0 px, I want the image to remain fixed at 0 px as the user scrolls (instead of obviously scrolling off the screen, like it does now). The footer also occupies ~100 px, so I want the image to obviously not display over the footer.
Is there a simple solution or JS/CSS trick to implement this?
There is a nice jQuery plugin called jScroll give it a try! You can see the demo here: http://www.wduffy.co.uk/jScroll/ as well as the download link.
Enjoy!