fadeSlideShow v 2.6 Responsive not working

[HalRau]

1) Script Title: Ultimate Fade-in slideshow (v2.6)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I am trying to use percentages on both the height and width in the dimensions specification so the images are fully responsive in mobile, tablets and desktops.
The instructions say I can do this "dimensions: ['90%', '80%'] // 90% by 80% of parent container size" but the script does not work unless I put a pixel amount in one of the entries.
Example, see here http://rauhosting.com/woquin/teaching.htm
Thanks for your help.

[molendijk]

In the demo for the responsive slideshow (#fadeshow4), the DD-script has width: 100%; height: auto.
Replace that with max-width: 100%; max-height: 100%.

So:

#fadeshow4 .gallerylayer img
{
max-width: 100%;
max-height: 100%;
}

Now when you change the size of the container (fadeshow4) the image will automatically grow as large as it can without going outside the bounds or distorting.
The size of the container is governed by the values given for 'dimensions'. You could do, for instance:

var mygallery4=new fadeSlideShow({
	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%','50%'], //width/height of gallery
etc. etc.
})

[HalRau]

Thanks Arie.
I tried your suggestion and it still does not work when both dimension values are percentages. In fact the second one must be a whole number. This messes things up in mobile view as it puts whatever value of vertical spacing around the image in the slideshow.

Here is my code.

<style>
#fadeshow2 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
max-width: 100%;
max-height: 100%;

}
</style>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', '100%'], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["slider-images/WayneOquin-Bio.jpg", "", "", ""],
		["slider-images/DSC_9035-700.jpg", "", "", ""],
		["slider-images/DSC_8748.jpg", "", "", ""]
		],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 5000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

Link to page, http://rauhosting.com/WOquin/bio.htm

[molendijk]

I tweaked the DD-script. Here's a standalone page that should work for you. Positioning & sizing the show can be done inside the first opening div tag in the body (see source). You could replace it, for instance, with something like:

<div style="position: absolute; left: 40%; top: 10%; width: 58%; height: 80%; border: 2px solid gray">

Changing the position and the size can also be obtained inside the following line:

dimensions: ['100%','100%'], //width/height of gallery

where you can put other percentages.

[HalRau]

Do I need to copy and replace the javascript from the standalone page?
Otherwise it doesn't work right. It creates a huge vertical space around the slider.
Have you looked at the page on my server?

[molendijk]

Yes, you have to replace the javascript with the one that is on my standalone page.
I've looked at the page on your server, but I don't know how you want the images to look like there.
Could you change all your relative links into absolute ones ('full links')? That would allow me to just copy the source of your page and then manipulate it.

[HalRau]

Try it now. I have copied your code into the bio.htm page but it stll doesn't work. The slider should appear between the two paragraphs.

[molendijk]

I see the problem now. You're trying to give a percentage height to a relatively positioned div. As soon as I've some time, I will try to solve the problem.

[molendijk]

Here's the standalone page for bio. I think it does what you want. As soon as I've got more time, I will explain what I've done.

[molendijk]

Explanations:
In the 'big' script (originally: fadeslideshow.js), I made some changes pertaining to the background of the (container for the) slideshow images. That removes the black parts around the images. You may want to make the big script external again.

Changes in your bio.htm (on my server: http://mesdomaines.nu/slideshow_resp...oquin_bio.html):

<style>
#fadeshow2 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width/height */
max-width: 100%;
max-height: 100%;
}
</style>

The 'small' script:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: ['100%', '100%'], //width/height of gallery in percentages.
	imagearray: [
		["http://rauhosting.com/WOquin/slider-images/WayneOquin-Bio.jpg", "", "", ""],
		["http://rauhosting.com/WOquin/slider-images/DSC_9035-700.jpg", "", "", ""],
		["http://rauhosting.com/WOquin/slider-images/DSC_8748.jpg", "", "", ""]
		],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 5000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

Immediately before the paragraph that starts with In April 2015, The Danish National Symphony Orchestra ... I put:

<div id="fadeshow2_wrapper" style="position: relative; text-align: left; border: 0">
<div id="fadeshow2" ></div>
</div>
<script>
function height_fadeshow2_wrapper()
{//added to give #fadeshow2 a height 
document.getElementById('fadeshow2_wrapper').style.height=window.innerHeight/3+'px' // replace '3' whith another number if you like
}
setTimeout('height_fadeshow2_wrapper()',0);
window.onresize=function(){height_fadeshow2_wrapper}
</script>

The div having id="fadeshow2_wrapper" must have position: relative in order for the contents of the div having id="fadeshow2" (slideshow) to be part of the ongoing text. But a relatively positioned div cannot have a height given in percentages: the div won't show. That's why I added the script, which uses window.innerHeight to do the same thing for relatively positioned divs as do percentages for absolutely positioned ones. As window.innerHeight equals to 100%, I divided it by 3,which gives the best result and equals to 33.33%.

I guess that's all I did. Ask me if you have further questions.

Btw, your music is accessible yet new and original. To have Hamelin by your site means something! And your arrangement of the Maazel-fragments is marvellous.