CSS/Javascript Framework that fits pictures in one screen - javascript

I'm trying to fit 3 pictures in one HTML page, such that maximum screen area will be used, without scrolling. When screen size changes the pictures should be re-arranged, covering maximum screen arena. Each picture has different dimensions. For easier fitting each pic could be cropped (2:3 proportion max). The layout should be fluid and responsive. See example below
Two frameworks I'm considering for this problem are Twitter Bootstrap and jQuery Masonry, but none of these solves the problem of fitting.
Currently I solve this problem making square thumbnails out of each with css and overlapping those pictures, but users want the see the entire picture without overlapping and as big as possible:
!
you can see it in action at vash.co

You can get pretty close using pure CSS. Take this example, try it in Google Chrome: http://jsbin.com/ixomav/1 (source)
It's pretty crude but it should get the idea across. Going furthur you could add js code to resize images with a proper aspect ratio or keep trying with a css only approach. I used random images from wikipedia for my example but you may have an easier time if all your photos are the same dimensions.
If you remove the height you'll get properly aspected images but the problem with that is the white space, example: http://jsbin.com/ixomav/2
Check out Isotope: http://isotope.metafizzy.co/demos/images.html

Related

How to make a REAL responsive image slider?

Here I have 'responsive image slider'on my site but as you can see, these images are not really feet well, sometimes it's bigger as in expected to be, sometimes cutted.
How can I fix this problem do I need special picture sizes for this like 4240x2600 ?
At diffrent screen resolutions it looks diffrent and odd
site - hicandy.ru (sorry can't add more than 2 links) it was built on OpenCart and slider uses 'Revolution Slider'
expamples
example 1
example 2
I think you have different options:
CSS media queries for display a different layout for your image slider which will be applied based on your browser size window.
Percentage base layout, example (width: 20%;).
A combination of both plus JavaScript for example http://bxslider.com

Fullscreen background slideshow with custom image positions (per slide)

I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.
I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.
The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).
At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.
Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)
Thanks guys!
You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.
Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops, like:
Animated Content Menu
Fullscreen Image Blur
Responsive 3D Panel Layout

jQuery responsive banner auto resize images and content to fit space

I want to create custom banner or download one.
The banner has following requirement,
I could add images and text in this banner.
On each slide you can add multiple images and text, for an example slide one has two images and text on sides, then slide two has three images and text on the sides.
IMPORTANT – if the images are small thumbnails the text should fill the blank areas or around the image. The banner should be responsive to the element inside (could be an div). If the image is big the text should go underneath the
image or on the side.
slides left or right
left and right navigation button, as well pagination
Example: http://www.bbc.co.uk - main banner at the top
I had a look on the internet i tried the following:
flexslider - very good, meet all the requirements apart from point 3. but dont know how to make it responsive.
orbit slider - good but flexslider it easier to style.
Note: this banner will not be used on mobile device.
Seems like you didn't get any answers because there's no such thing as a perfect finished solution. It's not difficult to change any of the mentioned sliders and make them responsive IF you know some css. I'd suggest that, depending on how many of these works you want to do, you give it a try. You can find good free tutorials online.
I found this one plugin though, worth a try: http://marktyrrell.com/labs/blueberry/
And some more: http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins

How can I combine an image slider with scaling images?

I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.

Dynamic number of thumbs according to available area in a webpage

I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!

Categories