Is it Possible to Make This Slideshow Responsive?

[KennyP]

Hi guys -

Is it possible to make this slideshow responsive?

All forms of media queries I've tried have no affect on it.

- Thanks

#slideshow {
	width:1920px; 
	height:1080px; 
	float:right; 
	position:fixed; 
	z-index:0; 
        background-repeat: no repeat;
	background-position:center center;
	background-attachment:fixed;
	-webkit-background-size:100%;
	-moz-background-size:100%;
	-o-background-size:100%;
	background-size:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	}

<div id="slideshow"></div>                               
               
<!-- BEGIN KEN BURNS SLIDER -->
<script>
$('#slideshow').crossSlide({
  fade: 0.001
}, [
  {
	src:  '/imgs/billy-joe-conor-lg.jpg',
    alt:  'Billy Joe Conor',
    from: '40% 15% 1.7x',
    to:   '15% 30% 1.0x',
    time: 8
  }, {	  
	src:  '/imgs/billy-joe-conor-lg.jpg',
    alt:  'Billy Joe Conor',
    from: '15% 30% 1.0x',
    to:   '15% 30% 1.0x',
    time: 1
  }
], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
});
</script> 

<!-- END KEN BURNS SLIDER -->

[Beverleyh]

Explicit widths and heights will unfortunately not lend themselves to responsive design, but try changing them to max-width and max-height and apply Method #2 from my blog entry for responsive web images here: http://www.dynamicdrive.com/forums/e...ponsive-Design

[KennyP]

Thank you for your reply Beverley, and thank you also for the tutorial on responsive design here on DD. Will try to implement it now.

[KennyP]

Thanks again Beverley.
The code you provide in the tutorial worked great when I tried it on static images, but not on the ken burns effect I posted above.
It resized the viewing port only,while the image remained exactly the same size behind the viewing port, so you see only part of the image.

It this method is part of the solution. Maybe some additional code is needed to also resize the actual image size to be equal to the size of the viewport.

[Beverleyh]

Ok so let's try a different approach - it's a fullscreen background slideshow, yes?

So using this fullscreen background image as a base http://fofwebdesign.co.uk/template/_...tent-below.htm (the key to this is making the fullscreen img fill 100% width and height of the viewport, while using background:cover; to get it to "best fit" the available space)...

... We can introduce some scale and translate CSS to zoom and pan/move the background-image(s), and then apply it via javascript that sequentially adds a class. This gives us something like this:

Responsive Fullscreen Slideshow with Ken Burns Effect: http://fofwebdesign.co.uk/template/_...-ken-burns.htm

I've adapted it from this article http://www.css-101.org/articles/ken-...transition.php making the CSS responsive with percentages. I've only tested on a fixed screen size at the moment though, so you'll have to resize your browser window to check things, and maybe tweak the % values. The notable ones are;

#slideshow div { width:105%; height:105%; top:-5%; left:-5%; }

These make the images slightly bigger than their container, and the negative offset pulls them back to allow a bit of overhang for the animated movement that is provided by translate(2.5%); on #slideshow .fx.

The JS is pretty much verbatim except that in my demo it references child divs holding the background-images, rather than the tutorial's img tags - that's so we can apply background:cover; to the divs to make the background-images responsive.

Bear with me now because I'm on iPhone and can't test thoroughly - it *should* work in IE9+ and modern browsers but I can't check til I'm back at a desk tomorrow.

View the source of the demo to grab the CSS and JS.

Hope that helps

[Beverleyh]

I've now fixed the static first image on page load by using a very short setTimeout delay when the kbSlideshow(); function is first called http://fofwebdesign.co.uk/template/_...-ken-burns.htm

Compare the difference with the original tutorial where the first image loads in without any nice fade, zoom or pan, with a 4 second wait before the slideshow begins http://www.css-101.org/articles/ken-...transition.php

[KennyP]

WOW! You did it!

I can't wait to try it as soon as my situation allows - sometime this evening - will post my results with a link. Thank you - Thank you!

Just one question: when setting the positions for the start and end of the panning, can it be set in percentages, so that it can accurately pinpoint the needed positions?

[Beverleyh]

That would be a combination of this CSS stuff here;

#slideshow div { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#slideshow :nth-child(2n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow :nth-child(3n+1) { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left }
#slideshow :nth-child(4n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right }

In English, this means;

#slideshow div = The 1st, 5th, 9th, 13th, etc. pic starts from a bottom left position
#slideshow :nth-child(2n+1) = The 2nd, 6th, 10th, 14th, etc. pic starts from a top right position
#slideshow :nth-child(3n+1) = The 3rd, 7th, 11th, 15th, etc. pic starts from a top left position
#slideshow :nth-child(4n+1) = The 4th, 8th, 12th, 16th, etc. pic starts from a bottom right position

And this line here:

#slideshow .fx, #slideshow .fx1 { -webkit-transform:scale(1.35) translate(2.5%); -ms-transform:scale(1.35) translate(2.5%); transform:scale(1.35) translate(2.5%); opacity:1 }

scale(1.35) makes them zoom by 35%

translate(2.5%) moves them towards centre from their original transform-origin position (the stuff from the first block of code)

Hope that helps

[KennyP]

So by manipulating translate percentages, coordinates should be as accurate as in the simpler code I posted.


Thank you so much Beverley!

[Beverleyh]

ps - just to confirm what happens with IE9 now that I've got back to a desk...

In IE9, there is no 'ken burns' style zoom+pan or fade, BUT the slideshow still presents itself, albeit in a less elegant fashion - the pics change and pop suddenly on to screen at their defined transform-origin position (a bit towards the top, over to the right, etc.).

On the demo page I've also included conditional styles for IE7/8 so that they just get a static image as fallback.