PDA

View Full Version : fadeSlideShow v 2.6 Responsive not working



HalRau
09-09-2015, 07:46 PM
1) Script Title: Ultimate Fade-in slideshow (v2.6)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
09-11-2015, 09:37 AM
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
09-12-2015, 11:58 AM
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
09-12-2015, 03:36 PM
I tweaked the DD-script. Here (http://mesdomaines.nu/slideshow_responsive_oquin/oquin.html)'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
09-12-2015, 05:27 PM
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
09-12-2015, 06:00 PM
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
09-12-2015, 06:44 PM
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
09-12-2015, 07:56 PM
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
09-12-2015, 08:32 PM
Here (http://mesdomaines.nu/slideshow_responsive_oquin/oquin_bio.html)'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
09-12-2015, 09:35 PM
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_responsive_oquin/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.