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.
Related
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
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
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
Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.
Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.
As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...
I've been playing around with a gallery similar to that of the iPad's photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery/stack is already open when you click another stack, the photos should pile up at their original position before the next set animates out.
I though something like Isotope would be helpful here, but I'm having a real hard time making it stop overwriting itself. Also, I can't quite figure out how to make it seem as if the thumbnails fly out from the "cover image".
I put a simplified version of what I've got so far on JSFiddle.
Any help is greatly appreciated. I feel like I'm in a little over my head here :)
My question is: how do i make it seem as if the thumbnails fly out from the "cover image"?
You could have an absolutely positioned DIV with a full-size image inside.
Initially, position the div and scale the image such that it perfectly overlaps with the thumbnail.
Then, animate the location and size of both to bring them to the center of the screen at the size you want.