We Keep Coding

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

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.

Shrink dimensions of gif as part of animation

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...

Restrict area of hover for css rollover

I have an image with 5 logo's and I'd like each logo to change individually from greyscale to color on hover. The obvious solution is to chop the image into the separate logo's with each having both a greyscale and color version and then do a standard css rollover.
However, I can't increase the page load with 5 additional image hits. Is it possible to do this using jquery and one large sprite with all 5 logo's in both greyscale and color and somehow detect which area of the image is being hovered over so the associated color version can then be shown?

You don't want to fiddle with cursor location if you can avoid it. Actually, what you probably want to do is create a CSS sprite - it's one image file that contains all 10 logos (5 color, 5 greyscale). That way, the browser only has to load one image. Then, using CSS, you display pieaces of that image as the background image for your various elements, and vary which piece is displayed using the :hover pseudoclass.
This page will get you started:
http://www.w3schools.com/css/css_image_sprites.asp
And I like to use this page to create sprites and the CSS that goes with it.
http://spritegen.website-performance.org/
Note that this is a somewhat difficult technique to get working the first time, but it saves lots of time and bandwidth in the long run.

Slideshow in Javascript when the image changed is the background image

The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?

Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.

As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.