Is it Possible to Make This Slideshow Responsive?

[KennyP]

Hi guys -

Is it possible to make this slideshow (http://www.billyjoeconor.com/welcome/welcome.php) 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/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-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/_testing/fullscreen-img-content-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/_testing/fullscreen-img-ken-burns.htm

I've adapted it from this article http://www.css-101.org/articles/ken-burns_effect/css-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/_testing/fullscreen-img-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-burns_effect/css-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.

[Beverleyh]

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


Thank you so much Beverley!

You can, BUT, you will also need to adjust the values here;
#slideshow div { width:105%; height:105%; top:-5%; left:-5%; }

These are double the translate(2.5%) value to allow some room to move, otherwise the edges of the images will be visible at the end of each movement phase.

[KennyP]

I will be using the effect with one image only, to reproduce the previous non-responsive effect with the original code I posted (www.billyjoeconor.com/welcome/welcome.php).

#slideshow :nth-child(1) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }

So, for nth-child(1), where does the translate percentage go?

[Beverleyh]

To get the best and most varied effect, I would personally use the same image 4 times;

#slideshow :nth-child(1) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }
#slideshow :nth-child(2) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }
#slideshow :nth-child(3) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }
#slideshow :nth-child(4) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }

And then you would edit all instances of translate(2.5%) to changes the translate percentage, also remembering to change the values in red here;

#slideshow div { width:105%; height:105%; top:-5%; left:-5%; }These should be double the translate(2.5%) value to allow room to move, otherwise the edges of the images will be visible at the end of each movement phase.

[KennyP]

I can't figure out where the settings are for the individual images.

For each of the four images, which
translate(2.5%) applies to which image, and which
width:105%; height:105%; top:-5%; left:-5%; applies to which image.

If you give me one example, I'll be able to do the rest. So, for example, where do I set the start and end positions of just

#slideshow :nth-child(3) { background-image:url(/imgs/billy-joe-conor-lg.jpg) }

[Beverleyh]

I can't figure out where the settings are for the individual images.
These are the only settings for the individual images, or rather, every 4th image - the position changes every 4th one;
#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 }


For each of the four images, which translate(2.5%) applies to which imageIt applies to ALL images. There is actually one ONE translate(2.5%) specified, prefixed by all required vendor prefixes for different browsers. If you look at the selectors for that line #slideshow .fx, #slideshow .fx1 you can see that these are for children of #slideshow with the .fx or .fx1 class applied (via the JS). That means, all divs (i.e. the image slides) inside #slideshow.


and which width:105%; height:105%; top:-5%; left:-5%; applies to which image.Again, This one line applies to ALL images. You can tell this by the #slideshow div selector which is for all divs (i.e. all image slides) inside #slideshow.

[KennyP]

Thank you so much Beverley, and sorry for dragging this on, but I've played with the settings and I can't
seem to get them to work as needed.
I need to start panning from one specific set of coordinates and finish panning at another specific set of
coordinates, as in the code I had posted. Can the following sets of start and end coordinates be set into
the code in place of what there is now?

from: '40% 15% 1.7x',
to: '15% 30% 1.0x',
time: 8

[Beverleyh]

It can but it would need to be done via a custom animation. You could try looking into to keyframes to do that http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/ and also Google round for a few more tutorials if you would like to do that from your side.

If it's something that you would like me to work on your behalf, you can contact me over at Focus on Function and I could add it to my schedule. My hourly rate is £25 per hour.

[KennyP]

Thanks Beverly. I was actually considering asking you if had the time to work on it, but, by timely luck I came across LayerSlider, which has features that can do exactly what I mentioned by being able to choose the magnification and OffsetX and OffSetY of any given layer for panning images. Here's my first try at it (http://www.bjc-testsite.billyjoeconor.com/welcome-page/).

However, if you can make some time in your schedule for me, would you work on making the guitar/audio-player responsive? You know, that entire #info-box you're already very familiar with. As it is, on anything other than a desktop it's an eye sore.